CODEWITHSUNDEEP
htmlcsshyperlinkhtml-listssprite
kim holder
kim holder

Reputation: 1854

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

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>

Upvotes: 0

Views: 160

Answers (2)

dhh
dhh

Reputation: 4337

Hum - maybe you should try setting the links (.menu a) to display: block to have the links working properly. Otherwise the link won't stretch to use the specified size, links are inline elements (correct me if I'm wrong, didn't test it).

Upvotes: 0

David Andersson
David Andersson

Reputation: 1246

In your internal stylesheet, you have to specify better. Because .menu li is very specified, it overruns .wormcan.

Try .menu li.wormcan in the internal stylesheet.

Haven't tested this, but from a quick look, this seems to be the problem.

Upvotes: 1

Related Questions