28173 sujets

CSS et mise en forme, CSS3

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 Smiley smile
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 Smiley smile

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
Administrateur
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 Smiley decu (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