Navigation d'images utilisant le texte-indent

Question

J'essaye de créer une navigation simple d'image pour mon emplacement, en utilisant le CSS pour déclarer la propriété background-image d'un article de liste (li). Le problème est, quand j'utilise text-indent pour mettre l'image hors écran, le lien n'est plus là (hors écran aussi bien je présume). Toute aide serait grandement appréciée. Voici mon XHTML:

<div id="nav"> 
    <ul> 
    <li class="current about"> 
     <a href="#about" title="about">about</a> 
    </li> 
    <li class="contact"> 
     <a href="#contact" title="contact">contact</a> 
    </li> 
    <li class="networks"> 
     <a href="#networks" title="networks">networks</a> 
    </li> 
    </ul> 
</div> 

Voici mon CSS:

#nav li { 
    display: block; 
    float:left; 
    background-image: url("images/nav-normal.png"); 
    height:47px; 
    text-indent: -9999px; 
} 

J'ai également mis en place des postes de fond pour l'individu liste-articles parce que je utilise image sprites. Merci d'avance!

Answer 1

Appliquez ce style au #nav li a. Sinon, tout ce qui est à l'intérieur du li, y compris le lien, est décalé hors de l'écran.