5568 sujets

Sémantique web et HTML

Décalage d'un menu horizontale (li et ul)

Bonjour, je suis en train de codé un design en css, et j'ai rencontré un problème que je n'arrive pas à résoudre (j'ai recodé deux fois depuis le début et j'arrive toujours sur le même problème)
Il y a un décalage sûrement dû au fait que la balise ul ou li saute automatiquement une ligne.
J'ai essayé display: inline; et margin:0px et padding:0px.
Et toujours le même problème Smiley decu
Voilà la page: http://adri5656.free.fr/index2.html
De plus, sous IE ou Firefox, le décalage n'est pas le même, donc pas moyen de régler avec une position absolute Smiley decu

et le code:
ul#menu_haut li
{
display: inline;
}

ul#menu_haut ul
{
display: inline;
}

ul#menu_haut li a
{
float:left;
background: url(images/bouton_menu_header.png) no-repeat;
height:36px;
width:127px;
text-align:center;
margin-left:10px;
display:inline;
}

ul#menu_haut li a:hover
{
background: url(images/bouton_menu_header_clique.png) no-repeat;
color:#aeff00;
}

ul#menu_haut li a.current
{
background: url(images/bouton_menu_header_clique.png) no-repeat;
color:#aeff00;
}


<body>
	<div id="header">
		<div id="bordure_coté">
			<div id="header_contenu"><img src="images/logo.png" alt="logo" class="logo"/>
			</div>
		</div>
		<div id="fond_arrondi">
		</div>
		<div id="menu_haut_div">
			<ul id="menu_haut">
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
			</ul>
	  </div>
	</div>
	
	<div id="menu_gauche">
	</div>
	
	<div id="menu_droite">
	</div>
	
	<div id="contenu">
	</div>
</body>


Merci d'avance!
Modifié par adri5656 (25 Feb 2008 - 16:04)
Bonjour,

C'est tout simplement ton sélecteur qui est faux.
ul#menu_haut ul {
margin: 0;
padding: 0;
}
ne fera rien.
ul#menu_haut {
margin: 0;
padding: 0;
}
marche très bien.
OK, merci beaucoup pour ta réponse, maintenant ça marche niquel sous FF, mais sous IE 6 (j'ai gardé le 6, pour vérifier, car il y a encore de nombreux visiteur en IE6), c'est toujours beugé:
http://adri5656.free.fr/index2.html j'ai mis à jour.

ul#menu_haut li
{
display: inline;
}

ul#menu_haut
{
display: inline;
margin:0px;
padding:0px;
}

ul#menu_haut li a
{
float:left;
background: url(images/bouton_menu_header.png) no-repeat;
height:36px;
width:127px;
text-align:center;
margin-left:10px;
display:inline;
}

ul#menu_haut li a:hover
{
background: url(images/bouton_menu_header_clique.png) no-repeat;
color:#aeff00;
}

ul#menu_haut li a.current
{
background: url(images/bouton_menu_header_clique.png) no-repeat;
color:#aeff00;
}

Modifié par adri5656 (25 Feb 2008 - 16:17)
Sujet clos
Aller à