Suivez les fils RSS
 
Rechercher dans le sujet :
Forum
» CSS et mise en forme, CSS3
» Centrer des div en css résolu
Auteur
rimbaut
# 13 Mar 2010 - 22:56:04
Citer
12 Posts
 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

Modifié par rimbaut (14 Mar 2010 - 12:53)
^
Heyoan
# 13 Mar 2010 - 23:11:51
Citer
Modérateur
8101 Posts
 Hello rimbaut et bienvenue 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).

previews/1-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. 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.
Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
^
rimbaut
# 13 Mar 2010 - 23:42:16
Citer
12 Posts
 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.
^
Mikachu
# 14 Mar 2010 - 00:00:56
Citer
C'est quand les vacances ?
Modérateur
5136 Posts
 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. cligne
Une page en ligne ou au moins l'intégralité du code html et css ça aide à vous aider plus vite !
http://www.mikachudesign.com/ 
^
Heyoan
# 14 Mar 2010 - 00:53:35
Citer
Modérateur
8101 Posts
 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)
Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
^
rimbaut
# 14 Mar 2010 - 12:47:25
Citer
12 Posts
 Ok merci pour ta réponse Heyoan, c'est ce que je recherchais. Bon dimanche.
^
Le sujet est clos.
Aller à