Interférences d'attributs dans Sprite

Bonjour,

Je met met en place un sprite sur mon site.
Et un problème apparait, en modifiant l'adresse de certaines images en CSS :

AVANT
.direction-nav a {width: 30px; height: 30px; display: block; background: url(images/nav.png) no-repeat 5px 6px; position: absolute; top: 50%;}

APRES (ajout en gras)
.direction-nav a {width: 30px; height: 30px; display: block; background: url(images/sprite.png) no-repeat 0 -200px; position: absolute; top: 50%;}


En ajoutant le positionnement de l'image dans l'image qui les regroupes toutes, il semble y avoir une interférence.
Le positionnement du bloc (top:50%) annule celui de l'image (0 -200px) qui reste alors en 0 0 malgré sa définition 0 -200px.
Les 2 éléments ne fonctionnent pas ensemble.

Si vous avez une piste pour que cela fonctionne, merci d'avance.
Modifié par sebb80 (05 Sep 2012 - 20:46)

Je comprends pas trop ce que tu appelles un sprite, si tu changes l'image c'est pas tout à fait ça.
Lire Sprites CSS Background position

.direction-nav a {width: 30px; height: 30px; display: block; background: url(images/sprite.png) no-repeat 5px 6px; position: absolute; top: 50%;}
.direction-nav a:hover {background-position:0 -200px;}

Ca devrait ressembler à ça ton code.

Tu modifie l'adresse comment ? en JS ? Faut peut-être voir de ce côté, parce que le coup du positionnement du bloc qui annule celui de l'image, j'ai jamais vu ça. Voir aussi du côté du navigateur, du cache des images, ou du reste du code, fait ton sprite sur une page vierge, ya pas de piège ici à priori.

En fait le problème technique ne vient pas du changement de l'image au passage de la souris.

Quand je parle de changement, avant-après, je veux dire que j'avais sur mon site plusieurs images dans mon thème et que je les regroupes en une seule image, en un sprite.


AVANT, j'avais pour une flèche:
.direction-nav a {background: url(images/nav.png) no-repeat; top: 50%;}

L'image comportant la seule image d'une flèche de navigation se positionnait à 50% du haut.

APRES avec le sprite:
.direction-nav a {background: url(images/sprite.png) no-repeat 0 -200px; top: 50%;}

L'image prise à 0 et -200px dans celle qui en regroupe plusieurs est la bonne image sans le top à 50%. Avec le top à 50% l'image prise dans le sprite n'est plus la bonne.

En fait le positionnement de mon image dans la page par le 50% interfère sur la prise de la bonne image dans le sprite, quand je l'utilise.

J'espère avoir été plus clair, en tout cas merci de ta réponse.

Je comprends mieux maintenant le avant après

Je ne vois pas de solution direct à chaud comme ça, essaie de gérer le positionnement en absolu (si c'est lui qui pose problème) depuis un élément parent au a, quitte à rajouter un p ou un div.