Fusion des marges

Version imprimable

22/08/2005, 16h19
mitsein

Fusion des marges
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:

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:

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
22/08/2005, 16h32
denisC
Il te suffit de définir un padding-top dans ta boite grise, plutot qu'une marge dans la boite noire:
Code:

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 :)
22/08/2005, 19h30
mitsein

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..

Salut,

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

Code:

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.
:wink: