div hover-Effekt Hintergrundgrafik wechseln

[AlphaGen]

Hallo an alle die versuchen mir weiter zu helfen und deshalb das hier lesen.

Folgender Code:

HTML:

<div id="navi">
       <a href="#"><div id="home">Home</div></a>
</div>

CSS:

a:link { color:#DDDDDD; text-decoration:none; font-family:verdana; font-size:16px; }
a:visited {color:#DDDDDD; text-decoration:none; font-family:verdana; font-size:16px;}
a:hover {color:#FFFFFF; text-decoration:none; font-family:verdana; font-size:16px; background-image:url(../bilder/navi_hover.jpg); background-repeat:repeat-x;}

#navi{
    text-align:left;
    width:960px;
    height:51px;
    margin:0 auto;
    top:50px;
    position:relative;
    background-image:url(../bilder/navi_hg.jpg);
    background-repeat:repeat-x;
}

#home {
    width:100px;
    height:51px;
    text-align:center;
    vertical-align:middle;
}

Das bedeutet: Ich habe ein div "Navi". Das zieht sich über 100% der Breite hin. Hier ist eine hintergrundgrafik hinterlegt, die sich auf der X-Achse wiederholt.

In dem div "Navi" sollen Links erstellt werden. Der Inhalt des Links ist ein div mit ID "Home". Sobald man über den Link (bzw. über das div) fährt, soll eine andere Hintergrundgrafik für "Home" geladen werden.

Jetzt mein Problem:

1. Der rollover - Effekt funktioniert momentan nur im IE bei mir. Firefox z.b. Streikt hier.Dabei will ich doch nur ganz einfach die Hintergrundgrafik des divs "Home" ändern sobald die Mouse drüber gewegt

 

[Kronod]

AW: div hover-Effekt Hintergrundgrafik wechseln

also nur so als Tip, im Moment lädst du das Hintergrundbild aber für <a> und nicht für <div>.

schonmal versucht das hintergrundbild nur für die ID "home" zu laden wenn man mit der Maus drüberfährt ?

 

[sokie]

AW: div hover-Effekt Hintergrundgrafik wechseln

um da ein block Element zu haben musst du keinen Div innerhalb des a Elements notieren. per display:block; kannst du das a selbst als Block Element darstellen, und eben auch mit height und width versehen.

nach den Standards sind innerhalb von a nur inline-Elemente vorgesehen, weshalb das Div dort auch nicht valide ist. (was möglicherweise auch erklärt, warum es imIE funktioniert und in anderen Browsern nicht).

 

[Metalshoota]

AW: div hover-Effekt Hintergrundgrafik wechseln

Hau' dir eins innen Schädel: Niemals in einem <a> einen Div-Container! Bevor du weiterliest, stell dich bitte in die Ecke und schäm dich!
So. Jetzt mal im Ernst:
Niemals sowas
<a href="#"><div id="home">Home</div></a> !
Aber:

<style>
.navi a:link, .navi a:visited { color:#DDDDDD; text-decoration:none; font-family:verdana; font-size:16px;background-image:url(../bilder/navi_hg.jpg);
    background-repeat:repeat-x; width:100px;height:51px; text-align:center; vertical-align:middle;}
.navi a:hover {color:#FFFFFF; text-decoration:none; font-family:verdana; font-size:16px; background-image:url(../bilder/navi_hover.jpg); background-repeat:repeat-x; display:inline-block; width:100px;height:51px;text-align:center; vertical-align:middle;}

#navi{
    text-align:left;
    width:960px;
    height:51px;
    margin:0 auto;
    top:50px;
    position:relative;
</style>


<div class="navi">
       <a href="#">Home</a>
</div>

Hoffe hab alles richtig gemacht. Wenn's nicht läuft, ich guck hier später nochmal rein. Hab wenig Zeit =/