[résolu]Menu horizontal et division autour qui s'adapte

bonjour,

j'ai un menu horizontal et j'ai besoin que la division dans laquelle j'ai mis ce menu s'adapte a la hauteur de ce menu.

mon code html se présente comme cela :

<div id="menu_principal">
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
</ul>
</div>

et ma feuille de style

#menu_principal ul{
margin: 0px ;
padding: 0px ;
list-style: none;
}
/*menu_principal*/
#menu_principal {
background : #ffcf69;
}
#menu_principal li {
float : left; /*ou display : inline;*/
background: #c00 ;
padding : 2px 5px 2px 0px;
}
#menu_principal li a {
float : left; /*enlever si display : inline */
background: #fff ;		
padding : 0px 5px 5px 5px;		
}
#menu_principal li a:hover, #menu_principal li a:focus, #menu_principal li a:active {
background: #444 ;
color: #fff;
text-decoration: underline ;
}
#menu_principal li.courante a{
background: #343434;
color: #fff;
}

donc en flottant la div n'a pas de hauteur mais en même temps c'est normal et en inline la division fait la hauteur du texte et je ne comprend pas vraiment pourquoi. Les item du menu doivent pourvoir tenir sur plusieurs rangés.

item1 item2 item 3 item4
item5 item 6 item 7 item 8

avec la div qui va autour.

voilà, bonne journée
Modifié par bzh (26 Apr 2008 - 14:59)

Salut,

Il faut ajouter un contexte de formatage sur ton menu et donc mettre un overflow:hidden; sur l'élément parent de tes éléments floatés.

(Pour IE6, il faudra remplacer cette instruction par overflow:visible; height:1%;)
Modifié par koala64 (26 Apr 2008 - 12:56)

hello,

merci bien pour le coup de main

le hack c'est pour ie6 est inférieur ou juste ie6?

Ca marche aussi sur IE5, oui.

Ca n'aurait pas été le cas si, au lieu de mettre un height:1%;, on était passé par un zoom:1;.

oki, merci

J'ajoute qu'il faut mettre une taille de 100% au conteneur global du site sinon internet explorer 6 bug complètement