28172 sujets

CSS et mise en forme, CSS3

[résolu] Décallage vertical du texte dans menu horizontal

Bonjour à tous,

J'ai besoin de vos lumières sur un problème d'alignement de mon texte dans un menu horizontal, dans lequel mes boutons sont séparés par des images.
Le menu fait 31px de haut, comme mes images. Dans le code tout me semble bon, mais sur les navigateurs, le haut du texte se retrouve au milieu de ma barre horizontale (background du menu), et je sèche pour trouver une solution...

Code HTML
<div id="container">
	<div id="header">
		<div id="secondaryMenu">
			<ul id="secondaryMenu"></ul>
		</div>
		<div id="mainMenu">
			<ul id="mainMenu">
				<img src="images/mainMenuSeparator.jpg" alt="" width="3" height="31" />
				<li><a href="#">Bouton 1</a></li>
				<img src="images/mainMenuSeparator.jpg" alt="" width="3" height="31" />
				<li><a href="#">Bouton 2</a></li>
				<img src="images/mainMenuSeparator.jpg" alt="" width="3" height="31" />
				<li><a href="#">Bouton 3</a></li>
				<img src="images/mainMenuSeparator.jpg" alt="" width="3" height="31" />
			</ul>
		</div>
	</div>
</div>


Et sa CSS
div#header {
	width: 950px;
	height: 90px;
}


/* header - mainMenu */

div#mainMenu {
	width: 650px;
	float: right;
	text-align: right;
}

ul#mainMenu {
	height: 31px;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul#mainMenu li {
	height: 31px;
	display: inline-block;
	margin: 0;
	padding: 0;
}

ul#mainMenu li a:link, ul#mainMenu li a:visited {
	padding-left: 15px;
	padding-right: 15px;
	height: 31px;
	font-size: 14px;
	color: #ffffff;
	text-decoration: none;
}

ul#mainMenu li a:hover {
	color: #ff6600;
}


/* header - secondaryMenu */

div#secondaryMenu {
	width: 650px;
	height: 25px;
	line-height: 25px;
	float: right;
	text-align: right;
}


Donc comment faire pour que mes textes soient alignés verticalement avec mes images, sur le fond ?

Comme une image vaut mieux que de longs discours, je vous posterai le rendu...

Merci
Modifié par coulb (15 Mar 2011 - 12:12)
Bonjour,

Première chose : ul n'accepte comme enfant QUE li. Donc ton code HTML est totalement invalide. Les images doivent être placée dans li et de préférence en background.

Pour gérer l'alignement des images, il est possible d'utiliser vertical-align, sur les images (au cas où elles sont dans le HTML).
Bonjour,

J'ai modifié le code pour qu'il soit valide :


<ul id="mainMenu">
	<li class="menuSeparator"></li>
	<li><a href="#">Bouton 1</a></li>
	<li class="menuSeparator"></li>
	<li><a href="#">Bouton 2</a></li>
	<li class="menuSeparator"></li>
	<li><a href="#">Bouton 3</a></li>
	<li class="menuSeparator"></li>
</ul>


Mais cela ne change pas mon problème de positionnement de texte :

upload/9816-screenshotM.jpg
Voici ce que j'ai ajouté pour la classe menuSeparator :


ul#mainMenu li.menuSeparator {
	width: 3px;
	height: 31px;
	background: url(images/mainMenuSeparator.jpg) top no-repeat;
}
Et le style pour 
ul#mainMenu li a { }
????

En fait, l'image ne représente que la ligne verticale dans le menu. Exact ?
Modifié par lddsoft (15 Mar 2011 - 11:12)
lddsoft a écrit :
En fait, l'image ne représente que la ligne verticale dans le menu. Exact ?

Tout à fait



Voici le style de mes liens qui se trouvent dans les li :

ul#mainMenu li a:link, ul#mainMenu li a:visited {
	margin-top: 0;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 14px;
	height: 31px;
	line-height: 31px;
	color: #ffffff;
	text-decoration: none;
	display: inline-block;
}

ul#mainMenu li a:hover {
	color: #ff6600;
}
Bonjour,

C'est une image de décoration, il n'y a pas de raison d'utiliser un élément LI pour ça. En image de fond des items de liste (les vrais), ça serait mieux. Donc code HTML de base:
<ul id="mainMenu"> 
    <li><a href="...">Bouton 1</a></li> 
    <li><a href="...">Bouton 2</a></li> 
    <li><a href="...">Bouton 3</a></li> 
</ul>
Yes!
Nickel, merci fvsch.

Donc pour récap, voici le code html :

<ul id="mainMenu"> 
	<li><a href="#">Bouton 1</a></li>
	<li><a href="#">Bouton 2</a></li>
	<li><a href="#">Bouton 3</a></li>
</ul>

Et la CSS :
ul#mainMenu {
	list-style: none;
	margin: 0;
	padding: 0;
	background: url(images/mainMenuSeparator.jpg) top right no-repeat;
}

ul#mainMenu li {
	display: inline-block;
	margin: 0;
	padding: 0;
	background: url(images/mainMenuSeparator.jpg) top left no-repeat;
}


Merci à tous pour votre aide.
Bye
Sujet clos
Aller à