28172 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement à coté d'un "div margin: auto"

Bonjour à tous,
je cherche à placer un menu (div id='menu') à droite de mon contenu (div id='contenu'). mon souci vient du fait que le contenu a une largeur fixe: 600px et qu'il est centré sur la page grâce à margin: 0 auto;.

j'aimerai positionner le menu en absolute mais je ne vois pas comment faire...
voila mon html


<!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" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>page de test</title>

</head>
<body>

<div id='entete'>
	<div>
		<h1>Bonjour</h1>
		<h2>tout le monde</h2>
	</div>
</div> <!--fin de div entete -->

<div id='global'>

	<div id='menu'>
		<ul>
			<li><a href='#'>menu 1</a></li>
			<li><a href='#'>menu 2</a></li>
			<li><a href='#'>menu 3</a></li>
			<li><a href='#'>menu 4</a></li>
		</ul>
	</div>	<!-- fin de div menu -->

	<div id='contenu'>	
		<h1>Titre quelconque</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a dolor sapien, accumsan ultrices lorem. Cras venenatis auctor augue ut egestas. Curabitur fringilla condimentum felis at fermentum. Cras odio mauris, gravida ut vulputate vel, fringilla at justo. Ut egestas felis eget tortor consectetur vitae ullamcorper sem varius. Phasellus ut mi ut velit commodo rhoncus ac eget augue. Suspendisse ac porttitor urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent condimentum luctus leo quis congue. Praesent ultrices, risus eget posuere feugiat, nisl nisl pretium turpis, eget molestie ante tortor vel purus. Proin urna dui, aliquet quis dapibus eu, gravida ac tellus. Aenean bibendum, tortor et condimentum vehicula, nisi lorem interdum dolor, malesuada bibendum nibh enim sed velit. Nunc consequat erat metus. Vivamus vehicula velit a magna eleifend a tincidunt mi pellentesque. Nullam gravida mi at nisi aliquet molestie.</p>
		<p>Phasellus lobortis felis eget velit porta sit amet ullamcorper nulla euismod. Sed venenatis lorem id diam tempus ut tristique lectus imperdiet. Integer interdum fermentum lobortis. Nullam a gravida leo. Donec varius sagittis risus a facilisis. Etiam a condimentum mauris. Curabitur tempus eleifend luctus. Aenean urna libero, auctor vel lobortis fermentum, fringilla at purus. Ut non arcu eros. Mauris eget tortor justo, in pharetra lacus.</p>		
	</div> <!--fin de div contenu -->	
	
</div>  <!--fin de div global -->

	
<div id='pieddepage'>

</div> <!--fin de div pieddepage -->

</body>
</html>


Et le css

		body
		{
			margin: 0;
			padding: 0;
		}
		
		#entete
		{
			margin: 0;
			padding: 0;
			background: red;
			
		}

		#entete div
		{
			width: 600px;
			margin: 0 auto;
			padding: 0 10px;
			background: lightgrey;
		}
		#contenu
		{
			width: 600px;
			margin: 0 auto;
			padding: 10px;
			background: lightgrey;
		}
		
		#menu
		{
			position: absolute;
			top: 200px;
			left: ??;
			padding: 10px;
			background: grey;
			width: 200px;
		}
		h1, h2 { margin: 0; padding: 0;	}


Existe-t-il une notation particulière ? du type left: auto+300px ??? Smiley decu
merci
Modifié par Christophe L.C. (07 Mar 2010 - 17:23)
Résolu en faisant: Smiley biggrin 


#menu
		{
			position: absolute;
			top: 200px;
			left: 50%;			
			margin-left: 310px;
			padding: 10px;
			background: grey;
			width: 200px;
		}

c'est le left: 50% qui me manquait !!
Sujet clos
Aller à