CSS :menu horizontal utilisant une liste avec des images d'arrière-plan ?

Question

J'essaie de créer un menu simple dans lequel quatre éléments de menu ont chacun une image, puis il y a une image spéciale pour chaque élément actif.

J'utilise Drupal, donc la sortie HTML ne peut pas être modifiée (pas facile de toute façon), donc ma question est de savoir si et comment cela 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>

J'en ai créé qui se rapprochent du résultat final souhaité, mais j'ai toujours du mal avec l'exemple pour mettre le texte en retrait afin qu'il ne soit pas affiché.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;
}

C'est mon code jusqu'à présent et il affiche correctement mes images avec le bon espacement entre elles, mais le texte dans le a-href que je ne peux tout simplement pas cacher.Je suis assez certain qu'il s'agit simplement de trouver la bonne classe de style/identifiant, mais j'ai essayé beaucoup de combinaisons différentes et je n'arrive tout simplement pas à le faire fonctionner.

Toute aide sera la bienvenue.Merci

Sincère
-Mestika

Answer 1

Si vous souhaitez masquer votre texte dans votre balise d'ancrage, ajoutez simplement {text-indent:-9999px} cela déplacera votre texte vers -9999px mais masquera votre texte.Cette méthode est appelée IR - Remplacement d'image

Modifier: Voici une Référence fourni par @Faust

Answer 2

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

Si vous avez le droit de modifier le texte du lien et que vous êtes autorisé à inclure un balisage avec ces valeurs qui ne sont pas codées en caractères HTML,

Ensuite, en entourant chaque texte de lien avec des étendues (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 petit et proche de la couleur des images :

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