CSS : Alignement de blocs

VoLCoM · 6 Avril 2007

Bonjour,
J'ai un petit problème d'alignement de mes blocs. Voici le code :
[cpp]
<body>
<div id="bandeau">Ceci est le bandeau</div>
<div id="menu">Test</div>
<div id="contenu">Ceci est le contenu</div>
<div id="pied_page">Ceci est le pied de page</div>
</body>
[/cpp]
[cpp]
div {
text-align:center;
}
div#bandeau {
width:600px;
height:50px;
background-color:#00CCFF;
margin:0px auto;
}
div#menu {
float:left;
width:100px;
height:400px;
background-color:#FF6699;
}
div#contenu {
float:left;
width:500px;
height:400px;
background-color:#FFCC00;
}
div#pied_page {
clear:both;
width:600px;
height:50px;
background-color:#33FF99;
margin:0px auto;
}
[/cpp]
Je n'arrive tout simplement pas à aligner le bloc menu et contenu au centre de ma page comme le bandeau et le pied_page.
J'ai essayer de mettre "margin:0px auto;" dans le menu et contenu et j'ai essayer de jouer avec le float mais sans résultat.

Quelqu'un peut m'aider ? Merci :hello:

marsien · 6 Avril 2007

Tu fais un bloc conteneur qui englobe tout tes autres blocs. C'est à lui que tu appliques un width: 600px; et un margin: auto;

VoLCoM · 7 Avril 2007

Salut,
Il reste seulement le bloc menu qui est encore à gauche. Le bloc contenu est à sa place. Voici ce que j'ai faite :
[cpp]
div#conteneur {
width:600px
height:400px;
margin:auto;
}
div#menu {
float:left;
width:100px;
height:400px;
background-color:#FF6699;
}
div#contenu {
width:500px;
height:400px;
background-color:#FFCC00;
}
[/cpp]
[cpp]
<body>
<div id="bandeau">Ceci est le bandeau</div>
<div id="conteneur">
<div id="menu">Test</div>
<div id="contenu">Ceci est le contenu</div>
</div>
<div id="pied_page">Ceci est le pied de page</div>
</body>

Une solution ?

Merci
[/cpp]

dartyduck · 7 Avril 2007

[cpp]div#conteneur {
width:600px
height:400px;
margin:auto;
text-align: center;
}[/cpp]

VoLCoM · 8 Avril 2007

Ça ne fonctionne toujours pas... Je vous remet le code complet jusquà maintenant.
[cpp]
div {
text-align:center;
}
div#bandeau {
width:600px;
height:50px;
background-color:#00CCFF;
margin:auto;
}
div#conteneur {
width:600px
height:400px;
margin:auto;
text-align:center;
}
div#menu {
float:left;
width:100px;
height:400px;
background-color:#FF6699;
}
div#contenu {
width:500px;
height:400px;
background-color:#FFCC00;
}
div#pied_page {
clear:both;
width:600px;
height:50px;
background-color:#33FF99;
margin:auto;
}
[/cpp]
[cpp]
<body>
<div id="bandeau">Ceci est le bandeau</div>
<div id="conteneur">
<div id="menu">Test</div>
<div id="contenu">Ceci est le contenu</div>
</div>
<div id="pied_page">Ceci est le pied de page</div>
</body>
[/cpp]
Je continu a faire des tests, quelqu'un à une autre solution?
Merci de votre aide!

dartyduck · 8 Avril 2007

vire le float:left; du #menu, il ne doit pas se placer à gauche de ton #contenu, mais au-dessus!

VoLCoM · 10 Avril 2007

Si je vire le float:left; mon bloc menu va se retrouver en haut du bloc contenu...

Je veux qu'il soit à gauche du bloc contenu mais centrer au centre de la page.

Merci

dartyduck · 10 Avril 2007

je comprends pas là.
Tu veux qu'il soit centré sur la page mais à gauche du bloc contenu ? ca veut dire que ton bloc contenu se retrouve entre le menu centré et le bord droit de ta page ? pas tres logque ton truc. t'as pas un lien qu'on puisse voir de quoi ca a l'air ??

VoLCoM · 11 Avril 2007

J'ai finalement trouvé... Pour les intéressés, voici le code.
[cpp]
div {
text-align:center;
margin-left: auto;
margin-right: auto;
}
div#bandeau {
width:600px;
height:50px;
background-color:#00CCFF;
}
div#conteneur {
width: 600px;
height: 400px;
}
div#menu {
float:left;
width:100px;
height:400px;
background-color:#FF6699;
}
div#contenu {
float:left;
width:500px;
height:400px;
background-color:#FFCC00;
}
div#pied_page {
clear:both;
width:600px;
height:50px;
background-color:#33FF99;
}
[/cpp]
[cpp]
<body>
<div id="bandeau">Bandeau</div>
<div id="conteneur">
<div id="menu">Menu</div>
<div id="contenu">Contenu</div>
</div>
<div id="pied_page">Pied de page</div>
</body>
[/cpp]
Merci à tous pour votre aide! :hello:

CSS : Alignement de blocs

VoLCoM

marsien

VoLCoM

dartyduck

VoLCoM

dartyduck

VoLCoM

dartyduck

VoLCoM