CSS：使用列表与背景图像的水平菜单？

我想创建一个简单的菜单，我有四个菜单项，每个菜单项都有一个图像，然后每个项目都有一个特殊的图像。CSS：使用列表与背景图像的水平菜单？

我使用Drupal的，因此HTML输出不能被改变（反正不容易），所以我的问题是是否以及如何可以通过下面提供的HTML代码来完成：

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

我已经创建了一些接近我最终希望的结果，但我仍然遇到示例缩进文本的问题，因此未显示。这是迄今为止我的CSS：

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

这是到目前为止我的代码，它正确地显示我的图片和他们之间的权利间距但A HREF内的文字我只是无法隐藏。我相当肯定，这只是一个打击正确的风格类/ ID的问题，但我已经尝试了很多不同的组合，我只是无法让它工作。

任何帮助将非常感激。谢谢

真诚
- Mestika

来源

2011-05-15 Mestika

提供了一种由，你的意思是标签内的文字，或做你的意思是href属性的值？ – tdammers 2011-05-15 10:29:48

如果你想隐藏你的锚标记中的文本只需添加{text-indent:-9999px}这将移动您的文字到-9999px但会隐藏您的文字。这种方法被称为IR - 图片更换

编辑：这里是“A-HREF内的文本”由@Faust

来源

2011-05-15 14:11:32 breezy

不错 - 我会把它添加到我的箭袋中。 – Faust 2011-05-15 16:47:25

这让我看起来“红外图像替换”，并发现与各种红外技术的良好链接，你可能想要在你的回答中包括这个：http://mezzoblue.com/tests/revised-image-replacement/ – Faust 2011-05-15 16:52:58

@Faust完成！包括在我的答案中，以帮助Mestika了解这种方法的使用。 – breezy 2011-05-15 17:04:27

这听起来像是你主要关注的是，以取代在链接文字（不？）。

如果你有访问更改链接文本，和你被允许通过周围，跨度各个环节文本（例如包括与没有得到HTML字符编码这些值标记，

然后： Question - ><span>Question</span>），使每一行的样子：

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

...那么你可以隐藏这个CSS文字：

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

否则，我认为你唯一的其他办法就是使文本极小，靠近图像的颜色：

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

来源

2011-05-15 10:54:32 Faust

CSS：使用列表与背景图像的水平菜单？

回答

相关问题