menu css portes coulissantes + liens

rudddy

WRInaute passionné
Bonjour,

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

TENTATIVE 1

j'ai essayé un truc du type :
Code:
<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:
<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 &nbsp; ça ne donne rien (si ce n'est un minuscule lien)

TENTATIVE 2

j'ai essayé un truc du type :
Code:
<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

WRInaute accro
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.
 

Discussions similaires

Haut