Why doesn't this image sprite menu display properly, and why aren't the links working?

Posted by briligg on Stack Overflow See other posts from Stack Overflow or by briligg
Published on 2010-05-14T20:09:52Z Indexed on 2010/05/14 20:14 UTC
Read the original article Hit count: 312

Filed under:
|
|
|
|

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>

© Stack Overflow or respective owner

Related posts about css-layout

Related posts about html