CSS: menu horizontal utilisant la liste avec des images de fond?

Question

J'essaie de créer un menu simple où j'ai quatre éléments de menu ont chacun une image et puis il y a une image spéciale pour chaque élément qui est actif.

J'utilise Drupal donc la sortie HTML ne peut pas être changé (pas facile quand même) si ma question est de savoir si et comment il peut être fait en utilisant le code HTML fourni ci-dessous:

<div id="quicktabs-2" class="quicktabs_wrapper quicktabs-style-nostyle quicktabs-processed"> 
<ul class="quicktabs_tabs quicktabs-style-nostyle"> 
<li class="qtab-0 active first"><a href="/bagsmaekken?quicktabs_2=0#quicktabs-2" id="quicktabs-tab-2-0" class="qt_tab active">Question</a></li> 
<li class="qtab-1"><a href="/bagsmaekken?quicktabs_2=1#quicktabs-2" id="quicktabs-tab-2-1" class="qt_tab active">Lead</a></li> 
<li class="qtab-2"><a href="/bagsmaekken?quicktabs_2=2#quicktabs-2" id="quicktabs-tab-2-2" class="qt_tab active">Board</a></li> 
<li class="qtab-3 last"><a href="/bagsmaekken?quicktabs_2=3#quicktabs-2" id="quicktabs-tab-2-3" class="qt_tab active">Ready</a></li> 
</ul> 
</div> 

I J'en ai créé quelques-unes qui se rapprochent de mon résultat final souhaité mais j'ai toujours des problèmes avec l'exemple pour indenter le texte afin qu'il ne soit pas montré. Voici mon CSS jusqu'à présent:

ul.quicktabs_tabs li {display:inline; } 

#quicktabs-2 li.active a { 
    background-image:url(question-active.png); 
background-position:5px 0px; 
    background-repeat:no-repeat no-repeat; 
    padding-bottom:18px; 
    padding-left:135px; 
    padding-right:5px; 
} 

#quicktabs-2 li.qtab-1 a { 
    background-image:url(lead-grey.png); 
background-position:5px 0px; 
    background-repeat:no-repeat no-repeat; 
    padding-bottom:18px; 
    padding-left:29px; 
    padding-right:50px; 
} 
#quicktabs-2 li.qtab-2 a { 
    background-image:url(board.png); 
    background-position:5px 0px; 
    background-repeat:no-repeat no-repeat; 
    padding-bottom:18px; 
    padding-left:29px; 
    padding-right:50px; 
} 
#quicktabs-2 li.qtab-3 a { 
    background-image:url(ready-grey.png); 
    background-position:5px 0px; 
    background-repeat:no-repeat no-repeat; 
    padding-bottom:18px; 
    padding-left:29px; 
    padding-right:50px; 
} 

Ceci est mon code à ce jour et il montre mes images correctement avec l'espacement droit entre eux, mais le texte dans l'un href je ne peux pas obtenir caché. Je suis assez certain que c'est juste une question de frapper la bonne classe de style/ID, mais j'ai essayé beaucoup de combinaison différente et je ne peux tout simplement pas le faire fonctionner.

Toute aide serait grandement appréciée. Merci

Sincère
- Mestika

Answer 1

Si vous voulez masquer votre texte dans votre balise d'ancrage ajoutez simplement {text-indent:-9999px} cela déplacera votre text to -9999px mais cachera votre texte. Cette méthode est appelée IR - image de remplacement

Edit: Voici un Reference fourni par @Faust

Answer 2

Il semble que votre principale préoccupation est de remplacer le texte dans le lien (non?).

Si vous avez l'accès à modifier le texte du lien, et vous êtes autorisé à inclure un balisage avec ces valeurs qui ne soit pas codée HTML caractères,

Puis en entourant chaque texte de lien avec des portées (par exemple: Question -><span>Question</span>), de sorte que chaque ligne ressemble à:

<li class="qtab-0 active first"><a href="/bagsmaekken?quicktabs_2=0#quicktabs-2" id="quicktabs-tab-2-0" class="qt_tab active"><span>Question<span></a></li> 

... alors vous pouvez masquer le texte avec ce CSS:

#quicktabs-2 a span {display:none;} 

Sinon, je pense que votre seul autre recours est de rendre le texte extrêmement faible et proche de la couleur des images:

#quicktabs-2 a {font-size:1px;text-decoration:none;color:grey}