nicht angemeldet
CSS Hover zeigt Bild nicht an
Hiho guten Abend!
Ich habe eine Menuleiste mit Hintergrundbild gebaut. Jetzt wollte ich einen hippen Hover Effekt drüber haben der mir ein anderes Hintergrundbild zeigt wenn ich mit der Maus drüber gehe. Aber der Browser will nicht zeigen was ich gerne sehen würde sondern macht einfach nur ein bischen weiß. Weiß da jemand Rat?
Mein Code:
HTML:
<div class="menu">
<ul>
<li><a href="startseite.html">Startseite</a></li>
<li><a href="produkte.html">Produkte</a></li>
<li><a href="ueber_uns.html">Über Uns</a></li>
<li><a href="frage_und_antwort">Fragen</a></li>
<li><a href="sitemap.html">Sitemap</a></li>
<li><a href="suchen.html">Suchen</a></li>
<li><a href="english.html">English</a></li>
</ul>
</div>
CSS:
.menu{
font-weight:bold;
height:27px;
position:relative;
background-image:url(bilder/nav.jpg);
background-repeat:repeat-x;
}
.menu li{
list-style-type:none;
display:inline;
}
.menu a {
padding-left:10px;
padding-right:5px;
font-size:14px;
line-height:38px;
color:#666666;
}
.menu a:hover {
background-image:url(bilder/nav_hov.jpg);
background-repeat:repeat-x;
color:#000000;
}
Vielen Dank für die Mühe des Durchlesens!
Greetz Fabian
-
Hallo,
Hast du dein CSS in eine externe CSS-Datei ausgelagert? Wenn ja, ist der Dateipfad zur Bild-Datei relativ zur CSS-Datei? Das muss es nämlich sein, nicht Relativ zur HTML-Datei.
Im IE funktionieren hovers auch nur mit Links. Also das Bild wird als Hintergrundbild des <a ...> ... </a>-Tags angezeigt. Nicht als Hintergrundbild des div, ul oder li.
Kann es sein dass das Bischen weiß ein Ausschnitt deines Bildes ist?
Dein Hover-Effekt im CSS-Code ist jedenfalls dem Link zugewiesen.
In welchen Browsern tritt es denn so auf?
-
Hallo,
Hiho!
Hast du dein CSS in eine externe CSS-Datei ausgelagert? Wenn ja, ist der Dateipfad zur Bild-Datei relativ zur CSS-Datei? Das muss es nämlich sein, nicht Relativ zur HTML-Datei.
Das CSS ist in einer Datei ausgelagert; ist aber auf der gleichen Ebene wie die HTML Datei. Das Hintergrundbild an sich funktioniert auch wunderbar, nur beim Hover macht er zicken.
Im IE funktionieren hovers auch nur mit Links. Also das Bild wird als Hintergrundbild des <a ...> ... </a>-Tags angezeigt. Nicht als Hintergrundbild des div, ul oder li.
Kann es sein dass das Bischen weiß ein Ausschnitt deines Bildes ist?
Nein. Beide Bilder (also Hintergrundbild und Hover Bild) sind gleich groß. Es wird beim Hover aber nur ein Teil des Hintergrundbildes überdeckt anstatt das komplette Bild.
Dein Hover-Effekt im CSS-Code ist jedenfalls dem Link zugewiesen.
In welchen Browsern tritt es denn so auf?
Sowohl im IE7 als auch im FF2.0.0.5.
Danke für deine Antwort und dein "Drüber-Denken". Ich spiel schon die ganze Zeit dran rum, aber komm auf keinen grünen Zweig....
Greetz
Fabian
-