komplettes background image als link

[Krümäl]

Moin!

jetzt habe ich das Problem, dass ich den Link nur an der Stelle aktivieren könnte, an der die Schrift stehen würde. Ich möchte aber die ganze Fläche von 205x105px als link haben.

So. Du weißt also, wie Groß das Element ist.

Wie kann ich das verwirklichen, ohne dass ich die Bilder direkt in den HTML-Code setze? (ich möchte mehrere Styles verwenden und daher sollten die bilder über CSS eingebunden werden, da es sich um buttons in der Navigationsleiste handelt.)

Dann weißt Du auch, wie groß das Linkelement sein sollte, wenn es das umgebende Element ausfüllen soll. Du kannst auch ganz dezent auf die umgebenden DIVs verzichten und den Hintergrund in die Links einsetzen. Solltest Du sogar. Die Links dafür eventuell in eine Liste.

hmm ok ich hab jetzt mal versucht die background-images in die links einzusetzen, aber irgendwie zeigt es bei mir nichts an. ich hab es mal auf nen hoster gelegt damit ihr es auch ansehen könnt:

http://hlc.pytalhost.com

ich habe es auch wie folgt umgearbeitet:

  
.navibox        {  
                color:              blue;  
                background-color:   inherit;  
                width:              205px;  
                height:             100px;  
                background-repeat:  no-repeat;  
                }  
  
.navibox span   {  
                width:              204px;  
                height:             104px;  
                visibility:         hidden;  
                }  
  
#home           {  
                background-image:   url(bhome.jpg);  
                }  
  
#news           {  
                background-image:   url(bnews.jpg);  
                }  
  
#spieler        {  
                background-image:   url(bspieler.jpg)  
                }  
  
#forum          {  
                background-image:   url(bforum.jpg)  
                }  
  
#kontakt        {  
                background-image:   url(bkontakt.jpg)  
                }

  
<div id="navileiste">  
  
    <a href="index.html" class="navibox" id="home"><span>Home</span></a>  
  
  
    <a href="news.html" class="navibox" id="news"><span>News</span></a>  
  
  
    <a href="spieler.html" class="navibox" id="spieler"><span>Spieler</span></a>  
  
  
    <a href="http://www.guildwarsunited.de" target="_blank" class="navibox" id="forum"><span>Forum</span></a>  
  
  
    <a href="kontakt.html" class="navibox" id="kontakt"><span>Kontakt</span></a>  
  
  </div>

war das so gedacht, wie du mir geschildert hast? Wie gesagt, leider geht des nicht, weil keine backgroundbilder angezeigt werden und die Links jetzt direkt untereinander stehen aber unsichtbar sind.

lg
Krümäl

PS: die beiden Rahmen sind nur zur Übersicht beim Entwickeln da, rot ist die Navigationsleiste und Grün dann der Inhalt.