Yop,

Petit souci depuis que je suis passé à Firefox 3, sur ce site : http://www.regie-location.ch/ la bannière est légérement décalé alors que ce n'était pas le cas avant sur Firefox 2.

Est-ce que quelqu'un a une explication?

Merci d'avance.
Bonjour,

Le centrage vertical de ton contenu et de ton image de fond sont deux mécanismes différents, et pas directement liés. Il y a forcément des arrondis (lorsque tu dois centrer un bloc ayant pour largeur en pixels un nombre pair, dans un conteneur ayant pour largeur en pixel un nombre impair), et des décalages d'1px peuvent apparaitre. Il faut le prévoir en amont et faire une image de fond qui soit raccord même si un tel décalage se produit.
Ok ok, mais alors pourquoi sur FF 2 ça jouait et sur FF 3 plus?

Merci pour la réponse en tout cas...

Edit : Et après contrôle, mon image de fond fait 1800px de large (510px partie gauche, 780px partie millieu et 510px partie droite) tandis que ma bannière fait 780px... Donc que des chiffres pairs, j'ai pas dû bien te comprendre apparement...
Modifié par le rouge (29 Jul 2008 - 21:56)
le rouge a écrit :
Ok ok, mais alors pourquoi sur FF 2 ça jouait et sur FF 3 plus?

Parce qu'ils ont changé certaines fonctions de leur moteur de rendu, sans doute.
le rouge a écrit :
Edit : Et après contrôle, mon image de fond fait 1800px de large (510px partie gauche, 780px partie millieu et 510px partie droite) tandis que ma bannière fait 780px... Donc que des chiffres pairs, j'ai pas dû bien te comprendre apparement...

Tu ne m'as effectivement pas bien compris.

Si tu as une image de 10px de large à centrer dans un conteneur de 29px de large, tu vas devoir choisir de laisser 9px à gauche et 10px à droite, ou bien 10px à gauche et 9px à droite. Les deux solutions sont correctes.
Maintenant, fais la même chose à plus grande échelle, et tu comprends que ton bloc central ou ton image de fond peuvent se retrouver décalés d'un pixel (enfin, j'espère que tu comprends...).

Bref, ton image de fond ne devrait pas avoir un vide de 780px au milieu, mais plutôt de 778px, ou de 770px si tu veux prévoir large. Voire pas de vide du tout... j'avoue que l'utilité de découper cette image en deux ne m'apparait pas clairement.J'aurais plutôt utilisé une image unique en fond de BODY, et placé par-dessus juste l'image du texte, avec le code suivant par exemple:
<h1 id="header">
	<img alt="Régie-Location (Sound/Light)" src="images/texte-header.png" />
</h1>
Hello,

Merci d'abord pour ta réponse...

Alors maintenant j'ai compris.

Et si j'ai fait deux images disctinctes, c'est surtout pour avoir des images plus légères...
le rouge a écrit :

Et si j'ai fait deux images disctinctes, c'est surtout pour avoir des images plus légères...


Bonjour,
ça m'étonne un peu. Combien de ko gagnes tu en divisant ton image en 2
images? Quel type d'images est-ce? Ne pas oublier que 2 images au lieu d'une
est une requête serveur supplémentaire.
Modifié par Hermann (30 Jul 2008 - 13:17)
Voilà, alors c'est en ordre, j'ai utilisé que une image de fond avec tout et une autre image par dessus pour avoir le alt. Maintenant question à Florent, pour l'image de texte, je fais quoi plutôt un gif transparent ou une image que je place par le css?

Merci de votre aide...
le rouge a écrit :
j'ai utilisé que une image de fond

Un peu lourde en PNG. À voir en JPEG.
(Et dans tous les cas, supprimer la partie texte en haut à droite.)

le rouge a écrit :
pour l'image de texte, je fais quoi plutôt un gif transparent ou une image que je place par le css?

Tu fais une image en PNG-8 ou GIF, qui contient la partie texte, et tu la places en positionnement absolu (en ayant préalablement passé le conteneur en position: relative pour qu'il serve de référent).
Ok, je vais essayer de gérer cela, je vous tiens au courrant si j'ai des soucis.

Dès que c'est bon, j'ajoute le fameux [Résolu] Smiley smile

Merci et à bientôt...