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
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