Example 7: Gettin’ fancy

XHTML:

<div class="wrapper">
  <ul id="example7"
    ><li class="aloe"><a href="#">Aloe</a></li
    ><li class="berg"><a href="#">Bergamot</a></li
    ><li class="cale"><a href="#">Calendula</a></li
    ><li class="dami"><a href="#">Damiana</a></li
    ><li class="elde"><a href="#">Elderflower</a></li
    ><li class="feve"><a href="#">Feverfew</a></li
    ><li class="ging"><a href="#">Ginger</a></li
    ><li class="hops"><a href="#">Hops</a></li
    ><li class="iris"><a href="#">Iris</a></li
    ><li class="juni"><a href="#">Juniper</a></li
    ><li class="kava"><a href="#">Kava kava</a></li
    ><li class="lave"><a href="#">Lavender</a></li
    ><li class="marj"><a href="#">Marjoram</a></li
    ><li class="nutm"><a href="#">Nutmeg</a></li
    ><li class="oreg"><a href="#">Oregano</a></li
    ><li class="penn"><a href="#">Pennyroyal</a></li
  ></ul>
</div><!-- .wrapper -->

CSS:

/* separate list from subsequent content */
div.wrapper
{
  margin-bottom: 1em;
}

ul#example7
{
  width: 30em;
  margin: 0;
  padding: 0;
  border: 1px solid #A52A2A; /* brown */
  background-image: url("SophieAresPilonPale.jpg");
}
ul#example7 li
{
  /* list item dimensions */

  width: 10em;
  height: 2em;

  /* Clear the default margins & padding 
  for cross-browser efficiency */
  margin: 0;
  padding: 0;

  /* suppress item markers */
  list-style-type: none;
}

/* Purty it up */
ul#example7 li a
{
  display: block;
  width: 10em;
  line-height: 2em;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  color: #A52A2A; /* brown */
}
/* mouseover gets the bright photo */
ul#example7 li a:hover
{
  color: #FFF; /* white */
  background-image: url("SophieAresPilonBright.jpg");
}

/* give each list item a piece of the picture */

li.aloe a { background-position: 0em -0em }
li.berg a { background-position: 0em -2em }
li.cale a { background-position: 0em -4em }
li.dami a { background-position: 0em -6em }
li.elde a { background-position: 0em -8em }

li.feve a { background-position: -10em -0em }
li.ging a { background-position: -10em -2em }
li.hops a { background-position: -10em -4em }
li.iris a { background-position: -10em -6em }
li.juni a { background-position: -10em -8em }

li.kava a { background-position: -20em -0em }
li.lave a { background-position: -20em -2em }
li.marj a { background-position: -20em -4em }
li.nutm a { background-position: -20em -6em }
li.oreg a { background-position: -20em -8em }
li.penn a { background-position: -20em -10em }

/* Bring the first item of each column 
back up to the level of item 1.
Vertical return = items * height.
Here, 5 items * 2em line-height = 10em */

ul#example7 li.feve,
ul#example7 li.kava
{
  margin-top: -10em;
}

/* Horizontal positions of the columns */
ul#example7 li.aloe,
ul#example7 li.berg,
ul#example7 li.cale,
ul#example7 li.dami,
ul#example7 li.elde
{
  margin-left: 0em;
}
ul#example7 li.feve,
ul#example7 li.ging,
ul#example7 li.hops,
ul#example7 li.iris,
ul#example7 li.juni
{
  margin-left: 10em;
}
ul#example7 li.kava,
ul#example7 li.lave,
ul#example7 li.marj,
ul#example7 li.nutm,
ul#example7 li.oreg,
ul#example7 li.penn
{
  margin-left: 20em;
}