views:

18

answers:

2

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>
+1  A: 

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.

David Andersson
@briligg, With a tool like http://getfirebug.com/ in Firefox, you can easily inspect an element and see in what order the css is added.
David Andersson
i'm not sure i understood you correctly, but i '.menu li' as a second selector to .mirror, .wormcan, and .wormsilo.when i did that, all the graphics disappeared.but that reminded me that on a similar page, these selectors were id's, not classes. So i tried #mirror, #wormcan, #wormsilo. But the graphics continue to be invisible.if it's any help, the firebug error console says Selector expected. Ruleset ignored due to bad selector.for line 63, which is the end of the ul.
briligg
Wait -i hadn't changed the html from class= to id=. woops. the graphics now display correctly, but the links don't work. Now to try the advice of dhh
briligg
i can only give one accepted answer, although i needed the advice from both of you. I'm giving it to dhh because he has fewer points, and i needed to tweak yours for it to work for me. Sorry!
briligg
@briligg, no worries. :) happy you got it working.
David Andersson
A: 

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

dhh
Yes! that did it, together with what D.A. advised below.
briligg