28172 sujets

CSS et mise en forme, CSS3

Centrer des div en css résolu

Bonsoir à tous,
Voila j'ai fait une mise en page en utilisant différents div : un div pour le bandeau, un div pour le menu situé à gauche, un div pour le contenu et un div pour le pied de page.

Je souhaite centrer tous ces div de façon horizontale. J'ai donc pour cela attribuer une largeur à chaque div et ensuite utiliser l'attribut margin-left et margin-right avec la valeur auto.

Si les div bandeau et pied de page fonctionnent, il n'en est pas de même pour le menu et le contenu. Je ne comprends pas pourquoi.

Je vous mets le code css :

div {
	text-align:center;
	}
       div#bandeau {
       margin-left:auto;
       margin-right:auto;
       width:950px;
       height:50px;
       background-color:#00CCFF;
	}
      div#menu {
      margin-left:auto;
      margin-right:auto;
      float:left;
      width:100px;
      height:400px;
      background-color:#FF6699;
	}
      div#contenu {
      float:left;
      width:850px;
      height:400px;
      margin-left:auto;
      margin-right:auto;
      background-color:#FFCC00;
	}
      div#pied_page {
      margin-left:auto;
      margin-right:auto;
      clear:both; 
      width:950px;
      height:50px;
      background-color:#33FF99;]
	}


Et le code html :

<body>
	<div id="bandeau">Ceci est le bandeau</div>
	<div id="menu">Ceci est le menu</div>
	<div id="contenu">Ceci est le contenu</div>
	<div id="pied_page">Ceci est le pied de page</div>
        </body>


Si quelqu'un peut m'éclaircir je l'en remercie vivement.

Bonne soirée
[code=css]

Modifié par rimbaut (14 Mar 2010 - 12:53)
Hello rimbaut et bienvenue Smiley smile ,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace après le crochet ouvrant).

upload/1-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je te rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Autant pour moi. Il est vrai que je n'ai pas lu les règles de base. Comment puis je remédier, je ne pense pas qu'il faille poster le même sujet.
Salut,

Heyoan a indiqué un lien pour le faire dans son message, il ne reste qu'à cliquer pour lire les instructions et les appliquer pour formater correctement ton code. Merci d'avance. Smiley cligne
Le plus simple est d'utiliser un conteneur global qui lui seul sera centré et de placer les autres éléments à l'intérieur :
body {
	margin: 0
}

#global {
	width:950px;
	margin: 0 auto;
	text-align:center;
	background-color:#fc0;
}

div#bandeau {
	min-height:50px;
	background-color:#0cf;
}

div#menu {
	float:left;
	width:100px;
	min-height:400px;
	background-color:#f69;
}

div#contenu {
	margin-left: 100px;
}

div#pied_page {
	clear:both;
	min-height:50px;
	background-color:#3f9;
}
<div id="global">
	<div id="bandeau">Ceci est le bandeau</div>
	<div id="menu">Ceci est le menu</div>
	<div id="contenu">Ceci est le contenu</div>
	<div id="pied_page">Ceci est le pied de page</div>
</div>

Modifié par Heyoan (14 Mar 2010 - 00:54)
Sujet clos
Aller à