Alignement blocs CSS
Résolu
Bonjour à tous ! J'ai des soucis avec le positionnement des blocs avec mon CSS
Bon je sais que ce code est très court, le but que je voudrai atteindre est de mettre des blocs sur la gauche de la page en horizontal les uns sur les autres mais aussi de pouvoir en placer sur la droite. Je me suis renseigner avec les display, dans mon code j'ai un display block et un autre inline pour pouvoir aligner.
Or dans mon CSS les paramètres que je modife sur le div#test ne font rien du tout ...
J'espère que des gens indulgents vont pouvoir m'expliquer comment faire ^^
http://www.hostingpics.net/viewer.php?id=476136schema.png Voici ce que je voudrai obtenir ( un chef d'oeuvre ! :p)
div#bandeau {
width:20%;
height:150px;
background-color:red;
display:block;
}
div#test {
height: 500px;
background-color: blue;
margin-left: 500px;
margin-bottom: 1500px;
display:inline;
width: 500px;
}
Bon je sais que ce code est très court, le but que je voudrai atteindre est de mettre des blocs sur la gauche de la page en horizontal les uns sur les autres mais aussi de pouvoir en placer sur la droite. Je me suis renseigner avec les display, dans mon code j'ai un display block et un autre inline pour pouvoir aligner.
Or dans mon CSS les paramètres que je modife sur le div#test ne font rien du tout ...
J'espère que des gens indulgents vont pouvoir m'expliquer comment faire ^^
http://www.hostingpics.net/viewer.php?id=476136schema.png Voici ce que je voudrai obtenir ( un chef d'oeuvre ! :p)
1 réponse
-
Salut
voila la solution
le html
<div id="contener">
<div id="haut">
<div id="hautgauche"></div>
<div id="hautdroit"></div>
<div id="hautcentre"></div>
</div>
<div id="content">
<div id="gauche">
<div id="hautcontent"></div>
<div id="bascontent"></div>
</div>
<div id="contentdroite"></div>
</div>
</div>
le cssbody {
margin:0;
padding:0;
}
#contener {
margin:5px;
}
/*******haut********/
#haut {
width:100%;
height:100px;
border-bottom:3px solid black;
}
#hautgauche {
width:150px;
height:100px;
float:left;
border-right:3px solid black;
}
#hautdroit {
width:150px;
float:right;
height:100px;
border-left:3px solid black;
}
#hautcentre {
margin:0 153px;
height:100px;
}
/*******content**********/
#content {
width:100%;
height:auto;
}
/**gauche**/
#gauche {
width:150px;
float:left;
border-right:3px solid black;
}
#hautcontent {
width:100%;
height:500px;
border-bottom:3px solid black;
}
#bascontent {
width:100%;
height:100px;
}
/**droite**/
#contentdroite {
margin: 0 0 0 150px;
}
Voila j'espère que ca te vas
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
