Css : deux images supperposées et centrées, ca marche pas totalement..

Bonjour à tous!

Je me résoud enfin à poster sur ce forum (sur lequel j'ai déjà pu puiser pas mal d'infos ).
Je suis victime d'un bête problème : je n'arrive pas correctement à centrer une image superposée à une autre.
je m'explique : de manière pratique, ma page est constituée d'un #content, qui à une image de fond centrée (repeat-y center;)
puis dans mon <div id="content"> il y à un autre <div id="headerImg">

le headerImg est lui aussi affiché en centré.

Le problème : sous Firefox, le centrage ne se fait pas complètement quand on élargit la fenetre, et ce une fois sur deux. en images ca donne ca :


Ca fonctionne parfaitement dans webkit/safari, mais pas dans firefox. (j'ai pas pu tester avec ie encore)

vous pouvez tester ici : http://dexter.dexpark.com/wordpress

extraits css :

/* content contient l'image blanche de fond, elle incluera #headerImg */
#content {
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
background: url(images/page_bg.png) repeat-y center;
}

#headerImg {
height: 149px;
background: url(./images/banner.jpg) center;
margin: 0 auto;

}

j'espère que je fournis assez d'informations, merci beaucoup pour votre aide !
Modifié par Dextair_ (18 Apr 2009 - 18:56)

Bonjour,

Ce genre de problème est plus ou moins inévitable, et je m'étonne un peu qu'il ne soit présent que sur un navigateur. Je l'aurais attendu dans tous les navigateurs, dans certains cas précis et suivant les arrondis fais par le navigateur.

Globalement, il y a toujours des cas où le navigateur, en centrant un élément (bloc avec marges automatiques, fond centré horizontalement), doit choisir de placer N pixels d'un côté et N+1 pixels de l'autre. Par exemple pour centrer un bloc de largeur 760px dans un conteneur de largeur 1263px.

Suivant les algorithmes utilisés, et suivant la largeur des éléments et de leurs conteneurs (ou de la fenêtre), tu peux avoir un élément centré avec X pixels à gauche et X+1 pixels à droite, et un autre élément centré avec Y+1 pixels à gauche et Y pixels à droite. Si les deux éléments ont la même largeur, tu as un décalage.

Les solutions:

- Ne centrer qu'un seul élément (résoud le problème).
- Centrer deux éléments de même largeur (devrait résoudre le problème).
- Si on centre deux éléments de largeur distinctes, utiliser de préférence deux largeurs paires (réduit le risque, mais ne résoud pas le problème).
- Attendre que les navigateurs trouvent une solution à leur niveau (certains l'ont peut-être déjà fait ou utilisent déjà un mode de calcul qui ne pose pas ce problème).

Bonjour,

On ne peut pas vraiment tester ta page en ligne car ta feuille de style pointe sur ton serveur local .

Par ailleurs cette image porteuse de sens devrait être dans le code html et non dans des div vides.