Positionnement de div
Résolu/Fermé
avrelbct
Messages postés
311
Date d'inscription
mardi 20 mars 2007
Statut
Membre
Dernière intervention
17 février 2011
-
9 juin 2010 à 12:15
avion-f16 Messages postés 19250 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 22 décembre 2024 - 9 juin 2010 à 15:01
avion-f16 Messages postés 19250 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 22 décembre 2024 - 9 juin 2010 à 15:01
A voir également:
- Positionnement de div
- Div c++ - Télécharger - Langages
- Logiciel positionnement gratuit - Guide
- Moyenne.si.ens #div/0 ✓ - Forum Excel
- Test de positionnement greta niveau 5 ✓ - Forum Études / Formation High-Tech
- Enlever #div/0 dans tableau croisé dynamique ✓ - Forum Excel
2 réponses
avrelbct
Messages postés
311
Date d'inscription
mardi 20 mars 2007
Statut
Membre
Dernière intervention
17 février 2011
55
9 juin 2010 à 14:33
9 juin 2010 à 14:33
En fait j'ai réussi tout seul.
J'ai utilisé plein de div, que j'ai mises à la suite. C'est pas très propre, mais ça marche...
J'ai utilisé plein de div, que j'ai mises à la suite. C'est pas très propre, mais ça marche...
avion-f16
Messages postés
19250
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
22 décembre 2024
4 505
9 juin 2010 à 15:01
9 juin 2010 à 15:01
Dans le CSS :
J'ai préféré mettre un padding de 50px sur la div qui englobe les deux autres. Ce qui explique pourquoi j'ai mis 160px et pas 210px aux margin-left et -right : il y a déjà 50px entre la bordure et le contenu, alors il en faut encore 160px pour faire les 210px entre la bordure et la boite. Pour la largeur de #contenair, c'est 660px car le contenu fait 660px, mais on lui ajoute 2*50px pour faire la bordure interne (entre le contenu et la bordure) : ça fait 710px. En réalité, ton div en fait même 712 car il y a 1px de la bordure de gauche, et un autre à droite.
M'enfin ... c'est simple, il suffit de comprendre le principe de la mise en boîte en CSS. Ça t'aidera sûrement : https://www.w3schools.com/CSS/css_boxmodel.asp
#contenair {
width: 670px;
margin: auto;
border: solid 1px #444;
background: #eee;
padding:50px;
}
#div1 {
border: solid 1px white;
background: #444;
color: white;
width: 70px;
height: 70px;
margin-left: 160px;
float: left;
}
#div2 {
border: solid 1px white;
background: #444;
color: white;
width: 70px;
height: 70px;
float: right;
margin-right: 160px;
}Et le XHTML :<div id="contenair"> <div id="div1">Salut 1</div> <div id="div2">Salut 2</div> <div style="clear:both;"></div> </div>
J'ai préféré mettre un padding de 50px sur la div qui englobe les deux autres. Ce qui explique pourquoi j'ai mis 160px et pas 210px aux margin-left et -right : il y a déjà 50px entre la bordure et le contenu, alors il en faut encore 160px pour faire les 210px entre la bordure et la boite. Pour la largeur de #contenair, c'est 660px car le contenu fait 660px, mais on lui ajoute 2*50px pour faire la bordure interne (entre le contenu et la bordure) : ça fait 710px. En réalité, ton div en fait même 712 car il y a 1px de la bordure de gauche, et un autre à droite.
M'enfin ... c'est simple, il suffit de comprendre le principe de la mise en boîte en CSS. Ça t'aidera sûrement : https://www.w3schools.com/CSS/css_boxmodel.asp
