Positionnement de div
Résolu
Gizmil
Messages postés
706
Date d'inscription
Statut
Membre
Dernière intervention
-
Gizmil Messages postés 706 Date d'inscription Statut Membre Dernière intervention -
Gizmil Messages postés 706 Date d'inscription Statut Membre Dernière intervention -
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...
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
4 réponses
SALUT
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").
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").
Bonjour,
Sinon, essaye comme ça :
++
Un peti code d'une page entière c'est plus pratique, non ?
(-;
--
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 ?
(-;
--
