Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3316 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1998715
toum_toum
Vivons masqués
Posté le 03-06-2010 à 11:38:08  profilanswer
 

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
mood
Publicité
Posté le 03-06-2010 à 11:38:08  profilanswer
 

n°1998787
toum_toum
Vivons masqués
Posté le 03-06-2010 à 14:38:07  profilanswer
 


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
n°1998884
toum_toum
Vivons masqués
Posté le 03-06-2010 à 17:04:13  profilanswer
 


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

n°1998888
gatsu35
Blablaté par Harko
Posté le 03-06-2010 à 17:10:29  profilanswer
 

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
n°1998912
toum_toum
Vivons masqués
Posté le 03-06-2010 à 18:38:06  profilanswer
 

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)

n°1998922
gatsu35
Blablaté par Harko
Posté le 03-06-2010 à 19:25:55  profilanswer
 

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
n°1998927
toum_toum
Vivons masqués
Posté le 03-06-2010 à 19:37:43  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Afficher commentaire dans une gallerie d'image[résolu]Accorder les hauteurs de deux <div>
Image dans un champ BLOB sous MySQL ???[RESOLU] Ouvrir une vue
[VB - Excel] Insertion ligne qui n'incrémente pas formules [résolu][resolu] compilation release Visual Studio 2008
Problème affichage image dans un JButton se grise sur une action.[Résolu] Pb de résolution de type dans un template
[Résolu] Arrière-plan+Boites -> effet différent suivant navigateur[RESOLU] question con mais utile image en html
Plus de sujets relatifs à : [Résolu] Positionnement d'une image/banniere dans le CSS


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR