• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hintergrundbild bei gerade aktivem Link

Hi Leute,
habe ein kleines Problemchen...
Ich habe ein vertikales Menü, bei dem jeder Menüpunkt das gleiche Hintergrundbild hat. Wenn man mit der Maus über einen Link fährt, ändert sich das Hintergrundbild und die Schriftfarbe wie gewünscht, und diesen Zustand möchte ich auch haben, wenn man sich gerade auf einer Seite befindet. Dann soll also dieser Link zu der Seite so gestylt sien, wie beim Hovern. Das mit der Schriftfarbe habe ich hinbekommen, nur bei dem Hintergrundbild habe ich noch Probleme...
Hier einmal der Code der Navigation auf einer der Seiten:
HTML:
<div id="nav">
  <ul>
     
     <li><a href="derclan.php" id="current">&raquo;Der Clan&laquo;</a></li>
     <li><a href="mitglieder.php">&raquo;Mitglieder&laquo;</a></li>
     <li><a href="hello.php">&raquo;G&auml;stebuch&laquo;</a></li>
     <li><a href="kontakt.php">&raquo;Kontakt&laquo;</a></li>
     <li><a href="linkliste.php">&raquo;Linkliste&laquo;</a></li>
     <li><a href="buendnisse.php">&raquo;B&uuml;ndnisse&laquo;</a></li>
     <li><a href="funwars.php">&raquo;Funwars&laquo;</a></li>
  </ul> 
</div>
Und hier der CSS-Code:
HTML:
#nav{
    float: left;
    width: 220px;
    text-align: center;
    line-height: 36px;
}
#nav a:link,#nav a:visited, #nav a:active {
    text-decoration: none;
    color:#800000;
    font-size: 75%;
}

#nav ul li{
  list-style-type: none;
  margin-right:20px;
  margin-left:-20px;
  background: url(Bilder/nav_bild1.png);
  border: 6px double #270101;
  
}
#nav :hover{
     background: url(Bilder/nav_bild_aktiv.png) ;
     
}
#nav a:hover{
    color:   #6A6A6A;
    background:none;
}
#nav a#current{
    color:   #6A6A6A;
}
Wenn ich jetzt das Hintergrundbild wie folgt versuche einzufügen, erstreckt sich das Bild nicht über den ganzen Listenabschnitt des Links, wie das beim Hovern passiert, sondern erscheint nur direkt hinter der Schrift des jeweiligen Links.
HTML:
#nav a#current{
    color:   #6A6A6A;
    background:url((Bilder/nav_bild_aktiv.png)
}
Kann mir da jemand behilflich sein?
Danke schonmal im Vorraus!
Hier mal die Seite:
Der Clan

 
Werbung:
Durch die Angabe

Code:
#nav :hover{

sagst Du dem Browser, dass er bei jedem Element wenn es mit der Maus überfahren wird das Hintergrundbild einfügen soll. Das gilt nicht nur für das <a> sondern auch für jedes <li>. Daher ist das Hintergrundbild beim Mouseover auch im gesamten Hintergrund zu sehen.

Die Lösung wäre, den Link über den ganzen Bereich zu verbreitern. Dazu musst Du den Link nur zu einem Blockelement machen. Ergänze in

Code:
#nav a:link, #nav a:visited, #nav a:active {

die Eigenschaft

Code:
display: block;
 
Danke für die Antwort, werde ich gleich mal ausprobieren...

Edit: Hat super funktioniert, vielen Dank threadi!!
 
Zuletzt bearbeitet:
Werbung:
Zurück
Oben