Discussion :

[sylvaine]

Bonjour,
débutante en css, j'ai du mal à centrer ma bannière par rapport à ce que j'appelle mon header. En fait les deux doivent etre centrés horizontalement, et la banniere dépasse sur le header vers le haut.
Jusque là je réussis soit à centrer les deux l'un à la suite de l'autre, soit à les faire chevaucher mais la banniere n'est plus au milieu.
Est ce que vous pourriez me donner un petit coup de pouce? J'ai écrit le code suivant pour le CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
#header {
background: url(img/header.png) no-repeat center;
height: 178px;
width: 100%;
margin:auto;
top:0px;
z-index:2;
}
 
#banner{
background: url(img/banner.png) no-repeat center;
height: 253px;
width: 950px;
top:90px;
padding-top: 0px;
z-index:1;
position: absolute;
margin:auto;
}

Et dans le fichier html j'ai ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div class id="header">
</div>
 
<div class id="banner">
</div>

Merci d'avance si vous voyez d'où vient le probleme. J'ai regardé les pages suivantes:

http://www.developpez.net/forums/d24...rposer-images/
http://www.developpez.net/forums/d23...tion-2-images/


Si je mets position absolute pour les 2 images alors elles se retrouvent toutes les deux à gauche au lieu du centre et le margin auto n'y fait rien, à moins que je me plante dans la syntaxe (tres possible!) et de plus, les images suivantes (fond de page, footer...) ne s'alignent plus du tout avec les précédentes. Cela devrait pourtant etre tres simple d'aligner des div à la suite les unes des autres en les centrant, un truc m'échappe!!

Ce qui me donne ceci, en gros (image)



Merci d'avance,
Sylvaine

[sylvaine]

J'ai trouvé une solution, qui n'est peut-être pas la meilleure mais qui fonctionne pour le moment.
J'ai élargi mon image bannière à la même taille que l'image header avec des pixels transparents, ce qui fait que maintenant elle est centrée en apparence, comme le reste. J'espère ne pas découvrir trop tard les types de problèmes que cela pourrait poser.