[Résolu] PB de DIV avec une liste UL

Bonjour à tous,

Dans mon site j'ai un HEADER et dedans j'ai placé une liste (UL), mais cette liste se trouve bizarement à l'extérieure de mon header !? alors que le div du menu est bien dedans ?!

Voici mon code :
Mon HEADER

...
<div id="container">

	<div id="header"> // Mon HEADER
		<? include("header.html"); ?> //Mon Menu
	</div>

		<div id="content">
...

Mon Menu (header.hmtl) :

	<div id="menu">
		<ul>
			<li><a href="link.php">Link</a></li>
			<li><a href="link.php">Link</a></li>
			<li><a href="link.php">Link</a></li>
			<li><a href="link.php">Link</a></li>
		</ul>
	</div>

Mon CSS pour le HEADER

#header{
	margin: 0;
	padding: 0;
/*	width: 760px;*/
	background-color: #FF9900;
}

puis pour mon MENU

#menu {
	background-color: #009999;
	float: right;
	width: 500px;
}

ul {
	width: 500px; /* précision pour Opera */
}

li {
	margin: 0;
	padding : 0 0.5em 0 1.8em;
	display: inline;
	background-image: url(/img/puce.gif);
	background-repeat: no-repeat;
}

Merci pour vos lumières
Modifié par Gaaaz (08 Nov 2006 - 19:02)

Bonjour.

Comme #menu est float:right, il est sortit du flux. De ce fait, son container (header) n'a pas d'épaisseur autre que son contenu (hors flotant).

Il convient donc de résoudre le problème en rajoutant :

#header {
...
height: 5em; /* ou autre */
}

Une autre méthode qui ne vaut que ce qu'elle vaut, consiste à rajouter un élément forçant clear:both après l'inclusion du menu.

<div id="header"> // Mon HEADER
	<? include("header.html"); ?> //Mon Menu
	<div style="clear:both"> </div>
</div>

Modifié par GeorgesM (08 Nov 2006 - 08:38)

Trop d'la boulette comme dirait certains

Merci pour ton explication aussi.

En tout je vois qu'il faut souvant mettre height et width dans les DIV à chaque, meme si c'est pour mettre "0".

Bonne soirée

Gaaaz a écrit :
TEn tout je vois qu'il faut souvant mettre height et width dans les DIV à chaque, meme si c'est pour mettre "0".

Euh non au contraire, cela génère souvent plus de problèmes qu'autre chose (surtout que "0" n'a aucun sens et ne fonctionne pas partout).

Hop, un peu de lecture dans l'Incontournable (et pourtant souvent oubliée) FAQ :
http://forum.alsacreations.com/faq/#item6

Hum ok merci bien
Vais voir tout ça.