[Résolu] Positionnement d'une image/banniere dans le CSS

Positionnement d'une image/banniere dans le CSS [Résolu] - HTML/CSS - Programmation

Marsh Posté le 03-06-2010 à 11:38:08    

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 :

Code :
  1. <div id="container">
  2. <div id="entete">
  3. <div id="espace_banniere">
  4. </div><!-- fin de #espace_banniere -->
  5. </div><!-- fin de #entete -->
  6. ...
  7. </div><!-- fin de #container -->


Et dans le CSS (pour espace_banniere) :

Code :
  1. #espace_banniere {
  2. position:relative;  <--pour positionner par rapport à  #entete
  3. background-image:url(../images/espace_banniere.gif);
  4. background-repeat:no-repeat;
  5. height:165px;
  6. margin-top: 40px;  <--pour decaler de 40px vers le bas par rapport au coin haut-gauche de #entete
  7. margin-left: 285px;  <--pour decaler de 285px vers la droite par rapport au coin haut-gauche de #entete
  8. padding:0px;
  9. }


 
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)
 
?


Message édité par toum_toum le 03-06-2010 à 17:04:29

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 03-06-2010 à 11:38:08   

Reply

Marsh Posté le 03-06-2010 à 14:38:07    


Voici le probleme en images... Je coince toujours dessus...
 
http://nsa14.casimages.com/img/2010/06/03/100603024234704020.gif


Message édité par toum_toum le 03-06-2010 à 14:42:00

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 03-06-2010 à 17:04:13    


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


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 03-06-2010 à 17:10:29    

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


---------------
Blablaté par Harko
Reply

Marsh Posté le 03-06-2010 à 18:38:06    

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)


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 03-06-2010 à 19:25:55    

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.


---------------
Blablaté par Harko
Reply

Marsh Posté le 03-06-2010 à 19:37:43    

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


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed