Bonjour à vous,
 
 
Je suis en train d'écrire le code pour un entete de site web.
 
Pour le moment, j'ai un fond d'image, ainsi qu'une bannière qui vient se superposer dessus.
 
J'ai créé dans mon CSS 3 div :  
#container <- un "container" (dans lequel seront insérés mon entete, banniere, colonnes et contenants, et piedepage)
#entete <- dans laquelle j'insère mon image de fond
#espace_banniere <- dans laquelle j'insère ma bannière
(puis d'autres ensuite...)  
 
Voici le code que ca donne :
 
Dans l'HTML :

Et dans le CSS (pour espace_banniere) :

 
Et le problème que j'ai : sous Firefox, ma bannière respecte bien le "margin-left" par rapport à #entete, mais pas le "margin-top", car là c'est tout le container (#container) qui se décale par rapport au haut.  
 
Pour résumer : ma bannière est bien placée horizontalement, mais verticalement elle reste "collée" en haut du container (et c'est lui qui se voit descendre de 40 pixels vers le bas par rapport à mon haut de page)
 
?

Voici le probleme en images... Je coince toujours dessus...
 

Ok j'y suis :  
 
top: 40px;  
left: 285px;
 
au lieu de :
 
margin-top: 40px;
margin-left: 285px;
 
(Car positionnement relatif)
 
 

tu viens d'être témoin du traping margin, la margin-top a été reportée sur son parent.
 
une solution simple, il suffisait de mettre un padding-top:1px sur le #entete

C'est encore plus simple : me suis trompé en positionnement relatif il faut utiliser les propriétés "top", "right", etc... (l'habitude des margin et padding...)
 
Pas du tout compris le padding-top:1px ... Je veux au contraire un décalage de 40 pixels (comme sur l'exemple 1, à gauche)

ton parent tu lui mets un padding-top de 1px
ensuite ton margin-top de 40px fonctionnera parfaitement.
 
je t'ai expliqué que ta marge avec été reportée sur le parent d'ou le décalage.

Ok j'y suis
 
 
( Mais c'est tordu ce truc   )