Réaction etrange des paragraphes quand menu avec images

Bonjour,

J'ai utilisé le tuto Réalisation d'un design complet (XHTML / CSS) en 5 étapes qui m'a été très utile mais pour mon menu j'utilise des images. Le code de mon menu ressemble donc à ça :

<ul id="menu">
    <li><a href="index.php"><img src="images/accueil.jpg"></a></li>
    (...)
</ul>

et ma CSS :

ul#menu
{
	margin: 0;
	padding: 0;
	list-style-type: none ;
}

ul#menu li
{
	margin: 0 ;
	padding: 0 ;
	float: left;
}

ul#menu li a
{
	display: block ;
	text-decoration: none ;
	border: 1px solid #fff ;
}

ul#menu li a:hover
{
	border: 1px solid #000 ;
}

Mon menu est tout beau mais le problème c'est qu'en dessous de ce menu je met ma div contenu :

<div id="contenu">
		<p>blabla1</p>
		<p>blabla2</p>
</div>

et pour le CSS :

div#contenu
{
	padding: 25px;
}

	
div#contenu p
{
	text-indent: 2em;
	line-height: 1.7em ;
}

Et là, bug : mon padding est pris en compte sur la gauche et à droite mais en haut mon paragraphe reste collé à mon menu. De plus, sur IE mon premier paragraphe est amputé de sa tabulation (text-indent: 2em;)
Si je retire mon menu ou que je n'utilise plus d'images, tout reviens dans l'ordre donc à priori ça vient bien de là mais pourquoi ?

En espérant avoir été clair et n'avoir pas fait de boulette pour mon premier post, je vous remercie d'avance.
Modifié par Willy O (26 Feb 2008 - 11:15)

Bonjour,

Si tu rajoutes ceci, est-ce que ça corrige le problème?

ul#menu {
	overflow: hidden;
	zoom: 1;
}

... auquel cas c'est un problème classique de dépassement des éléments flottants.

http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Florent V. a écrit :
Si tu rajoutes ceci, est-ce que ça corrige le problème?

ul#menu {
	overflow: hidden;
	zoom: 1;
}

Oui en effet, cela corrige mon problème.
Je débute en CSS (et en mise en page sans tableau en fait ), que veulent dire ces deux lignes ?

En tout cas, merci pour ta réponse.

Willy O a écrit :
Je débute en CSS (et en mise en page sans tableau en fait ), que veulent dire ces deux lignes ?

Voir le lien donné comme information complémentaire.

Mais rapidement:
- le overflow: hidden crée un contexte de formatage qui empêche le dépassement des flottants (ça marche aussi avec "auto" ou "scroll" plutôt que "hidden");
- le zoom: 1 est uniquement destiné à IE 6 qui n'implémente pas le mécanisme de contexte de formatage... zoom: 1 confère le layout au bloc, ce qui empêche là aussi le dépassement des flottants.

Sur ce dernier point, on pourra voir dans la FAQ du forum la partie qui traite du HasLayout.