A little help with basic sprite stuff

Question

Hi, I'm a design student and I'm at the end of my Web design I course. I'm working on my final site, but I'm having trouble with sprites (something we went over in one class, which I followed, but now I can't seem to figure it out). It's the first time I'm trying to use sprites for a site I'm making for the class. Anyway, I've looked over some sites with tutorials and I've managed to get things to work this far... here is my html (for the navigation):

  [ul id="list"]
    [li id="home"][a href="index.html"]home[/a][/li]
    [li id="profile"][a href="profile.html"]profile[/a][/li]
    [li id="work1"][a href="work-1.html"]1[/a][/li]
  [/ul]

Here is the CSS:

nav  {
  display:block;
  position: absolute;
  right:0;
  top: 0;
  z-index:2;
}

list {
  background: url("../images/sprite-1.gif") no-repeat;
  list-style: none;
  width: 200px;
  height:250px;
  margin:0;
  padding:0;
}

list li, list a {
  display:block;
  height:25px;
}

home a:hover {
  display:block;
  height:25px;
  background-position:0px 75px;
}

Sorry for the crude display of the codes; I can't figure out how to display this properly. What is wrong with the way I have set things up? Here, the links work, and I can worry about hiding the text links later. However, I can't figure out how to apply hover images for each item in my list.

Thank you,

Michael

Answer 1

You're going to want something more like:

.cssnav img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}

where in this case cssnav is your class id

edit: you might also want to add the "css" tag to your question