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

[Felix Riesterer]

Lieber molily,

<a href=""><img></a> ist »out«, so etwas man mittlerweile auch mit CSS, Stichwort Image Replacement.

Replacement mit oder ohne Javascript?

Ich verstehe Dich im Moment so:

<div id="navi">  
   <h2>Navigation</h2>  
   <ul>  
      <li><a href="pfad/impressum.html" id="impressum">Impressum</a></li>  
      <li><a href="pfad/kontakt.html" id="kontakt">Kontakt</a></li>  
   </ul>  
</div>

und im CSS dann:

#navi { border: 1px solid #dfdfdf; }  
#navi h2 { display: inline; margin: 0; padding: 0 3em 0 0; }  
#navi ul { display: inline; list-style: none; margin: 0; padding: 0; }  
#navi li { display: inline; list-style: none; margin: 0; padding: 0; width: 80px; height: 20px; }  
#navi #kontakt { background: url(mein/kontakt-bild.png) no-repeat top left; }  
#navi #impressum { background: url(mein/impressum-bild.png) no-repeat top left; }

oder so ähnlich.

Im Übrigen ist es nicht sonderlich klug, gerade den Text der Navigationsleiste in Grafiken unterzubringen. Grafiken sind schlecht skalierbar und die Farben nicht anpassbar. Wenn man Wert auf Zugänglichkeit legt, sollte man sich mit der Gestaltung von solchen wichtigen Elemente zurückhalten.

Zugegeben, da hast Du Recht. Aber wenn es der OP (oder dessen Kunde) so will...

Liebe Grüße aus Ellwangen,

Felix Riesterer.