28173 sujets

CSS et mise en forme, CSS3

[résolu] Comportement étrange de marges entourant une liste <ul>

Salut,

J'ai un comportement étrange autour d'une liste de liens me servant de menu. J'ai obtenu un résultat convenable mais avec un moyen que je n'explique pas.

Ce que je cherche à faire: un menu horizontal se trouve en tête de page et je souhaite avoir une marge entre ce menu et le contenu.

Problème: en définissant une marge basse de 50px sur l'élément #menu ou une marge haute sur l'élément #contenu, #menu ET #contenu se décalent vers le bas! #contenu étant "poussé" par #menu.

"Solution": en définissant une marge basse sur les <li> j'obtiens le comportement voulu.

Question: pourquoi?

Voici le code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta content="text/html; charset=UTF-8" http-equiv="content-type">
	<title>TEST</title>
	<style type="text/css">
		* {margin:0; padding:0; font-family:arial, sans-serif; color:#4b4b4b;}
		body {background:#a5a5a5 url("img/fond.jpg") repeat-x;}
		a {color:#4b4b4b;}
		a:hover {color:#003e75; font-weight:bold;}
		em {font-weight:bold;}
		#conteneur {width:980px; margin:0 auto;}
		
		#menu {margin:30px auto 0 auto; display:block; width:880px; list-style:none;}
			#menu li {float:left; text-align:center;}
				#menu a {display:block; text-decoration:none; font-size:13px;}
				#MENU1, #MENU6, #MENU8 {width:94px;}
				#MENU2 {width:99px;}
				#MENU4 {width:114px;}
				#MENU5, #MENU7 {width:124px;}
				#MENU3 {width:134px;}
				
		#contenu {min-height:510px;}
			.contenu1 {float:left; width:48%;}
			.contenu2 {float:right; width:474px;}
			#contenu h1 {font-size:21px; color:#003e75;}
			#contenu p {font-size:13px; text-align:justify;}
	</style>
</head>
<body>
	<div id="conteneur">
		<ul id="menu">
			<li><a id="MENU1" href="index.php?p=MENU1">MENU1</a></li>
			<li><a id="MENU2" href="index.php?p=MENU2">MENU2</a></li>
			<li><a id="MENU3" href="index.php?p=MENU3">MENU3</a></li>
			<li><a id="MENU4" href="index.php?p=MENU4">MENU4</a></li>
			<li><a id="MENU5" href="index.php?p=MENU5">MENU5</a></li>
			<li><a id="MENU6" href="index.php?p=MENU6">MENU6</a></li>
			<li><a id="MENU7" href="index.php?p=MENU7">MENU7</a></li>
			<li><a id="MENU8" href="index.php?p=MENU8">MENU8</a></li>
		</ul>
		<div id="contenu">
			<div id="contenuaccueil">
				<div class="contenu1">
					<img src="img/visu_accueil.png">
				</div>
				<div class="contenu2">
					<p>Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus: eosque ut heiulans baiolorum praecentor ad expediendum quod orsi sunt incitans vocibus crebris. qui haut longe postea ideo vivus exustus est.</p>
					<p>Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus, sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus, quo administrante seditiones sunt concitatae graves ob inopiam vini: huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros.</p>
					<p>Accedebant enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur, et iracundae suspicionum quantitati proximorum cruentae blanditiae exaggerantium incidentia et dolere inpendio simulantium, si principis periclitetur vita, a cuius salute velut filo pendere statum orbis terrarum fictis vocibus exclamabant.</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Merci par avance.
Modifié par bbp (05 Jan 2008 - 11:15)
Bonjour,

Je pense que ça peut avoir un rapport avec les deux concepts suivants:
- dépassements des flottants;
- fusion des marges.

Penses-tu être au clair sur ces sujets? Si non, une petite recherche s'impose.

---

Hmm... ça n'était au départ qu'une supposition, mais après test avec ton code il semblerait bien qu'une conjonction de ces deux comportements joue ici. Pour résumer: les li du menu sont flottants et le ul ne vient pas les contenir, et n'a pas de padding ou border ou hauteur ou quoi que ce soit. Donc le ul a une hauteur totale de 0px. Donc la marge supérieure de div#contenu est transmise à ul#menu, semble-t-il.

Cette fusion des marges ne se produit pas dans les cas suivants:
- ul#menu {height: 1px;}
- ul#menu {min-height: 1px;}
- ul#menu {padding-top: 1px;}
- ul#menu {border-top: solid 1px black;}
(entre autres).

Voilà, mystère éclairci.

PS: pas de Doctype pour cette page?
Florent V. a écrit :
Penses-tu être au clair sur ces sujets? Si non, une petite recherche s'impose.
Je pensais l'être mais je ne le suis apparemment pas. Je vais donc relire deux ou trois petits trucs à ce sujet là.
Florent V. a écrit :
les li du menu sont flottants et le ul ne vient pas les contenir
Je l'avais noté mais c'est la première fois que ça me sautait aux yeux, je ne l'avais jamais remarqué auparavant. Je devais faire les chose bien avant! J'ai choisi le padding comme solution.
Florent V. a écrit :
PS: pas de Doctype pour cette page?

Si, mais j'ai affiché le code source généré et il n'est pas retourné. J'utilise le doctype xhtml 1.0 strict, j'aime bien travaillé avec celui-là.

Merci pour tout Florent.
Sujet clos
Aller à