[Résolu] Retro héritage sur un menu

Bonjour à tous.

Je me mords les doigts depuis un petit moment sur ce problème que je n'arrive pas à comprendre.
J'ai codé un menu pour le site d'un pote. Bon je me suis dit, on va le faire avec le dimensionnement relatif pour changer, et c'est là que les soucis commencent

Je vous mets les liens des tests:
http://entrepot.comze.com/test/test.html
http://entrepot.comze.com/test/test2.html

Voilà, dans le premier cas, la taille des liens dépassent celui du menu.
Dans le second, je mets height en auto et malgré le width en 100% le menu s'arrête au dernier lien et ça va pas quoi, je le veux sur toute la largeur

Je suis incapable de comprendre pourquoi dans le second test ça ne fonctionne pas. Pouvez vous m'aider?
Dans les deux cas, je ne comprends pas pourquoi la taille du menu n'est pas la même que ses liens...

Merci d'avance.

Code css test1

#menu_header {
	width: 100%;
	min-width: 1200px;
	height: 1.05em;
	background: black;
	list-style-type:none;
	margin: 0;
	padding: 0;
	border-top: black solid 1px;
 }
 
#menu_header li {
	float:left; /*pour IE*/
 }
 
#menu_header li a {
	display: block;
	float: left;
	font-size: 0.85em;
	padding: 0.1em;
	padding-left: 25px;
	padding-right: 25px;
	background: black;
	color: white;
	text-decoration: none;
	/*Transition*/
	transition: background 2s;
	-moz-transition: background 2s; /* Firefox 4 */
	-webkit-transition: background 2s; /* Safari and Chrome */
	-o-transition: background 2s; /* Opera */
 }
 
#menu_header li a:hover {
	background: #e97925;
	color: white;
 }  

Code css test2

#menu_header {
	width: 100%;
	min-width: 1200px;
	height: auto;
	background: black;
	list-style-type:none;
	margin: 0;
	padding: 0;
	border-top: black solid 1px;
 }
 /*IDEM*/
 }  

Code du menu

<ul id="menu_header">
<li><a href="http://belisairhouse.1allo.com/" > Belisair House </a></li>
<li><a href="http://belisairhouse.1allo.com/?page_id=336"> Belisair Radiophonies </a></li>
<li><a href="http://belisairhouse.1allo.com/?page_id=330"> Belisair Editions </a></li>
<li><a href="http://belisairhouse.1allo.com/?page_id=564"> Belisair Press </a></li>
<li><a href="http://belisairhouse.1allo.com/?page_id=399"> Birsi </a></li>
<li><a href="http://belisairhouse.1allo.com/?page_id=327"> A propos </a></li>
<li><a href="http://belisairhouse.1allo.com/?page_id=722"> Livre d'or </a></li>
<li><a href="http://belisairhouse.1allo.com/?page_id=366"> Liens </a></li>
</ul>

Modifié par Delta (19 Apr 2013 - 22:08)

Bonjour,

il faut un clear pour rétablir les éléments dans le flux suite au float
A placer à la fin de votre CSS:

 #menu_header:after{
 content:"";
 display:block;
 clear:both;
 }

rodolpheb, un grand merci pour votre réponse.
Vous me tirez une belle épine du pied.
Mon problème est résolu.

Je me pose tout de même l'interrogation suivante par rapport au premier test.
Pourquoi les tailles relatives changent en fonction de l'élément?
Il y a pourtant, si on additionne les valeurs relatives, la même hauteur...

Encore merci !

Delta a écrit :
Je me pose tout de même l'interrogation suivante par rapport au premier test.
Pourquoi les tailles relatives changent en fonction de l'élément?
Il y a pourtant, si on additionne les valeurs relatives, la même hauteur.

je ne saisis pas bien votre question

Je m'excuse je reformule.

Dans le premier cas :

#menu_header {
	height: 1.05em;
 }

#menu_header li a {
	font-size: 0.85em;
	padding: 0.1em;
 }

Si on fait la somme des padding et de la taille du texte on a : 0.85 + 2 * 0.1 = 1.05em
Pourtant ce code ne fonctionne pas, une bonne partie de l'intérêt des tailles relatives est perdue non?
Pourquoi ce code ne fonctionne-t-il pas?
Modifié par Delta (13 Apr 2013 - 19:58)