problem mit hover

[littleHtml Freak]

hi hab jetzt ne ziem,lich kange pause was webdesign angeht eingelegt und hab folgendes problem:
arbeite an einem neuen design und will für die links in der navi nen hover efekt einfügen!
habe die navi in einer externen php datei die ich dann in jede seite einbinde.
die sieht wie folgt aus:

<ul id="navi">
        <li>
                <a href="index.php" id="navi_home"><img src="bilder/home.png" alt="home" class="navi" /></a>
        </li>
        <li id="navi_blog" >
                <a href="blog.php" id="navi_blog"><img src="bilder/blog.png" alt="blog" class="navi" /></a>
        </li>
        <li id="navi_gaestebuch">
                <a href="guestbook.php" id="navi_gaestebuch"><img src="bilder/gaestebuch.png" alt="gaestebuch" class="navi" /></a>
        </li>
        <li id="navi_links" >
                <a href="links.php" id="navi_links"><img src="bilder/links.png" alt="links" class="navi" /></a>
        </li>
</ul>
<br />

dann meine externe css datei(ausschnitt):

#navi li {
        float: left;
        margin-top: 10px;
        margin-left: 40px;
                                }
/*EINZELNE BILDER DER NAVI*/


        #navi_home:hover {
                background-image: url(bilder/home_hover.png);
                                        }
        #navi_blog:hover  {
                background-image: url(bilder/blog_hover.png);
                                        }
        #navi_gaestebuch:hover  {
                background-image: url(bilder/gaestebuch_hover.png);
                                        }
       #navi_links:hover  {
                background-image: url(bilder/links_hover.png);
                                        }

Simon Kulozik - Home das ist die seite. komisch ist dass man ein hover effekt sieht.. aber nicht der der es sein soll seht selbst
kann mir jemand helfen?

 

[littleHtml Freak]

hab jetzt ohne liste mit divs hinbekommen...
nach 2 stunden rumprobieren^^

 

[rapid10]

Schön ist das nicht. Und in einem <li> ist kein <div> erlaubt.
Gibt doch dem Link selbst einen Hintergrund:

<ul id="navi">
        <li>
                <a href="http://www.html.de/" id="navi_home">Home</a>
        </li>
        <li id="navi_blog" >
                <a href="blogs/" id="navi_blog">Blog</a>
        </li>
        <li id="navi_gaestebuch">
                <a href="guestbook.php" id="navi_gaestebuch">Gästebuch</a>
        </li>
        <li id="navi_links" >
                <a href="links.php" id="navi_links">Links</a>
        </li>
</ul>

Die CSS-Datei sieht folgendermaßen aus:

#navi_home {
background: url(./img/xyz.jpg) no-repeat;
}
#navi_blog {
background: url(./img/xyz.jpg) no-repeat;
}
#navi_gästebuch {
background: url(./img/xyz.jpg) no-repeat;
}
#navi_links {
background: url(./img/xyz.jpg) no-repeat;
}
  
#navi_home:hover {
 background-image: url(bilder/home_hover.png) no-repeat;
}
#navi_blog:hover  {
 background-image: url(bilder/blog_hover.png) no-repeat;
 }
 #navi_gaestebuch:hover  {
 background-image: url(bilder/gaestebuch_hover.png);
 }
#navi_links:hover  {
background-image: url(bilder/links_hover.png);
}

Vergiss no-repeat nicht sonst wiederholt es sich Unterumständen. ;)

 

[littleHtml Freak]

stimmt wieso bin ich da nicht selbst drauf gekommen^^ bin wohl ein bissl eingerostet
danke