Menu horizontal
Jacques
-
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
j'ai crée un menu horizontal comme suit:
Du fait de mes images (ce sont des séparateurs), mes titres se placent en dessous de chaque séparateur et non pas dedans (entre 2 séparateurs).
Quelles sont donc les instructions CSS nécessaires pour disposer mes titres à cotés de mes séparateurs ?
En clair j'ai un menu comme celui-ci: http://images.webdesignbooth.com/horizontal-navigation-menus/a-stylish-navigation-menu.jpg
sauf que mes séparateurs ne sont pas des border mais des images.
Merci
j'ai crée un menu horizontal comme suit:
<ul id="menu">
<li>
<img src="images/image1.jpg">
<a href="#">Titre 1</a>
</li>
<li>
<img src="images/image2.jpg">
<a href="#">Titre 2</a>
</li>
<li>
<img src="images/image3.jpg">
<a href="#">Titre 3</a>
</li>
</ul>
Du fait de mes images (ce sont des séparateurs), mes titres se placent en dessous de chaque séparateur et non pas dedans (entre 2 séparateurs).
Quelles sont donc les instructions CSS nécessaires pour disposer mes titres à cotés de mes séparateurs ?
En clair j'ai un menu comme celui-ci: http://images.webdesignbooth.com/horizontal-navigation-menus/a-stylish-navigation-menu.jpg
sauf que mes séparateurs ne sont pas des border mais des images.
Merci
2 réponses
-
Bonjour,
Tout dépend de la taille de tes images et de la largeur que tu fournis à ton menu pour être horizontal.
-
-
-
Ah ok, alors mon menu est dans un conteur menu-top définit comme suit:
.menu-top{ width: 800px; height: 43px; vertical-align: top; }
et voici pour le style du menu en lui même.
#menu { margin: 0; padding: 0; list-style-type: none; font-family: Arial; font-size: 14px; } #menu{ border: 0px solid #d40203; margin: 0; padding: 0; float: left; width: 150px; } #menu{ border: 0px solid #777777; padding: 10px; height: auto; text-align: left; display: block; color: #FFFFFF; text-decoration: none; color: #04519C; } -
-
-
-
Bonjour
fais plutot ca
html
<div class="menu-top">
<ul>
<li>
<img src="images/image1.jpg">
<a href="#">Titre 1</a>
</li>
<li>
<img src="images/image2.jpg">
<a href="#">Titre 2</a>
</li>
<li>
<img src="images/image3.jpg">
<a href="#">Titre 3</a>
</li>
</ul>
</div>
déclare tes li comme cela
.menu-top li {}
tu fais un width à ton li (nombre de li dans le menu multiplié par leur width pas supérieur au width du menu-top )
tu mets ton li en display inline-block
tu peux y ajouter un peu de margin histoire que ce soit pas collé
et tu fais
.menu-top img {
width:le width des li;
border:0;
margin:0;
padding:0;
}
et pas de dimension d'image dans le html
les images ne seront jamais plus grandes que le li dans lequel elle sont
le texte meme chose
Un petit merci vaut mieux qu'une grande ignorance
