Positionnement de div
Résolu
Salut à tous,
Je suis en train d'essayer de faire un truc qui, à première vue, paraissait tout simple... comme dab avec le positionnement des div...:roll:
J'aimerais parvenir à faire ça:
http://www.zimagez.com/zimage/positionementdiv.php
Pas compliqué, comme vous le voyez!
J'ai ceci:
<div id="contener">
<div id="contenu"></div>
</div>
J'aimerais ne pas définir de hauteur à ma div "contener" et que ce soit sont contenu qui définisse celle-ci.
J'ai essayé ceci mais le résultat n'y est pas:
#contener{
width:780px;
}
#contenu{
width:500px;
height:260px;
margin-left:auto;
margin-right:auto;
margin-top:50px;
margin-bottom:20px;
}
En fait, le bord inférieur de la div contener reste collé au bord inférieur de la div contenu. Bref, mon écart inférieur n'apparait pas et la hauteur de la div contener est plus petite que celle que je voudrais! Par ailleurs, ma div "contenu" n'est plus tout-à-fait centrée horizontalement, elles est légèrement décallée vers la droite.
Du coup, j'ai tenté ceci mais ça ne donne rien non plus:
#contenu{
width:500px;
height:260px;
margin-left:auto;
margin-right:auto;
margin-top:50px;
padding-bottom:20px;
}
J'ai également essayé ça et là, j'ai le résultat escompté:
#contenu{
width:500px;
height:260px;
margin-left:auto;
margin-right:auto;
margin-top:30px; /*(50-20 = 30)*/
padding:20px;
}
Est-ce comme ça qu'il faut que je procède? Ca ne me parait pas très propre comme méthode surtout que je préfère éviter que la div "contenu" ait un padding top, left ou right...
Je suis en train d'essayer de faire un truc qui, à première vue, paraissait tout simple... comme dab avec le positionnement des div...:roll:
J'aimerais parvenir à faire ça:
http://www.zimagez.com/zimage/positionementdiv.php
Pas compliqué, comme vous le voyez!
J'ai ceci:
<div id="contener">
<div id="contenu"></div>
</div>
J'aimerais ne pas définir de hauteur à ma div "contener" et que ce soit sont contenu qui définisse celle-ci.
J'ai essayé ceci mais le résultat n'y est pas:
#contener{
width:780px;
}
#contenu{
width:500px;
height:260px;
margin-left:auto;
margin-right:auto;
margin-top:50px;
margin-bottom:20px;
}
En fait, le bord inférieur de la div contener reste collé au bord inférieur de la div contenu. Bref, mon écart inférieur n'apparait pas et la hauteur de la div contener est plus petite que celle que je voudrais! Par ailleurs, ma div "contenu" n'est plus tout-à-fait centrée horizontalement, elles est légèrement décallée vers la droite.
Du coup, j'ai tenté ceci mais ça ne donne rien non plus:
#contenu{
width:500px;
height:260px;
margin-left:auto;
margin-right:auto;
margin-top:50px;
padding-bottom:20px;
}
J'ai également essayé ça et là, j'ai le résultat escompté:
#contenu{
width:500px;
height:260px;
margin-left:auto;
margin-right:auto;
margin-top:30px; /*(50-20 = 30)*/
padding:20px;
}
Est-ce comme ça qu'il faut que je procède? Ca ne me parait pas très propre comme méthode surtout que je préfère éviter que la div "contenu" ait un padding top, left ou right...
Configuration: Windows XP Internet Explorer 6.0
4 réponses
-
ContributeurSALUT
Met le "padding" a la div contener
l'emploi d'un padding-top et non d'un margin-top en raison du comportement appelé "fusion de marges" (selon cette règle, la marge haute de "contenu" s'applique en fait à son parent "contener"). -
selon cette règle, la marge haute de "contenu" s'applique en fait à son parent "contener".
Ah oui? Mais c'est bon à savoir, ça! Encore un truc que j'apprend! Un grand merci pour ton aide, RAD! Je vais aler essayer ça... demain matin! J'ai plus le courage ce soir... (-; -
ContributeurBonjour,
Sinon, essaye comme ça :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Un titre</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <style type="text/css"> html, body { margin: 0; padding: 0; text-align: center; color : #000; } #contener { width:780px; text-align : center; background-color : #aaa; } #contenu { width:500px; height:260px; margin: 0 auto; background-color : #eee; } </style> </head> <body> <div id="contener"> <p style="margin:0; height:50px; background-color : #555;">p haut</p> <div id="contenu"> contenu </div> <p style="margin:0; height:20px; background-color : #555;">p bas</p> </div> </body> </html>
++
Un peti code d'une page entière c'est plus pratique, non ?
(-;
-- -
Tu rajoutes carrément des conteners pour créer l'espacement? Je suppose que c'est une méthode comme une autre... et en fait, je crois que ça m'arrange mieux!
Merci! (-;
