CSS: horizontal menu using list with background images?

Question

I’m trying to create a simple menu where I’ve got four menu items each have an image and then there is a special image for each item that is active.

I’m using Drupal so the HTML output can’t be changed (not easy anyway) so my question is if and how it can be done by using the HTML code provided below:

<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 have created some that come close to my final wished result but I’m still having trouble with example to indent the text so it is not showed. Here is my CSS so far:

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;
}

This is my code so far and it shows my images correctly with the right spacing between them but the text within the a-href I just can’t get hidden. I’m fairly certain that it is just a question of hitting the right style-class / id but I’ve tried a lot of different combination and I just can’t get it to work.

Any help would be very much appreciated. Thank you

Sincere
- Mestika

Answer 1

If you want to hide your text within your anchor tag simply add {text-indent:-9999px} this will move your text to -9999px but will hide your text. This method is called IR - Image Replacement

Edit: Here is a Reference provided by @Faust

Answer 2

It sounds like your main concern is to replace the text in the link (no?).

If you have the access to alter the link text, and you're allowed to include markup with those values that does not get HTML-character encoded,

Then by surrounding each link text with spans ( e.g: Question --> <span>Question</span>), so that each line looks like:

<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>

...then you can hide the text with this CSS:

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

Otherwise, I think your only other recourse is to make the text extremely small and close to the color of the images:

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