Alignement blocs CSS
Résolu
Hurobaki
Messages postés
53
Date d'inscription
Statut
Membre
Dernière intervention
-
Hurobaki Messages postés 53 Date d'inscription Statut Membre Dernière intervention -
Hurobaki Messages postés 53 Date d'inscription Statut Membre Dernière intervention -
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
- Supprimer alignement cartouche hp - Forum Imprimante
- Epreuves de blocs v10 - Guide
- Alignement grid - Forum Windows 10
- Enlever le soulignement d'un lien css ✓ - Forum Webmastering
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