Pb décalage 1px + div "height:100%" ?

Bonjour,

j'ai besoin de votre aide car je me prend la tête depuis une semaine sur un problème de décalage de mon background de 1px à gauche du header lorsqu'on redimensionne la fenêtre du navigateur : http://docteurpixel.free.fr/web/index.php

avec le décalage :


sans décalage :


au début je pensais que mon bg avait une largeur "impair" mais ce n'est pas çà.
si vous avez une solution je suis preneur.

Merci de votre aide.


Modifié par funkybobot (27 May 2009 - 11:38)

Hmmm je ne vois pas du tout quel est le problème De quel décalage parles-tu ?

édition du message avec aperçus du problème.

Free a un problème :

a écrit :
ERREUR 404 - Document non trouvé

Bonjour,

Tu as une image de fond, de largeur X pixels, centrée horizontalement et répétée en hauteur, et qui dessine au centre un espace vide de Y pixels.
Tu as ensuite un conteneur de largeur Y pixels très exactement, lui aussi centré horizontalement.

Maintenant, petite question naïve: qu'est-ce qui t'assure que les navigateurs placeront le conteneur centré pile au bon endroit par rapport à l'image de fond? Le centrage est forcément un calcul qui implique des arrondis. Si je dois centrer un élément de largeur 5px dans un conteneur de largeur 10px, je peux laisser 2px à gauche et 3px à droite, ou bien l'inverse (3px à gauche et 2px à droite). Voilà le genre de choix que les navigateurs doivent faire (via des algorithmes) pour centrer images de fond et contenus.

Dès que tu as deux éléments de largeurs différentes ayant des référents (conteneur, élément auquel l'image de fond est appliquée...) différents, tu cours le risque que les deux centrages ne soient pas raccord.

Solution: ton image de fond devrait avoir en son centre un espace blanc non pas de Y pixels, mais de Y-2 pixels. Autrement dit, il faut prévoir un peu de marge (pas de margin, entendons-nous bien).

Remarque pour finir: une image de 1px de haut et 1060px de large, c'est dommage. Avec une image de 10px de haut, ça ne coute pas plus cher en poids de l'image (notamment en PNG-8), ça fait une image plus facilement reconnaissable lorsque tu l'ouvres avec un éditeur graphique ou en aperçu, et ça évite certains problèmes de performances avec les petites configurations et/ou certains navigateurs/systèmes d'exploitation, car mieux vaut demander à un navigateur de répéter une image 1000 fois (pour une page longue) que 10000 fois.

lien modifié.

Merci Florent, j'avais pensé à cette solution de réduire mon bg de quelques pixels.
mon soucis est que du coup j'ai un décalage entre mon bg et mon fond de div :
http://docteurpixel.free.fr/web/index2.php

comment faire pour que ma div aille jusqu'en bas de ma page quelque soit la taille de la fenêtre ?

j'ai réussi à faire ma div en "height:100%" mais avec la position "absolute" mon site ne prend plus en compte le centrage dans la fenêtre.

#contener {position: absolute; background:#fff; margin:0 auto; width:780px; height:100%}

j'ai réussi quelque chose :

#contener {background:#fff; margin:0 auto; width:780px; min-height: 100%;}
avec html et body à "height:100%"

çà fonctionne sous Mac (Firefox, Safari, Camino)
si quelqu'un pouvait vérifier sous PC, çà m'aiderait bien !