Alignement blocs CSS
Résolu
Hurobaki
Messages postés
58
Statut
Membre
-
Hurobaki Messages postés 58 Statut Membre -
Hurobaki Messages postés 58 Statut Membre -
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)
A voir également:
- Alignement blocs CSS
- Code blocs - Télécharger - Langages
- Epreuves de blocs v10 - Guide
- Enlever le soulignement d'un lien css - Astuces et Solutions
- Css exposant ✓ - Forum CSS
- Css download - Télécharger - HTML
1 réponse
Salut
voila la solution
le html
le css
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.
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 css
body {
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.
Ta solution marche parfaitement ! Je te remercie pour cette réponse claire et précise qui vient d'égayer ma journée !
Donc un énorme merci à toi !
Bonne journée