Trennung von Layout und Inhalt: <li> für Grafiken?

[Mastershrimp]

Heyho!

Also ich packe Navigationen immer grundsätzlich in <ul>'s

Quasi:

  
<ul>  
 <li id="seite1"><a href="seite1.html">Seite 1</a></li>  
 <li id="seite2"><a href="seite2.html">Seite 2</a></li>  
 <li id="seite3"><a href="seite3.html">Seite 3</a></li>  
 ...  
</ul>  

Bilder kann man jetzt ganz einfach mit CSS einfügen:
Man schiebt den Link-Text mit text-indent:-9999px aus dem Bildschirm raus, definiert <li> und <a> als Block-Elemente mit fester Breite und Höhe und setzt für <a> ein Hintergrundbild ein.

Ist m.E. die bestmögliche Art Inhalt und Design voneinander zu trennen.

Noch kurz am Rande:
Ferner lässt sich damit auch ein netter JS-loser Image-Mouseover-Effekt bewerkstelligen:
Man "malt" sich den Button im Zustand 1 und 0 in einem Grafikprogramm seines Vertrauens und fügt beide nebeneinander in eine neue Grafik.

Nun kann man per CSS und background-position ganz einfach für a:hover die Grafik im Hintergrund verschieben (kein Mouseover: background-position: top left; Mit Mouseover: background-position: top right;)

Fertig ist der Mouseover-Effekt, der weder JS erfordert, noch Bilder nachladen muss.

Details auf http://standards.webmasterpro.de

Gruß

Mastershrimp