Fusion des marges

**mitsein** · 22/08/2005, 16h19

Bonjour,

Voila, j'ai une div grise.
A l'interieur de cette boite, j'en place une plus petite, noire celle-ci.
La boite noire doit etre décalée de 20px par rapport au bord haut de la boite grise.

Le code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div style="background-color:#DEDEDE; width:500px; height: 500px">
 <div style="background-color:#000000;color:#FFFFFF;margin-top:20px">noir</div>
</div>

Le probleme c'est que sous moz ou firefox, ce n'est pas la boite noire qui se décale, mais la boite grise.

Apparemment, cela proviendrait de la fusion des marges.

Une solution :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div style="background-color:#DEDEDE; width:500px; height: 500px;padding-top:20px">
 <div style="background-color:#000000;color:#FFFFFF">noir</div>
</div>

Mais du coup, maintenant c'est le probleme entre le modele de boite standard et le modele IE qui pose probleme !

Est ce qu'il un moyen d'annuler cette fusion des marges ? ou est-ce qu'il existe une autre solution à mon probleme ?

Merci d'avance

**denisC** · 22/08/2005, 16h32

Il te suffit de définir un padding-top dans ta boite grise, plutot qu'une marge dans la boite noire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<html>
<body>
<div style="background-color:#DEDEDE; width:500px; height: 500px; padding-top:20px;">
 <div style="background-color:#000000;color:#FFFFFF;">noir</div>
</div>
</body>
</html>

Autre solution: définir un contenu dans la boite grise avant d'insérer la boite noire, ce qui evite la fusion des marges (<span> vide de hauteur null,....) mais le padding, c'est bien

**mitsein** · 22/08/2005, 19h30

ouais sauf qu'avec le padding, ce sont les modeles de boite qui posent pb !
Et du coup, la boite grise est plus grande sous moz que sous IE...

reste la solution du   dans la boite grise, mais bon..

**spirou** · 29/08/2005, 13h59

Salut,

Il y a plusieurs solutions pour ça, j'aurais fait un truc du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div style="background-color:#DEDEDE; width:500px; height: 500px;">
<div style="background-color:#000000; width: 500px; color:#FFFFFF; margin-top:20px; position: absolute;">noir</div>
</div> 
<br> <!-- ou encore -->
<div style="background-color: #DEDEDE; width: 500px; height: 500px; overflow: hidden;">
 <div style="background-color: #000000; width: 500px; margin-top: 20px; color: #FFFFFF;">noir</div>
</div>

Je pense que ça devrais fonctionner correctement avec les deux.

Fusion des marges

HTML

Discussions similaires

Partager

Partager