爲什麼圖像精靈菜單無法正確顯示，爲什麼鏈接不工作？

代碼驗證。左側菜單中應該有兩個圖像，位於可見的筒倉上方。每個應該是一個鏈接。爲什麼圖像精靈菜單無法正確顯示，爲什麼鏈接不工作？

http://www.briligg.com/agnosticism.html

CSS是：外部樣式表：

.menu { 
position: relative; 
float: left; 
margin: 10px; 
padding: 0; 
width: 150px; 
} 
.menu li { 
margin: 0; 
padding: 0; 
list-style: none; 
position: absolute; 
left: 0; 
top: 260px; 
} 
.menu li, .menu a { 
width: 150px; 
height: 150px; 
}

內部樣式表：

.menu { 
    height: 450px; 
} 
.mirror { 
    top: 0; 
} 
.mirror { 
    background: url(http://www.briligg.com/images/menu-ag.png) 0 0; 
} 
.wormcan { 
    top: 151px; 
} 
.wormcan { 
    background: url(http://www.briligg.com/images/menu-ag.png) 0 -151px; 
} 
.wormsilo { 
    top: 301px; 
} 
.wormsilo { 
    background: url(http://www.briligg.com/images/menu-ag.png) 0 -301px; 
}

HTML：

<ul class="menu"> 
    <li class="mirror"> 
     <a href="whoryou.html"></a> 
    </li> 
    <li class="wormcan"> 
     <a href="aroundyou.html"></a> 
    </li> 
    <li class="wormsilo"> 
     <a href="beyondyou.html"></a> 
    </li> 
</ul>

來源

2010-05-14 kim holder

嗡嗡聲 - 也許你應該嘗試設置鏈接（.menu a）到display: block以使鏈接正常工作。否則，鏈接不會伸展以使用指定的大小，鏈接是內聯元素（糾正我，如果我錯了，沒有測試它）。

來源

2010-05-14 20:21:16 dhh

是的！那是幹什麼的，連同什麼D.A.建議如下。 – 2010-05-14 20:49:22

在內部樣式表，Y你必須指定更好的。因爲.menu li是非常規定的，所以它超出了.wormcan。在內部樣式表中試用.menu li.wormcan。

還沒有測試過這個，但從快速的樣子來看，這似乎是問題所在。

來源

2010-05-14 20:16:10

@briligg，使用Firefox中的http://getfirebug.com/這樣的工具，您可以輕鬆檢查元素並查看添加css的順序。 – 2010-05-14 20:18:02

我不知道我是否正確地理解了你，但是作爲第二個選擇器的'.menu li'.mirror，.wormcan和.wormsilo。當我這樣做，所有的圖形消失。但這提醒我，在類似的頁面上，這些選擇器是id的，而不是類。所以我試過#mirror，#wormcan，#wormsilo。但圖形仍然是不可見的。如果有任何幫助，螢火蟲錯誤控制檯說選擇器預計。由於選擇器錯誤，規則集被忽略。對於第63行，這是ul的結尾處的。 – 2010-05-14 20:39:50

等 - 我還沒有將html從class =更改爲id =。 woops。現在圖形顯示正確，但鏈接不起作用。現在試試dhh – 2010-05-14 20:42:01

爲什麼圖像精靈菜單無法正確顯示，爲什麼鏈接不工作？

回答

相關問題