(Hintergrund-)Bilder als Navigationselemente

OK, ich sollte auch noch was Konstruktives von mir geben, nachdem ich im letzten Eintrag über Bilder in der Navigation gemosert habe und es auf dieser Seite oberflächlich betrachtet nicht anders mache. Denn dank CSS ist das an sich kein Problem und von der Produktion her nur wenig aufwendiger.

Ich gehöre ja auch zu den Leuten, die Seiten teilweise in Gimp oder PS vormalen, dort slice ich dann wie gewohnt die Bildteile, die Navigationselemente representieren heraus. Dann benutze ich aber anstelle eines Table, wie es mal Gang und Gebe war, eine Liste (<ul> und <li>) um die Elemente darzustellen und zwar als Hintergrundgrafik und nicht mit als Bild mit <img>. Ich weise jedem <li> seine eigene CSS Klasse zu über die das Hintergrundbild definiert wird. Innerhalb des Listenelmentes befindet sich ein normaler Textlink. Der Text wird mit einem <span> eingefaßt welcher mit display: none die Darstellung verhindert.
That's it.

der CSS-Code könnte so aussehen:

#navigation {
  /* wie auch immer */
}
#navigation ul {
  list-style-type: none;
  margin: 0px;
  height: 16px;
  line-height: 10px;
}
#navigation li {
  float: left;
  padding: 0;
}
#navigation li a span {
  display: none;
}
/* Navigationselement
#navigation li.about a:link, #navigation li.about a:visited {
  background-image: url(/navigation/about.gif);
  width: 50px;      /* Dimensionen von about.gif */
  height: 16px;     /* Dimensionen von about.gif */
  display: block;
  margin: 0 1px 0 0;
}
/* ... weitere Navigationselemente ... /*

Der HTML Code:

<div id="navigation">
  <ul>
    <li class="about"><a
      title="&uuml;ber"
      accesskey="u"
      href="/about/"><span><em>U</em>eber:
       was es hier&uuml;ber zu sagen gibt</span></a></li>
    <!-- ... weitere Navigationselemente ... -->
  </ul>
</div>