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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Résolu] Positionnement d'une image/banniere dans le CSS

toum_toum

Vivons masqués

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 :

<div id="container">
<div id="entete">
<div id="espace_banniere">
</div>
</div>
...
</div>

Et dans le CSS (pour espace_banniere) :

Code :

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

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

---------------
"2025 : Stupid is now Norm"

Publicité

toum_toum

Vivons masqués

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

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

---------------
"2025 : Stupid is now Norm"

toum_toum

Vivons masqués

Ok j'y suis :

top: 40px;
left: 285px;

au lieu de :

margin-top: 40px;
margin-left: 285px;

(Car positionnement relatif)

---------------
"2025 : Stupid is now Norm"

gatsu35

Blablaté par Harko

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

toum_toum

Vivons masqués

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)

---------------
"2025 : Stupid is now Norm"

gatsu35

Blablaté par Harko

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

toum_toum

Vivons masqués

Ok j'y suis

( Mais c'est tordu ce truc )

---------------
"2025 : Stupid is now Norm"

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

Page générée en 0.045 secondes