menu css portes coulissantes + liens

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par rudddy, 19 Janvier 2010.

  1. rudddy
    rudddy WRInaute passionné
    Inscrit:
    1 Août 2007
    Messages:
    2 125
    J'aime reçus:
    0
    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)
     
  2. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 735
    J'aime reçus:
    177
    Tu dois gérer les backgrounds comme classe des liens. Après comme "image" tu peux mettre un gif transparent
     
  3. rudddy
    rudddy WRInaute passionné
    Inscrit:
    1 Août 2007
    Messages:
    2 125
    J'aime reçus:
    0
    merci mais
     
  4. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 735
    J'aime reçus:
    177
    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.
     
  5. rudddy
    rudddy WRInaute passionné
    Inscrit:
    1 Août 2007
    Messages:
    2 125
    J'aime reçus:
    0
    donc tu dis que pas d'autres choix à part le gif transparent ???
     
  6. rudddy
    rudddy WRInaute passionné
    Inscrit:
    1 Août 2007
    Messages:
    2 125
    J'aime reçus:
    0
    j'ai donc fait comme je craignais devoir faire : des gif transparents !

    merci quand même marie
     
Chargement...
Similar Threads - menu css portes Forum Date
Mieux vaut-il un select ou un menu déroulant CSS Développement d'un site Web ou d'une appli mobile 15 Mars 2017
MENU VERTICAL CSS (3 minis questions) Développement d'un site Web ou d'une appli mobile 4 Décembre 2014
MON MENU CSS ne centre pas Développement d'un site Web ou d'une appli mobile 1 Décembre 2014
[résolu] Elargir un menu en CSS à 100% du contenant Développement d'un site Web ou d'une appli mobile 6 Octobre 2014
Menus déroulants (html + css) et Référencement Débuter en référencement 11 Septembre 2013
Indexation avec fil d'ariane composé de menus déroulants css Référencement Google 27 Avril 2013
(CSS) diffréntes couleur pour liens menu Développement d'un site Web ou d'une appli mobile 18 Janvier 2012
Menu déroulant sur image css Développement d'un site Web ou d'une appli mobile 5 Janvier 2012
Probleme Menu JS + CSS Développement d'un site Web ou d'une appli mobile 24 Février 2011
menu horizontal défilant en css...un problème d'alignement Développement d'un site Web ou d'une appli mobile 1 Novembre 2010
[css] Petit souci pour le menu du jour! Développement d'un site Web ou d'une appli mobile 29 Août 2010
[CSS] Comment faire apparaître le sous-menu ? Développement d'un site Web ou d'une appli mobile 22 Juillet 2010
menu css publicite flash Développement d'un site Web ou d'une appli mobile 19 Juillet 2010
menu css vertical avec longue liste Développement d'un site Web ou d'une appli mobile 16 Juin 2010
Menu CSS qui ne fonctionne pas sous IE6 Développement d'un site Web ou d'une appli mobile 2 Avril 2010
Question relative au Menu en CSS : Développement d'un site Web ou d'une appli mobile 4 Mars 2010
CSS : menu avec ie7 Développement d'un site Web ou d'une appli mobile 22 Février 2010
Menu en CSS Développement d'un site Web ou d'une appli mobile 27 Janvier 2010
Menu en CSS Administration d'un site Web 26 Janvier 2010
Menu déroulant CSS Développement d'un site Web ou d'une appli mobile 19 Décembre 2009