CSS Image Sprites. Image Sprites - Creați o listă de navigare.

Image Sprites - Creați o listă de navigare

Vrem să folosim imaginea sprite ("img_navsprites.gif") pentru a crea o listă de navigare.
Vom folosi o listă HTML, deoarece poate fi o legătură și acceptă și o imagine de fundal:

Exemplu:
 

#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}