28220 sujets

CSS et mise en forme, CSS3

Centrer design css

Bonjour,

Je ne comprends pas pourquoi mon design ne veut pas se centrer : pourtant j'applique un margin: auto; à mon conteneur principal.
Je pense que cela doit venir des float: left; des div à l'intérieur. Voici les codes :

<body>

<div id="conteneur">

	<div id="header"></div>

	<div id="menu_reste"></div>

	<div id="menu_right">
		<div id="accueil"></div>
		<div id="valeurs"></div>
		<div id="investir"></div>
		<div id="contact"></div>

		<div id="menu_bottom"></div>
	</div>

	<div id="corps">
		<div id="top_middle"></div>
		<div id="middle_middle"></div>
		<div id="bottom_middle"></div>
	</div>

	<div id="droite">
		<div id="menu_droite"></div>
		<div id="menu_arbre"></div>
	</div>

	<div id="bottom"></div>

</div>

</body>


body
{
	background: #f1efe5;
	margin: auto;
}

#conteneur
{
	margin-left: 8px;
	margin: auto;
}

#header
{
	background: url('images/header.jpg') no-repeat;
	width: 787px; 
	height: 202px;
	margin: auto;
}

#menu_reste
{
	background: url('images/menu_reste.jpg') no-repeat;
	width: 457px; 
	height: 46px;
	float: left;
}

#menu_right
{
	float: left;
	margin: auto;
}

#accueil
{
	background: url('images/accueil.jpg') no-repeat;
	width: 87px; 
	height: 27px;
	float: left;
	padding: 0 0 0 0;
	margin: auto;
}

#valeurs
{
	background: url('images/valeurs.jpg') no-repeat;
	width: 79px; 
	height: 27px;
	float: left;
	margin: 0 0 0 -7px;
}

#investir
{
	background: url('images/investir.jpg') no-repeat;
	width: 80px; 
	height: 27px;
	float: left;
}

#contact
{
	background: url('images/contact.jpg') no-repeat;
	width: 91px; 
	height: 27px;
	float: left;
}

#menu_bottom
{
	background: url('images/menu_bottom.jpg') no-repeat;
	width: 330px; 
	height: 19px;
	clear: both;
}

#corps
{
	margin: 0 0 0 0;
	float: left;
}

#top_middle
{
	background: url('images/top_middle.jpg') no-repeat;
	width: 539px; 
	height: 28px;
}

#middle_middle
{
	background: url('images/middle_middle.jpg') no-repeat;
	width: 539px; 
	height: 260px;
}

#bottom_middle
{
	background: url('images/bottom_middle.jpg') no-repeat;
	width: 539px; 
	height: 33px;
}

#droite
{
	float: left;
}

#menu_droite
{
	background: url('images/menu_droite.jpg') repeat-y;
	width: 248px; 
	height: 209px;
	margin: 0 0 0 0;
}

#menu_arbre
{
	background: url('images/menu_arbre.jpg') repeat-y;
	width: 274px; 
	height: 112px;
	margin: 0 0 0 0;
}

#bottom
{
	background: url('images/bottom.jpg') no-repeat;
	width: 783px; 
	height: 50px;
	clear: both;
}


PS : je sais qu'il faut que je change les div de mon menu en li ! Smiley rolleyes
Bonjour kev1,

Je t'invite à lire (ou relire) ce tutoriel pour plus d'explications.



body
{
	background: #f1efe5;
	text-align :center;
}

#conteneur

{
        width : 784px; /*j'ai repris celle de ton header */
	margin: auto;
        text-align : left;
}

Modifié par Vero (13 Apr 2006 - 00:18)
Sujet clos
Aller à