Bonjour les gens ! 
Je viens de tomber sur un os, et à vrai dire j'ai un peu de mal à comprendre. Je m'explique :
pour un menu horizontal (type onglets), j'utilise une image unique positionnée différemment selon l'état de l'onglet (hover, active, focus, etc...). Jusqu'alors, j'avais quatre états possibles dont deux identiques (pseudo-class "active" et class "current"). J'utilisais donc un positionnement type "top, center, bottom".
Seulement voilà, je viens de me rendre compte que dans la foulée j'aurai, à terme, besoin d'un cinquième état. J'ai donc souhaité positionner mon image en pixels, mais bizarrement, ça foire. O_o
Voici mon code CSS :
L'image est donc répétée horizontalement (elle mesure 1px de large), et le déplacement se fait verticalement, tous les 35px (la hauteur d'un onglet).
Sincèrement, j'ai du mal à voir où se situe l'erreur.
Quelqu'un aurait une idée ?
/edit/
Bon, j'ai trouvé. -.-"
Visiblement j'avais inversé le positionnement des coordonnées (d'abord y puis x), ensuite il me fallait utiliser des coordonnées négatives, et enfin, utiliser un positionnement de type scroll (sur ce coup j'ai du mal à comprendre).
J'obtiens donc :
Et cette fois ça marche !
Désolé pour le dérangement.
Modifié par SolykZ (21 Aug 2009 - 16:17)
Je viens de tomber sur un os, et à vrai dire j'ai un peu de mal à comprendre. Je m'explique :
pour un menu horizontal (type onglets), j'utilise une image unique positionnée différemment selon l'état de l'onglet (hover, active, focus, etc...). Jusqu'alors, j'avais quatre états possibles dont deux identiques (pseudo-class "active" et class "current"). J'utilisais donc un positionnement type "top, center, bottom".
Seulement voilà, je viens de me rendre compte que dans la foulée j'aurai, à terme, besoin d'un cinquième état. J'ai donc souhaité positionner mon image en pixels, mais bizarrement, ça foire. O_o
Voici mon code CSS :
div#header ul#main_menu li { background: url("images/main_menu_background.png") 0 0 repeat-x; }
div#header ul#main_menu li:hover, div#header ul#main_menu li:focus { background: url("images/main_menu_background.png") 35px 0 repeat-x; }
div#header ul#main_menu li:active { background: url("images/main_menu_background.png") 70px 0 repeat-x; }
div#header ul#main_menu li.current { background: url("images/main_menu_background.png") 70px 0 repeat-x; }
div#header ul#main_menu li.spotified { background: url("images/main_menu_background.png") 105px 0 repeat-x; }L'image est donc répétée horizontalement (elle mesure 1px de large), et le déplacement se fait verticalement, tous les 35px (la hauteur d'un onglet).
Sincèrement, j'ai du mal à voir où se situe l'erreur.
Quelqu'un aurait une idée ? /edit/
Bon, j'ai trouvé. -.-"
Visiblement j'avais inversé le positionnement des coordonnées (d'abord y puis x), ensuite il me fallait utiliser des coordonnées négatives, et enfin, utiliser un positionnement de type scroll (sur ce coup j'ai du mal à comprendre).
J'obtiens donc :
div#header ul#main_menu li { background: url("images/main_menu_background.png") 0 0 repeat-x scroll; }
div#header ul#main_menu li:hover, div#header ul#main_menu li:focus { background: url("images/main_menu_background.png") 0 -35px repeat-x scroll; }
div#header ul#main_menu li:active { background: url("images/main_menu_background.png") 0 -70px repeat-x scroll; }
div#header ul#main_menu li.current { background: url("images/main_menu_background.png") 0 -70px repeat-x scroll; }
div#header ul#main_menu li.spotified { background: url("images/main_menu_background.png") 0 -105px repeat-x scroll; }Et cette fois ça marche !
Désolé pour le dérangement.
Modifié par SolykZ (21 Aug 2009 - 16:17)