28172 sujets

CSS et mise en forme, CSS3

Positionement d'un menu un peu spécial.

Bonjour,

J'essaie de faire une petite "bidouille" certainement réalisable, mais je ne m'en sort pas.

Admettons la structure toute simple ci-dessous, qui permet d'avoir une page standard.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<style>
		body{width:964px; margin:auto; background-color:#fff;}
		#en_tete{height:150px; background-color:#fa8072;}
		#menu{float:left; width:200px; height:250px; background-color:#efeeed;}
		#corps{width:764px; height:250px; margin-left:200px; background-color:#9acd32;}
		#pied_de_page{width:964px; height:50px; background-color:#4169e1;}
	</style>
</head>

<body>

	<div id="en_tete"></div>
	<div id="menu">
		<ul>
			<li><a href="index.php">Normal</a></li>
			<li><a href="index2.php">Nouveau</a></li>
		</ul>
	</div>
	<div id="corps"></div>
	<div id="pied_de_page"></div>

</body>
</html>


Ce qui donne :
upload/14443-image1.jpg

J'essaie d'obtenir le même résultat visuel, mais en plaçant dans le code du site, le menu sous le corps.
"en_tete -> corps -> menu -> pied_de_page" au lieu de "en_tete -> menu -> corps -> pied_de_page"
J'inverse donc le menu et le corps et j'essaie d'avoir le même résultat visuel, mais mes liens ce positionnent mal.

Voici ce que j'ai fait :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<style>
		body{width:964px; margin:auto; background-color:#fff;}
		#en_tete{height:150px; background-color:#fa8072;}
		#menu{width:200px; height:250px; background-color:#efeeed;}
		#menu ul{margin-top:0px;}
		#corps{float:right; width:764px; height:250px; margin-left:200px; background-color:#9acd32;}
		#pied_de_page{width:964px; height:50px; background-color:#4169e1;}
	</style>
</head>

<body>

	<div id="en_tete"></div>
	<div id="corps"></div>
	<div id="menu">
		<ul>
			<li><a href="index.php">Normal</a></li>
			<li><a href="index2.php">Nouveau</a></li>
		</ul>
	</div>
	<div id="pied_de_page"></div>

</body>
</html>


Ce qui donne :
upload/14443-image2.jpg

Je n'arrive donc pas à positionner les liens du menu dans le bloc menu, ils se placent en dessous.
Auriez-vous une idée ?

Merci d'avance.
Modifié par yann123 (02 Apr 2013 - 00:54)
Administrateur
Bonjour,

il te faut supprimer margin-left: 200px de #corps, ça ça fait partie d'une astuce à base de position: relative; mais ce n'est pas utile avec float:right;
Sur ton menu, je ne crois pas que float: left; soit utile mais ça n'empêche pas de fonctionner.
Sur le footer, il est vivement conseillé de placer un clear: both; puisqu'il est précédé par un ou 2 flottants. Voire - si nécessaire - d'encadrer menu et corprs par un conteneur avec un .clearfix http://nicolasgallagher.com/micro-clearfix-hack/
Bonjour et merci de ton aide.

En effet, margin-left: 200px de #corps ne sert a rien et apparemment c'est lui qui fessait que les liens du menu apparaissaient tout en bas.

Saurais-tu me dire pourquoi je suis obligé de mettre margin-top:0px sur la balise ul du menu pour que ca s'emboite correctement, car du coup mes liens sont trop collés en haut de la zone de menu :
#menu ul{margin-top:0px;}


Sans #menu ul{margin-top:0px;} (zone blanche = décalage)
upload/14443-image3.jpg

Avec #menu ul{margin-top:0px;}

upload/14443-image4.jpg

Merci encore. Smiley cligne
Modifié par yann123 (03 Apr 2013 - 16:07)
Sujet clos
Aller à