CSS：使这些导航“图片报” /标志链接到普通HTML链接

请参阅http://jeaffreygilbert.com/workatplayheader.html CSS：使这些导航“图片报” /标志链接到普通HTML链接

和接受问题的答案CSS: How to make this topheader?

正如你可以看到所有链接（服务，工具箱，所以包括工作[在]玩徽标+联系我们）是这样的：

http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/sprite-nav.png

我希望有正常的HTML链接..所以我有正常的服务。它和sprite-nav.png有什么关系。

2010-09-25 Johnson

请上传你想要达到什么样的更详尽的描述，和/或交显示内容布局的图形。 – AxelEckenberger 2010-09-25 10:38:21

你会看到“服务”，“工具箱”，“工作”，“关于”，“洞察”和“workatplay”徽标，他们都在http://www.workatplay.com/sites/all/themes/play/css/ schemes/pink/sprite-nav.png现在。我不想那样。我想要正常的链接，没有任何图像，所以答案是有链接（相同的位置），包括文字“LOGO HERE”，取代工作[at] play logo .. – Johnson 2010-09-25 10:47:26

那些已经是HMTL链接，只是用列表包装。你所需要做的只是修改CSS。

我这样做是你，你可以用这个替换老式：

CSS：

/* Resetter */ 
ol, ul, li, a { 
    background: transparent; 
    border: 0px; 
    font-size: 100%; 
    margin: 0px; 
    outline: 0px; 
    padding: 0px; 
    vertical-align: baseline; 
} 
ul, li { 
    list-style-type: none; 
} 

/* Body */ 
body { 
    background-image: url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/bg-home.png); 
    font:13px Verdana; 
} 

/* Header */ 
.header { 
    margin: 0px auto; 
    position: relative; 
    width: 1000px; 
} 
.header ul li { 
    float: left; 
} 
.header ul li a { 
    background-position: 0% 0%; 
    background-repeat: no-repeat; 
    cursor: pointer; 
    display: block; 
    color:white; 
    text-decoration:none; 
    padding:10px; 
} 
.header ul li:hover { 
    background:red; 
} 

/* Nav */ 
ul#nav { 
    height: 80px; 
    margin-top: 80px; 
    -webkit-padding-start: 10px; 
    display: block; 
} 
ul#nav li.home { 
    float: right; 
} 

/* Sub Nav */ 
ul#nav-sub { 
    background: transparent url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/sprite-nav.png) no-repeat scroll 0px -160px; 
} 
ul#nav-sub { 
    background-position: 0px -160px; 
    background-repeat: no-repeat; 
    height: 40px; 
} 
ul#nav-sub li { 
    margin-top:10px; 
} 
ul#nav-sub li.contact { 
    float: right; 
}

来源

2010-09-25 10:57:31

如果你不想使用CSS精灵，而是使用导航栏作为一个整体的形象，然后ü可以使用map标签来创建一个地图上链接到不同网页的形象。这里来一个例子：


<map id="headermap" name="headermap"> 
    <area shape="rect" coords="43, 57, 119, 97" href="services.html" alt="Go to services" /> 
    and so on... 
</map> 
<img src="07jVk.png" alt="" usemap="#headermap" />

嗯，我不知道我是否完全理解你的问题，但我希望这是你在找什么。

有关map的详细信息，请参阅W3Schools网站。

来源

2010-09-25 10:49:03 Ventus

CSS：使这些导航“图片报” /标志链接到普通HTML链接

回答

相关问题