Why doesn't this image sprite menu display properly, and why aren't the links working?
- by briligg
The code validates. There should be two more images in the menu on the left, above the visible one of the silo. And each should be a link.
http://www.briligg.com/agnosticism.html
css is: external style sheet:
.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;
}
internal style sheet:
.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>
