Bonjour, aujourd'hui j'ai fini mes boxes, je les ai placé et elle ma boxe de gauche ne se placé pas correctement, j'ai donc chercher et tester pendant une bonne trentaine de minute une solution pour enfin faire appel à vous donc mon problème : ici ! Je voudrais donc remonté la boxe rouge à la première boxe bleu car sera des articles les boxes bleu
Code CSS
#boxe_droite {
float:right;
width:700px;
height:auto;
background:#FFF;
margin:5px;
color:black;
border-radius:3px;
padding:5px 5px 5px 5px;
}
#bleu {
background:#0077a8;
width:684px;
height:20px;
text-align:center;
color:white;
-webkit-box-shadow:0 -2px 0 rgba(0, 0, 0, 0.2) inset, 0 2px 0 rgba(255, 255, 255, 0.2) inset;
box-shadow:0 -2px 0 rgba(0, 0, 0, 0.2) inset, 0 2px 0 rgba(255, 255, 255, 0.2) inset;
-webkit-border-radius:3px 3px 0 0;
-moz-border-radius:3px 3px 0 0;
border-radius:3px 3px 0 0;
padding:5px 8px 5px;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);
}
#boxe_gauche {
float:left;
width:255px;
height:auto;
background:#FFF;
margin:5px;
color:black;
border-radius:3px;
padding:5px 5px 5px 5px;
}
#rouge {
background:#cb0000;
width:239px;
height:20px;
text-align:center;
color:white;
-webkit-box-shadow:0 -2px 0 rgba(0, 0, 0, 0.2) inset, 0 2px 0 rgba(255, 255, 255, 0.2) inset;
box-shadow:0 -2px 0 rgba(0, 0, 0, 0.2) inset, 0 2px 0 rgba(255, 255, 255, 0.2) inset;
-webkit-border-radius:3px 3px 0 0;
-moz-border-radius:3px 3px 0 0;
border-radius:3px 3px 0 0;
padding:5px 8px 5px;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);
}
#vert {
background:#069200;
width:239px;
height:20px;
text-align:center;
color:white;
-webkit-box-shadow:0 -2px 0 rgba(0, 0, 0, 0.2) inset, 0 2px 0 rgba(255, 255, 255, 0.2) inset;
box-shadow:0 -2px 0 rgba(0, 0, 0, 0.2) inset, 0 2px 0 rgba(255, 255, 255, 0.2) inset;
-webkit-border-radius:3px 3px 0 0;
-moz-border-radius:3px 3px 0 0;
border-radius:3px 3px 0 0;
padding:5px 8px 5px;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);
}Code HTML :
<div id="boxe_droite">
<div id="bleu">
Nouvelle version !
</div>
Felis bibendum posuere molestie neque at eget fames neque molestie blandit lacinia lacus aenean amet eget non ullamcorper arcu quisque aliquet placerat
</div>
<div id="boxe_droite">
<div id="bleu">
Nouvelle version !
</div>
Felis bibendum posuere molestie neque at eget fames neque molestie blandit lacinia lacus aenean amet eget non ullamcorper arcu quisque aliquet placerat morbi velit ipsum velit augue condimentum interdum est luctus quisque iaculis imperdiet fringilla quis eget quisque orci ullamcorper accumsan auctor fames sem primis elementum mi nisi ut litora
</div>
<div id="boxe_droite">
<div id="bleu">
Nouvelle version !
</div>
Felis bibendum posuere molestie neque at eget fames neque molestie blandit lacinia lacus aenean amet eget non ullamcorper arcu quisque aliquet placerat
</div>
<div id="boxe_droite">
<div id="bleu">
Nouvelle version !
</div>
Felis bibendum posuere molestie neque at eget fames neque molestie blandit lacinia lacus aenean amet eget non ullamcorper arcu quisque aliquet placerat
</div>
<div id="boxe_gauche">
<div id="rouge">
La radio
</div>
</div>
<div id="boxe_gauche">
<div id="vert">
Notre Facebook
</div>
</div>Voilà :S. Cordialement Narty.
5 réponses
Bonjour Narty,
Déja tu veux deux colonnes, une de droite et une gauche (on est obligé de citer les deux pour l'impartiabilité).
<body>
<div id="gauche"></div>
<div id="droite"></div>
</body>Ensuite tu as des blocs articles :
<div class="article">
<div class="titre-bleu"></div>
<div class="paragraphe"></div>
</div>/!\ Je rappelle qu'un id est unique. Tu aura qu'une div avec l'id main. En revanche si tu veux utiliser plusieurs propriétés sur plusieurs div, tu utilises des class.
Bref, je veux mettre mes articles dans la colonne droite
<div id="droite">
<div class="article">
<div class="titre-bleu"></div>
<div class="paragraphe"></div>
</div>
<div class="article">
<div class="titre-bleu"></div>
<div class="paragraphe"></div>
</div>
</div>J'ai donc mis deux articles dans ma colonne droite.
Je mets maintenant mon wiget dans la colonne gauche.
<div id="gauche">
<div id="wiget-radio"></div>
</div>Je termine avec un float left width etc... sur "id" gauche ou/et droite
j'oublie pas de mettre une div class clear avec la propriété : clear:both. Ce qui nous donne comme structure :
<body>
<div id="gauche">
<div id="wiget-radio"></div>
</div>
<div id="droite">
<div class="article">
<div class="titre-bleu"></div>
<div class="paragraphe"></div>
</div>
<div class="article">
<div class="titre-bleu"></div>
<div class="paragraphe"></div>
</div>
</div>
<div class="clear"></div>
</body>Je te laisse te débrouiller pour le css ;)
Merci beaucoup :). Donc en gros il faut que je rajoute dans mon CSS une colonne droite et gauche et non ma boxe ?
en gros il te manque deux colonnes globales dans ta structure html. Je ne vais pas aller plus loin ;). Je t'ai tout dit, c'est à toi de le faire maintenant.