Positionnement de div

[Résolu/Fermé]
Signaler
Messages postés
696
Date d'inscription
mercredi 14 avril 2004
Statut
Membre
Dernière intervention
18 août 2021
-
Messages postés
696
Date d'inscription
mercredi 14 avril 2004
Statut
Membre
Dernière intervention
18 août 2021
-
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

Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 342
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
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41989 internautes nous ont dit merci ce mois-ci

Messages postés
5124
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
5 mai 2021
2 757
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
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41989 internautes nous ont dit merci ce mois-ci

Messages postés
696
Date d'inscription
mercredi 14 avril 2004
Statut
Membre
Dernière intervention
18 août 2021
64
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... (-;
Messages postés
696
Date d'inscription
mercredi 14 avril 2004
Statut
Membre
Dernière intervention
18 août 2021
64
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! (-;