Question

编辑：这是一个jsFiddle：http://jsfiddle.net/7hSny/

我正在尝试将链接与CSS背后的图像放在一起。这是我喜欢它的预览：

preview http://piclair.com/data/odjkf.jpg

Words Home，Campagne等需要在菜单栏中居中。 HTML现在可能很难看，我尝试了很多东西，但我无法正确定位。

这是我的HTML：

<div id="navigation">
<ul id="nav">
<li><div id="current_page"><p class="navlink"><a href="home.html"><img src="img/Menu_Home_Selected.png"></a></p></div></li>
</ul>

<!-- end of navigation -->
</div>

这是CSS：

#navigation{
background-image: url(img/Navbar.png);
background-repeat: no-repeat;
width:955px;
color: #FFF;
float: left;
border:1px solid blue;
}

#current_page {
margin: -22 0 0 0px; 
width:164px;
min-height: 124px;
background-image: url(img/Selected.png);
background-repeat: no-repeat;
}

#nav {
min-height: 28px;
margin: 5 0 0 -14px;
}

#nav ul, li {
list-style: none;
}

#nav li {
width:164px;
}

.navlink p (
display: block;
margin: 35 35 35 35px;
}

现在它看起来像这样： preview http://piclair.com/data/mdc5z.jpg

Answer 1

有关标记的一些内容可以进行优化（正如您所提到的，“丑陋”）。不要使用可以使用网页颜色的图像。对于图像文本，将图像表示的实际文本放入html中，并使用background-image作为css中的实际jpg。垂直居中并不像应该的那样容易（除非你使用表格单元格），但在很多情况下你可以使用顶部/底部填充或行高。

Here's a fiddle with a few things updated。希望这会有所帮助。

另外，请使用各种垂直对齐方法查看此blog post。如果我不这样做，其中一个应该适合你。

Answer 2

我希望这可以解决它..一旦我知道这是你想要的，我会更新其余的细节。

http://jsfiddle.net/7hSny/7/

我纠正了html。

    <div id="navigation">
<ul id="nav">
<li><div id="current_page"><p class="navlink"><a href="home.html"><img src="http://i45.tinypic.com/30ihnkk.png"></a></p></div></li>
</ul>

<!-- end of navigation -->
</div>

Answer 3

我建议您使用与gettyimages（and their css spritesheet）相同的技术并运行一个简单的css spritesheet。这样，您将更好地利用语义和样式。

考虑带有列表的导航：

<ul class='nav'>
  <li class='home'><a href='#'>Home</a></li>
  <li class='campagne'><a href='#'>Campagne</a></li>
  ...
</ul>

然后，您使用简单的CSS对其进行样式化：

ul.nav
{
   display: block;
   height: 50px;
   margin: 0;
   padding: 0;
   list-style: none;
}

ul.nav li
{
   float:left;
   display: block;
}

ul.nav li a
{
   display: block;
   height: 100%;
   background: url(img/nav.jpg) no-repeat 0px 0px;
   text-indent: -9999px;
}

然后使用简单的spritesheet来＆＃34;画＆＃34;你的按钮（tutorial for spritesheets）：

ul.nav li.home a
{
   width: 50px;
   background-position: 0px 0px;
}

ul.nav li.home a:hover { background-position: 0px -50px; }

ul.nav li.campagne a
{
   width: 80px;
   background-position: 50px 0px;
}

ul.nav li.campagne a:hover { background-position: 50px -50px; }

在CSS中定位链接

3 个答案: