Link mit Hintergrundbild?

[nettotal]

Hallo,

ich hab folgendes Problem: und zwar hab ich eine Navi gemacht, bei der beim überfahren des Links sich das Hintergrundbild ändert. Das habe ich so gemacht:

div.navi
	{
	 width:140px;
	 height:20px;
	 background-image:url(img/navi.gif);
	}
div.navi:hover
	{
	 background-image:url(img/navi_hover.gif);
	}


<a href="link.htm" class="navi"><div class="navi">Gästebuch</div></a>

Aber da der Validator da meckert, wegen dem eingeschlossenen <div>, hab ich das div einfach durch ein <span> ersetzt. Problem jetzt ich kann für den span tag ja keine Breite bzw. Höhe angeben.
Hier in eurem Forum hab ich eine Angabe gefunden um dem link ne Größe zu geben. Das hat aber leider nicht geklappt.

a.navi:link
        {
         display:block;
         height:100%;
         font-weight:bold;
        }

Habt ihr Vorschläge wie ich des richtige machen kann? Oder meint ihr es ist egal wenn der Validator meckert?

Gruß Klaus

 

[dkdenz]

So sollte es klappen:

.navi{
display:block;
width:140px;
height:20px;
background-image:url(img/navi.gif);
font-weight:bold;}
.navi:hover{
background-image:url(img/navi_hover.gif);}

<a href="link.htm" class="navi">Gästebuch</a>

 

[nettotal]

wow vielen Dank für diese schnelle Antwort.

Funktioniert einwandfrei!

 

[dkdenz]

Gern geschehen.
Falls Du das noch optimieren möchtest, so das das Bild beim ersten Hovern nicht flackert, weil es erst geladen werden muss,
dann sieh Dir den Quelltext folgender Seite an: Dokumenttitel