Positionnement de div

Résolu/Fermé
Gizmil Messages postés 706 Date d'inscription mercredi 14 avril 2004 Statut Membre Dernière intervention 3 octobre 2022 - 11 nov. 2007 à 01:28
Gizmil Messages postés 706 Date d'inscription mercredi 14 avril 2004 Statut Membre Dernière intervention 3 octobre 2022 - 11 nov. 2007 à 10:07
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...

4 réponses

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
11 nov. 2007 à 01:44
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").
1
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 776
11 nov. 2007 à 02:04
Bonjour,

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 ?
  (-;

--
1
Gizmil Messages postés 706 Date d'inscription mercredi 14 avril 2004 Statut Membre Dernière intervention 3 octobre 2022 65
11 nov. 2007 à 01:53
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... (-;
0
Gizmil Messages postés 706 Date d'inscription mercredi 14 avril 2004 Statut Membre Dernière intervention 3 octobre 2022 65
11 nov. 2007 à 10:07
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! (-;
0