Barre de menu horizontal

**olef** · 12/09/2012, 09h18

Re : Barre de menu horizontal

Bonjour,
Personne n'a une petite idée ?

Bien sincèrement.

**mol86** · 12/09/2012, 12h00

Re : Barre de menu horizontal

Salut, quelle est l'adresse du site ?

**olef** · 12/09/2012, 17h05

Re : Barre de menu horizontal

Bonjour,
Actuellement, le site n'est pas encore opérationnel. Je travaille en local. Mais, je peux vous montrer ce que cela donne dans le bas de ma page d'accueil (position footer) voir photo.

Au lien d'avoir ces 3 lignes qui me prennent de la place, j'aurais bien aimé avoir un bandeau découpé en 3 ou 4 zones pour y inclure mes liens.
Merci par avance.
Très sincèrement.

Fichiers joints

**mol86** · 12/09/2012, 17h43

Re : Barre de menu horizontal

Envoyé par olef Voir le message

Bonjour,
Actuellement, le site n'est pas encore opérationnel. Je travaille en local. Mais, je peux vous montrer ce que cela donne dans le bas de ma page d'accueil (position footer) voir photo.

Au lien d'avoir ces 3 lignes qui me prennent de la place, j'aurais bien aimé avoir un bandeau découpé en 3 ou 4 zones pour y inclure mes liens.
Merci par avance.
Très sincèrement.

Salut,
Et tu ne peux pas modifier ton template de manière a y positionner des blocs div en inline a ce niveau la ? les div en inline s'aligne les uns a coté des autres et avec un peu de css par dessus en retouchant au bon fichier dans le template tu décores tout ça a ta guise et dans l'esprit du reste du template. Je suppose que ça doit pouvoir se faire sans trop de difficulté (mais tu ne me montres pas le code source html de ton footer donc pour l'instant je ne peux que supposer).
Cordialement,
mol86

**olef** · 13/09/2012, 09h34

Re : Barre de menu horizontal

Merci de vous êtes penché sur mon petit problème.
En consultant le code source de ma page voilà la partie footer :



<div id="footer" style="font-size:12px; width:1000px;">
<div id="youjoomla">
<div id="footmod">
<ul class="menusitemap">
<li id="item-581"><a class="mainlevel" href="/index.php/plan" >Plan du site</a></li></ul><ul class="menu">
<li id="item-523"><a class="mainlevel" href="/index.php/mentions-legales" >Mentions légales</a></li></ul><ul id="jlord-rss" class="mod_obrss"> <li>
<a href="/index.php/component/obrss/testgfec" title="testgfec">
<img src="https://www.gfec-test.cemes.fr/components/com_obrss/images/feeds_16.png" alt="testgfec" width="16" height="16" align="top" border="0"/> testgfec </a>
</li>
</ul>

</div>

Je veux bien mettre des DIV pour mes 3 lignes concernées, mais je ne sais pas quel fichier Html concerné, et ne sais trop comment m'y prendre.
Dans modules/mod_footer je ne vois pas de fichier footer.html
C'est surement pas à cet endroit là.
Aussi, j'utilise le template "Yougrids"

Voilà ! si cela peux vous éclaircir un peu......

Bien cordialement.

**PhilJ** · 13/09/2012, 17h12

Re : Barre de menu horizontal

Bonjour,

...Il est normal que vos liens s'affichent les uns en-dessous des autres puisqu'ils sont dans des balises <ul><li>...</li><li>...</li></ul>.

=> Pour les aligner simplement, remplacez votre code :

<ul class="menusitemap">
<li id="item-581"><a class="mainlevel" href="/index.php/plan" >Plan du site</a></li></ul><ul class="menu">
<li id="item-523"><a class="mainlevel" href="/index.php/mentions-legales" >Mentions légales</a></li></ul><ul id="jlord-rss" class="mod_obrss"> <li>
<a href="/index.php/component/obrss/testgfec" title="testgfec">
<img src="https://www.gfec-test.cemes.fr/components/com_obrss/images/feeds_16.png" alt="testgfec" width="16" height="16" align="top" border="0"/> testgfec </a>
</li>
</ul>

Par quelque chose comme :

<a href="/index.php/plan" >Plan du site</a> - <a href="/index.php/mentions-legales" >Mentions légales</a> - <a href="/index.php/component/obrss/testgfec" title="testgfec"> <img src="https://www.gfec-test.cemes.fr/components/com_obrss/images/feeds_16.png" alt="testgfec" width="16" height="16" align="top" border="0"/>

Pour un alignement plus élaboré, il faudrait regarder du côté des positions modules de votre template.

Enfin, des classes CSS sont peut-être à ajouter aux <a href...>.

Cordialement,

PhilJ

**olef** · 14/09/2012, 08h47

Re : Barre de menu horizontal

Ok ! Merci beaucoup.
Aussi, je recherche le fichier à modifier, et dans mon arborescence je ne sais pas quel fichier à modifier. Ce n'est pas du CSS (template.css, ou autres....) mais un fichier html. Mais lequel ????
Voir arborescence dans le fichier joint.
nb : dans mon template Yougrids, je n'ai pas cette possiblité de modifier mon footer.

Encore merci et si vous avez une petite idée......

**lefabdu51** · 14/09/2012, 10h51

Re : Barre de menu horizontal

normalement tes menus sont dans un <div id="footer"> ou quelquechose comme ca
dans ton fichier css, essaye ceci

div#footer ul.menusitemap, div#footer ul.menusitemap li, div#footer ul.menusitemap li a{display:inline}
div#footer ul.menu div#footer ul.menu li div#footer ul.menu li a {display:inline}

De plus tu as deux menus? pourquoi ne pas en avoir fait un seul? avec tes trois liens et publié dans la position footer?

La je ne comprends pas ta technique du tout....

**PhilJ** · 14/09/2012, 16h31

Re : Barre de menu horizontal

Bonjour,

Ce que vous pouvez faire (= une solution parmi d'autres, mais elle est très simple) serait de créer un module HTML, de le publier dans une position module basse (footer) avec le code déjà suggéré :

<a href="/index.php/plan" >Plan du site</a> - <a href="/index.php/mentions-legales" >Mentions légales</a> - <a href="/index.php/component/obrss/testgfec" title="testgfec"> <img src="https://www.gfec-test.cemes.fr/components/com_obrss/images/feeds_16.png" alt="testgfec" width="16" height="16" align="top" border="0"/>

Ensuite, afin que ce code ne fasse pas doublon avec le menu qui s'affiche actuellement (= avec les liens de menu les uns en dessous de autres), rendez le menu en question invisible. Il suffit pour cela qu'il ne soit publié dans aucune position module affichable.

Cordialement,

PhilJ

**mol86** · 14/09/2012, 16h44

Re : Barre de menu horizontal

Envoyé par olef Voir le message

Ok ! Merci beaucoup.
Aussi, je recherche le fichier à modifier, et dans mon arborescence je ne sais pas quel fichier à modifier. Ce n'est pas du CSS (template.css, ou autres....) mais un fichier html. Mais lequel ????
Voir arborescence dans le fichier joint.
nb : dans mon template Yougrids, je n'ai pas cette possibilité de modifier mon footer.

Encore merci et si vous avez une petite idée......

[ATTACH=CONFIG]22387[/ATTACH]

Salut,

Essaye ça :

Code HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html>

	<head>
		<style>
			#footmod ul{
				display: inline-block;
				list-style-type : none;
				border : 0px solid black;
				width : 32%;
				margin:0;
				padding:0;
			}
		</style>
	</head>
	
	<body>
		<div id="footer" style="font-size:12px; width:1000px;">
		<div id="youjoomla">
		<div id="footmod">
			<ul class="menusitemap">
				<li id="item-581">
					<a class="mainlevel" href="/index.php/plan" >Plan du site</a>
				</li>
			</ul>
			<ul class="menu">
				<li id="item-523">
					<a class="mainlevel" href="/index.php/mentions-legales" >Mentions légales</a>
				</li>
			</ul>
			<ul id="jlord-rss" class="mod_obrss"> 
				<li>
					<a href="/index.php/component/obrss/testgfec" title="testgfec">
						<img src="https://www.gfec-test.cemes.fr/components/com_obrss/images/feeds_16.png" alt="testgfec" width="16" height="16" align="top" border="0"/>*testgfec
					</a>
				</li>
			</ul>
		</div>
	</body>
	
</html>

Pour savoir ou insérer ce code CSS, télécharge Firebug (extension Mozilla pour Firefox), installe le, quand tu es sur ta page web appuie sur F12 puis sur le petit cadre qui te fait apparaitre un pointeur sur ta page en cours de visualisation. De la il t'affiche de code css source ainsi que son emplacement. Il suffit que tu te rendes dans ce fichier et que tu y mettes mon code, ou un code lookalike qui te convienne. De cette manière tu vas chercher directement le code css utilisé pour le rendu de ta page et si tu le modifies bah... ça va changer! Tente avec des trucs de merde genre color ou font-family ou border pour que tu vois si tu n'exploses pas d'autres parties dans ta page qui se serve de cette class/id css. Mais a priori des id footmod tu n'en as pas 100 000 sur ta page!

N’hésite pas a indenter ton code j'ai passé 5 minutes a faire ce taff alors que c'est pas a moi de le faire, puis quand tu introduis ton code n’hésite pas a utiliser les balises de code sinon tu fais fuir les gens et au final personne n'a le courage de t'aider alors que ton problème n'est pas super compliqué...

Bon courage !

mol86

**jisse03** · 14/09/2012, 19h40

Re : Barre de menu horizontal

Envoyé par olef Voir le message

Bonjour,
Actuellement, le site n'est pas encore opérationnel. Je travaille en local. Mais, je peux vous montrer ce que cela donne dans le bas de ma page d'accueil (position footer) voir photo.

Au lien d'avoir ces 3 lignes qui me prennent de la place, j'aurais bien aimé avoir un bandeau découpé en 3 ou 4 zones pour y inclure mes liens.
Merci par avance.
Très sincèrement.

Bonjour,

S'agissant de YouGrids, il est très simple de remplacer le tout par un bandeau.

1. Désactiver les modules en position Footer
2. Placer ces mêmes modules en Grid7 positions User 21 à 25.

Si c'est seulement les éléments du menu de pied de page qui devraient être inline au lieu de vertical, appliquer au module menu footer le suffixe -menu

**jisse03** · 14/09/2012, 19h46

Re : Barre de menu horizontal

Envoyé par olef Voir le message

nb : dans mon template Yougrids, je n'ai pas cette possiblité de modifier mon footer.

Le footer se trouve défini dans yjsgcore/yjsg_footer.php.

Attention, ça contient le code de gestion pour le basculemnt vers les mobiles, donc à bien comprendre avant de le modifier. Idem pour tous les fichiers de yjsgcore.

Barre de menu horizontal

Barre de menu horizontal

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association