classes und ids in Verbindung mit Pseudoklassen (hover)

[Remo]

Hallo,

Ich habe eine kleine Seite erstellt, die ein externes CSS stylesheet einbindet. Die Elemente, welche ich mit CSS formatieren wollte, referenzierten dieses ursprünglich über id-tags.
Das sah dann z.B. so aus:

#nav_item{
    font-size: 12px;
    color: #006699;
    background-color: transparent;
    margin-top: 5px;
    margin-bottom: 5px;
}
#nav_item:hover{
    color: black;
    background-color: #999966;
}

Es gab also mehrere Elemente, die in der id den Wert "nav_item" hatten. Dann habe ich herausgefunden, dass id's eindeutig sein sollten, und habe daher dass keyword class verwendet. D.h. ich hab auch das stylesheet angepasst, nämlich so:

.nav_item{
    font-size: 12px;
    color: #006699;
    background-color: transparent;
    margin-top: 5px;
    margin-bottom: 5px;

}
.nav_item:hover{
    color: black;
    background-color: #999966;
}

Nun hats da wohl einen gröberen Fehler drin, das "hovern" funktioniert nämlich nicht mehr... wie muss ich .nav_item mit Hovereffekt neu definieren?

Besten Dank,
Remo

[Felix Riesterer]

Lieber Remo,

.nav_item{

Besser wäre statt des Unterstrichs ein Minus-Zeichen: .nav-item

Nun hats da wohl einen gröberen Fehler drin, das "hovern" funktioniert nämlich nicht mehr... wie muss ich .nav_item mit Hovereffekt neu definieren?

Bist Du sicher, dass Deine zu hovernden Elemente mit "class" anstatt mit "id" ausgezeichnet sind? .nav-item:hover {...} scheint absolut OK zu sein.

Du hast mit keiner Silbe erwähnt, mit welchen Browser Du das testest. Du bist Dir im Klren darüber, dass Hover-Effekte im Internet-Explorer nur innerhalb von <a>s umgesetzt werden?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Remo]

Hallo Felix,

Ich arbeite mit Firefox. Als ich noch mit "id" anstatt "class" gearbeitet habe, hats funktioniert. Und ja, ich habs jetzt definitiv mit class gemacht...

Im Quellcode sieht's so aus:

  
<a href="?nav=0" onMouseover="javascript:show('home');">  
   <div class="nav_item">  
      <img border="0" src="images/orange_block.gif" width="11" height="11">  
        Home  
   </div>  
</a>  

Danke für weitere Tipps,

Remo

[Struppi]

Im Quellcode sieht's so aus:

<a href="?nav=0" onMouseover="javascript:show('home');">
   <div class="nav_item">
      <img border="0" src="images/orange_block.gif" width="11" height="11">
        Home
   </div>
</a>

  
Warum ist der DIV Container da?  
Weder ist er dort erlaubt noch notwendig.  
Wenn ich folgenden Code mit den CSS anwende, passiert bei mir was:  
~~~html
  
<a href="?nav=0" class="nav_item">  
      <img border="0" src="images/orange_block.gif" width="11" height="11">  
        Home  
</a>  

Struppi.

[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.

[Remo]

Besten Dank, eure Vorschläge haben mein Problem gelöst!

[MudGuard]

Hi,

<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>

  
Warum ist der DIV Container da?  
Dort ist er zwar erlaubt, aber seine Notwendigkeit zweifle ich an.  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://www.Mud-Guard.de/)  
[Schreinerei Waechter](http://www.schreinerei-waechter.de/)  
  
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.  

[Felix Riesterer]

Lieber MudGuard,

Warum ist der DIV Container da?
Dort ist er zwar erlaubt, aber seine Notwendigkeit zweifle ich an.

Falls man der Navi-<ul> noch eine Unter-Überschrift (<h2> oder sowas) geben möchte, dann hat man innerhalb des <div> mehr Möglichkeiten mit CSS. Alleine von dem Beispiel ausgehend hätte es auch gereicht, der <ul> die ID des <div> zu geben, um auf das <div> letzten Endes ganz zu verzichten.

Ich mache es meistens so:

<div id="navigation">  
<h2>Navigation</h2>  
<ul>  
   <li>nav1</li>  
   <li id="aktuelle-seite">nav2</li>  
   <li>usw.</li>  
</ul>  
</div>

Damit habe ich per CSS mehr Gestaltungsmöglichkeiten, als ohne <div>-Container.

Liebe Grüße aus Ellwangen,

Felix Riesterer.