menu css portes coulissantes + liens

[rudddy]

Bonjour,

je fais un menu en css avec des images avec la technique dite des "portes coulissantes" (ça fait pro je sais)

TENTATIVE 1

j'ai essayé un truc du type :

Code: Tout sélectionner

<ul>
   <li id="accueil"></li>
   <li id="sortie"></li>
   <li id="fin"></li>
</ul>

avec dans le css, des background-image sur les li avec la bonne image et un bon alignement avec li:hover en utilisant backgroundposition top ou bottom

Résultat :
graphique : 100%
problème : comment j'insère les liens ?

en mettant :

Code: Tout sélectionner

<ul>
   <li id="accueil"><a href="/"></a></li>
   <li id="sortie"></li>
   <li id="fin"></li>
</ul>

le lien ne donne rien (même en mettant un   ça ne donne rien (si ce n'est un minuscule lien)

TENTATIVE 2

j'ai essayé un truc du type :

Code: Tout sélectionner

<ul>
   <li><a href="/"><img id="accueil" alt="mot clé" /></a></li>
   <li><a href="/"><img id="sortie" alt="mot clé" /></a></li>
   <li><a href="/"><img id="fin" alt="mot clé" /></a></li>
</ul>

avec dans le css, des background-image sur les img avec la bonne image et un bon alignement avec img:hover en utilisant backgroundposition top ou bottom

Résultat :
graphique : 100%
Les liens : 100 %
problème : le contenu des balises alt et/ou title s'affichent en dur sur l'image (car il n'y a pas de src à chaque img mais un background image)

en mettant un src="" partout ça ne résoud rien aussi
en mettant un title="" partout ça ne résoud rien aussi

En gros, je l'ai mauvaise là ou là
Si vous avez une solution, dites le moi svp (je sais qu'une possibilité serait de prendre la solution 1, et de mettre des img transparentes dans les li mais ça me plait pas trop c'est pas clean !

Merci à tous

EDIT : je précise bien sûr que l'intérêt est de mettre des alt (intérêt seo) et de ne pas mettre de liens en texte en dur (intérêt graphique)

[Marie-Aude]

Tu dois gérer les backgrounds comme classe des liens. Après comme "image" tu peux mettre un gif transparent

[rudddy]

merci mais

je sais qu'une possibilité serait de prendre la solution 1, et de mettre des img transparentes dans les li mais ça me plait pas trop c'est pas clean !

[Marie-Aude]

Le problème c'est que les "portes coulissantes" ne sont pas faites pour remplacer le texte des liens, puisque c'est une technique pour le background.

[rudddy]

donc tu dis que pas d'autres choix à part le gif transparent ???

[rudddy]

j'ai donc fait comme je craignais devoir faire : des gif transparents !

merci quand même marie