需要幫助創建一個垂直圖像精靈菜單

，這裏是我的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

需要幫助創建一個垂直圖像精靈菜單

回答

相關問題