Besoin d'aide pour rollover sur menu horizontal complexe

Bonjour,

toute débutante en CSS, j'ai eut envie d'un thème style parchemin/papier déchiré, sans penser aux difficultés que je rencontrerai pour intégrer tout ça en CSS. Résultat, je rencontre d'énormes problèmes pour mon menu horizontal (enfin plus précisément pour le rollover), je suis dans l'impasse et ne sais pas du tout comment faire...

La difficulté vient du fait que les boutons sont tous différents et qu'il se chevauchent, tout ça avec des ombres portées. J'ai d'abord essayé d'enregistrer chaque bouton en png sur fond transparent, mais je n'ai jamais réussi à les faire se chevaucher après en CSS. J'ai donc refait toutes mes découpes en faisant une seule image pour tout le menu, mais le rollover sur un bouton doit du coup changer l'image sur toute la largeur de la page et ça je n'y arrive pas non plus, ça me coupe l'image.

Pourriez-vous me dire comment vous feriez ? Quelles découpes faire ? Et comment intégrer ça en CSS ?
Voici mon menu et les rollover :



J'espère que vous pourrez m'aider. Merci d'avance.

Bonjour,

Tu pourrais éventuellement faire une recherche sur les mots "sprite css", ou "porte coulissante", tu trouveras d'ailleurs dans la section : Apprendre du site, un article sur un génateur de sprite (suivre les liens en fin d'article ), et un exemple de menu utilisant cette technique.
Le "plus célèbre" me semble être le menu du site d'Apple, regarde l'image utilisée et étudie la feuille de styles pour comprendre comment cela fonctionne.
Le principe est "assez simple", on fait défiler le background suivant la partie que l'on souhaite afficher, et "on masque" le contenu des liens du code html (text-indent négatif par exemple) pour ne pas qu'il se superpose à tes images (cela permet, entre autre, d'afficher le contenu du lien en cas de désactivation des feuilles de styles)
Cette méthode n'est pas sans poser certains problèmes, d'accessibilité notamment, et en cas de desactivation des images, ou d'images indisponibles.

Ceci étant dit, cette méthode me semble à privilégier lorsqu'il s'agit de "déco", ici, il s'agit d'une image porteuse de sens, elle devrait donc se trouver dans le code html et les effets "cosmétique" devraient se gérer via javascript ("marquer visuellement" la page en cours peut également s'avérer utile, voire indispensable dans certains cas)

Quoiquil en soit, fais des essais, et reviens nous montrer le résultat (page en ligne ou au moins le code html/css)

Bon courage et à bientôt,
Cdt,
Sylvain

Merci de ton aide Sylvain !

Je vais pouvoir orienter un peu mieux mes recherches maintenant que je connais les termes "sprite css" et "porte coulissante". Je n'avais aucune idée que ce que je cherchais portait un nom... Savoir ce qu'on cherche, c'est déjà un grand pas !

Je ne comprends pas grand chose à ton message pour l'instant, mais je vais de ce pas lire les liens que tu me donnes, en espérant que j'y verrai un peu plus clair après ça.

Dans le pire des cas, je referai mon menu horizontal pour une simple barre, qui correspondra plus à mon niveau en css

Je vous tiens au courant...

Edit : voilà le site en ligne http://www.dreamalys.com/designdreamalys/
Modifié par Vatsyayana (14 Sep 2009 - 11:30)