Positionnement de div
Résolu
avrelbct
Messages postés
311
Date d'inscription
Statut
Membre
Dernière intervention
-
avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention -
avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
ça fait un petit moment que je cherche partout sur le net, que j'expérimente, à peu près tout, mais je n'arrive pas à placer mes div comme je le souhaite.
J'ai une div container, qui fait 770px de large sur 170 px de haut.
Dedans je veux centrer deux autres div, qui font chacune 70px par 70px.
En gros j'ai ma div container, dans laquelle je veux mettre mes div1 et div2.
La div1 doit être à 210px du bord gauche, 50px du haut, et la deuxième à 210px du bord droit, et 50px du haut., ce qui laisse 210px entre les deux, et 50px en bas de chacune.
Si quelqu'un pouvait m'éclaircir sur les propriétés CSS telles que position, float et tout ça, ça serait très sympa.
Merci d'avance.
ça fait un petit moment que je cherche partout sur le net, que j'expérimente, à peu près tout, mais je n'arrive pas à placer mes div comme je le souhaite.
J'ai une div container, qui fait 770px de large sur 170 px de haut.
Dedans je veux centrer deux autres div, qui font chacune 70px par 70px.
En gros j'ai ma div container, dans laquelle je veux mettre mes div1 et div2.
La div1 doit être à 210px du bord gauche, 50px du haut, et la deuxième à 210px du bord droit, et 50px du haut., ce qui laisse 210px entre les deux, et 50px en bas de chacune.
Si quelqu'un pouvait m'éclaircir sur les propriétés CSS telles que position, float et tout ça, ça serait très sympa.
Merci d'avance.
A voir également:
- Positionnement de div
- Logiciel positionnement gratuit - Guide
- Div c++ - Télécharger - Langages
- Dans le document à télécharger, positionnez l'image dans le cadre gris. mettez un espace de 1 cm autour de l'image. comment se prénomme la personne recherchée ? - Forum Word
- Exemple test de positionnement greta - Forum Études / Formation High-Tech
- Remplacer #div/0 par vide - Forum Excel
2 réponses
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...
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
