classes und ids in Verbindung mit Pseudoklassen (hover)

[Felix Riesterer]

Lieber Struppi,

Warum ist der DIV Container da?
Weder ist er dort erlaubt noch notwendig.

Absolut berechtigte Kritik!

Wenn ich folgenden Code mit den CSS anwende, passiert bei mir was:

<a href="?nav=0" class="nav_item">
      <img border="0" src="images/orange_block.gif" width="11" height="11">
        Home
</a>

  
Dieser Link hat also eine hovernde Hintergrundfarbe. OK. Was soll dieses Bild da? Es dient ja wohl auch nur der Illustration, ist damit also kein Seiten\_inhalt\_, sondern lediglich Seiten\_gestaltung\_. Deshalb finde ich, dass dieses Bild auch als Hintergrundbild definiert gehört.  
  
Ich nehme doch mal an, dass die Navigation als <ul> realisiert ist? (Wenn nicht, dann ist das weniger gut!)  
  
Mein Vorschlag:  
HTML  
~~~html
<div id="navigation">  
<ul>  
  <li><a href="home.htm" id="nav-home">home</a></li>  
  <li><a href="thema1.htm" id="nav-thema1">Thema 1</a></li>  
  <li><a href="thema1.htm" id="nav-thema2">Thema 2</a></li>  
</ul>  
</div>

CSS

#navigation { /*layout für Navigation */ }  
#navigation ul { ... }  
#navigation li { ... }  
#navigation #nav-home { padding-left: 35px;  
                        /* für die Breite des Bildes + ein paar Pixel Abstand */  
                        background: transparent url(images/orange_block.gif) no-repeat top left; }  
#navigation #nav-home:hover { background: #999966 url(images/orange_block.gif) no-repeat top left; }  
/* Ob es reichen würde, nur background-color zu verwenden, weiß ich nicht.  
   Das Hintergrundbild könnte dadurch verschwinden... */  
#navigation #nav-thema1 { padding-left: 35px; background: transparent url(images/th1??.gif) no-repeat top left; }  
#navigation #nav-thema1:hover { background: #999966 url(images/th1??.gif) no-repeat top left; }  
#navigation #nav-thema2 { ...usw...

Liebe Grüße aus Ellwangen,

Felix Riesterer.