需要帮助创建一个垂直图像精灵菜单

，这里是我的html：

<div id="menu"> 

    <ul id="menulijst"> 
    <li id="index"> <a href="index.html"> home </a> </li> 
    <li id="auteur"> <a href="auteur.html" > de auteur </a> </li> 
    <li id="recensies"> <a href="recensies.html"> recensies </a> </li> 
    <li id="siberie"> <a href="siberie.html"> siberie </a> </li> 
    </ul> 


</div>

这是我在Photoshop中创建菜单的图片，它的外观在我的网站：http://i1112.photobucket.com/albums/k487/Daan_Brittan/ScreenShot2011-10-22at145759.png

我是新来制作网页，所以我发现了这个网站来解释我如何使精灵工作，但无论如何，无论我尝试它不。（我发现更多的网站，但我不能张贴在这里，因为我没有足够的积分） 1. http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites

我的CSS：

@charset "UTF-8"; 
/* CSS Document */ 


* 
{ 
margin: 0; 
padding: 0; 
} 

body 
{ 
color: rgb(0,0,0); 
background-color: #ffffff; 
line-height: 1.6; 
font-size: 14px; 
font-family: Arial, Helvetica, sans-serif; 
} 

div#wrapper 
{ 
width: 790px; 
background-color: #cccccc; 
margin: auto; 
} 

div#header 
{ 
padding: 10px 20px; 
background-color: #333333; 
text-align: center; 
color: #ffffff; 
} 

div#menu 
{ 
width: 160px; 
float: left; 
height: 335px; 
border: 1px rgb(153,153,153); 
} 

#menulijst 
{ 
float: left; 
width: 160px; 
height: 335px; 
background-image:url(../isweb/menuknoppen.png); 
position: relative; 
} 

#menulijst li 
{ 
margin: 0; 
padding: 0; 
list-style: none; 
position: absolute; 
top: 0; 
} 

#menulijst li, #menulijst a 
{ 
height: 200px; 
display: block; 
} 

#index {left: 0; width: -95px;} 
#auteur {left: 0; width: -75px;} 
#recensies {left: 0; width: -110px;} 
#siberie {left: 0; width: -117px;} 


div#menu ul li 
{ 
margin: 10px; 
} 

div#content 
{ 
width: 590px; 
padding: 10px 20px; 
background-color: #999999; 
float: right; 
} 

div#footer 
{ 
clear: both; 
padding: 10px 20px; 
background-color: #333333; 
text-align: center; 
color: #ffffff; 
} 

div#footer ul li 
{ 
display: inline; 
margin: 10px; 
} 

h1 
{ 
font-size: 16px; 
text-transform: uppercase; 
} 

a 
{ 
color: rgb(204,204,204); 
text-transform: uppercase; 
text-decoration: none; 
} 

p 
{ 
margin: 10px 0px 0px 0px; 
} 

.zijwolf 
{ 
float: left; 
padding: 15px 15px 5px 0px; 
} 

li 
{ 
list-style: none; 
}

我做了基于一个在菜单第一个链接，但与我自己的扭曲（垂直，不同的颜色等）我把较深的颜色背后的第一个链接解释悬停效果较浅的颜色，但我似乎无法将链接放在正确的盒子后面。如果有人可以向我解释我做错了什么，我会非常感激。我希望你们能帮忙。

问候

来源

2011-10-22 Daan Brittan

它看起来像你还没有宣布悬停属性和背景位置。

尝试添加和调整。

ul#menulist li a.index { 
    width: //add width px; 
    background-position: 0 0; 
} 

ul#menulist li a.index:hover { 
    background-position: -50px 0; //move the pixel position according to your sprite. 
}

来源

2011-10-22 14:20:02 HGomez90

需要帮助创建一个垂直图像精灵菜单

回答

相关问题