CSS Hover Effekt

[belafarinrod91]

Hi Leute,

hab folgendes Problem, würde gerne eine Seite fertig machen und den Hover Effekt den ich für das Menü erstellt habe, funktioniert irgendwie nur bei mir in Safari. In Firefox und Opera funktioniert nur der erste Button "Start". Woran liegt das bitte ???

HTML

<div id="navigation"> 
 		
 		<div class="navi">
 		<img src="main_index/menu_links.gif" width="110px" height="59px" > 
 		</div>
 		<div class="navi">
 		
 		<a href="../start.html"><img class="normal" src="main_index/Start1.gif" width="116px"height="59px"></a> 
 		<a href="../start.html"><img class="hover" src="main_index/Start1_hover.gif" width="116px"height="59px"></a>
 		</div>--> 
 		<div class="navi">
 		<a href="../fotos.html"><img class="normal" src="main_index/Fotos2.gif" width="118px"height="59px"></a>
 		<a href="../fotos.html"><img class="hover" src="main_index/Fotos2_hover.gif" width="118px"height="59px"></a>
 		</div>
 		<div class="navi">
 		<a href="../videos.html"><img class="normal" src="main_index/Videos3.gif" width="133px"height="59px"></a>
 		<a href="../videos.html"><img class="hover" src="main_index/Videos3_hover.gif" width="133px"height="59px"></a>
 		</div>
 		<div class="navi">
 		<a href="../wir.html"><img class="normal" src="main_index/uberuns4.gif"width="170px"height="59px"></a>
 		<a href="../wir.html"><img class="hover" src="main_index/uberuns4_hover.gif"width="170px"height="59px"></a>
 		</div>
 		<div class="navi">
 		<a href="../gb.html"><img class="normal" src="main_index/Gastebuch5.gif"width="197px"height="59px"></a>
 		<a href="../gb.html"><img class="hover" src="main_index/Gastebuch5_hover.gif"width="197px"height="59px"></a>
 		</div>
 		<div class="navi">
 		<img  src="main_index/menu_rechts.gif" width="156px"height="59px">
 		</div>

und das CSS

.navi {
display:inline;
}

.navi img.normal {
display: inline;
}

.navi img.hover {
display: none;
}

.navi:hover img.normal {
display: none;
}

.navi:hover img.hover {
display: inline;
}

#navigation {
float: left;
width: 1000px;
color: #000000;
margin: 0px 00px 0px 0px;
background-color:#000000; }

Das ganze findet ihr online unter www.geo-exploring.de/hmtl/index.html

Wäre echt wenn ihr mir helfen würdet/könntet ...

LG Bela

 

[Cre@tsheR]

Die Bilder für den Hover Effeckt fehlen wohl iwie aufm Server ...

 

[belafarinrod91]

Aber in Safari werden sie ja gefunden ... ?

 

[mustermen]

Hi in Chrome sowie im neuesten Safari werden sie bei mir auch nicht gefunden, die Bilder sind nicht vorhanden oder haben einen Falschen namen.

Ergänzung (24. Juli 2011)

Dein menu ist ziemlich unübersichtlich machs doch lieber mit einer Unordered List --> UL

<ul id="nav">
     <li class="start"><a href="start.html">Start</a></li>
     <li class="fotos"><a href="fotos.html">Fotos</a></li>
     <li class="videos"><a href="videos.html">Videos</a></li>
</ul>

CSS

#nav {
    height: 59px;
    width: 1000px; 
}  
#nav li {
    list-style-type: none;
    float: left;
    height: 59px;
    display: block;
    text-indent: -9999px;
    overflow: hidden;
}  
#nav li:hover, #nav li:focus {
    backgroundposition: 0px -59px; <---Achtung oder umgekehrt musst du ausprobieren!!!!!
}
.start {
  background:  url(images/start.gif);
  width: 116px;
}
.fotos {
  background:  url(images/fotos.gif);
  width: 118px;
}

Ganz wichtig speichere jetzt beide Zustände einmal den normalen sowie den hover in einem Bild ab oben kommt das normale unten der hover. Dein Bild für Start hat dann eine höhe von 118px und eine breite von 116px.

Ergänzung (24. Juli 2011)

Funktioniert alles oder brauchst du noch Hilfe?

 

[belafarinrod91]

Hey ... vielen vielen Dank für deine Hilfe ... aber so funktioniert der Code nicht

#nav {
height: 59px;
}
#nav li {
list-style-type: none;
float: left;
height: 59px;
display: block;
text-indent: -9999px;
}
#nav li:hover, #nav li:focus {
background-position: 0px -59px;
}
.start {
background: url(..//hmtl/main_index/hover/start.gif);
width: 116px;
}
.fotos {
background: url(..//hmtl/main_index/hover/fotos.gif);
width: 118px;
}

  <div id="navigation"> 
 		
 		
 <ul id="nav">
     <li><a href="start.html" class="start"> <img src="..//hmtl/main_index/hover/start.gif" width="116px" height="118px"> </a></li>
     <li><a href="fotos.html" class="fotos">Fotos</a></li>
     <li><a href="videos.html" class="videos">Videos</a></li>
     <li><a href="start.html" class="start">Start</a></li>
     <li><a href="start.html" class="start">Start</a></li>
     <li><a href="start.html" class="start">Start</a></li>
</ul>
 		
</div>

Klar, dass noch nicht fertig ... aber nicht mal Start zeigt er an ?

 

[mustermen]

Mhh habe ich mal wieder mist gemacht? Guck lieber hier nach:
http://de.selfhtml.org/css/layouts/navigationsleisten.htm#horizontal

 

[sverebom]

Warum die Bilder mit den Listenelemente verknüpfen?
Und ist die aufgefallen, dass du im CSS-Code "hmtl" und nicht "html" schreibst?

#nav { height: 59px  } 

#nav li { list-style-type: none;  display: inline-block }

#nav a { height: 59px; display: block; text-indent: -9999px; overflow: hidden } 

#nav .start a { width: 116px; background: url(..//hmtl/main_index/hover/start.gif) }
 
#nav .fotos a { width: 118px; background: url(..//hmtl/main_index/hover/fotos.gif) }

#nav a:hover, #nav a:focus { background-position: 0px -59px }

 

[belafarinrod91]

Funktioniert leider immer noch nicht :-/

#nav { height: 59px }

#nav li { list-style-type: none; display: inline-block }

#nav a { height: 59px; display: block; text-indent: -9999px; overflow: hidden }

#nav .start a { width: 116px; background: url(..//hmtl/main_index/hover/start.gif) }

#nav .fotos a { width: 118px; background: url(..//hmtl/main_index/hover/fotos.gif) }

#nav a:hover, #nav a:focus { background-position: 0px -59px }

 <ul id="nav">
     <li><a href="start.html" class="start"> <img src="hmtl/main_index/hover/start.gif" width="116px" height="118px"> </a></li>
     <li><a href="fotos.html" class="fotos"> <img src="../hmtl/main_index/hover/start.gif" width="116px" height="118px"></a></li>
     <li><a href="videos.html" class="videos">Videos</a></li>
     <li><a href="start.html" class="start">Start</a></li>
     <li><a href="start.html" class="start">Start</a></li>
     <li><a href="start.html" class="start">Start</a></li>
</ul>

Bitte um weitere Hilfe ?

 

[Tumbleweed]

hmtl/main_index/hover/start.gif

Funktioniert als Pfad nicht (Datei liegt dort nicht).

main_index/hover/start.gif

hingegen funktioniert. Der andere Pfad mit ../ funktioniert auch.

Dann schmeiß mal den text-indent: -9999 Wert auf #nav a raus. Ich würde dir übrigens Firebug ans Herz legen.

 

[belafarinrod91]

Okay, werde ich dann später ausprobieren

Danke .... Firebug ?

 

[Ciraxis]

http://getfirebug.com/

 

[Tumbleweed]

Falls du Chrome installiert hast, da ist sowas wie Firebug auch von Hause aus integriert. Ansonsten ist Firebug (für Firefox) ein unverzichtbarer Helfer. Du kannst (unter anderem) mit "inspect element" die einzelnen Bereiche deiner Website untersuchen und dabei wird dir z.B. auch angezeigt, ob Dateien von den von dir gesetzten Pfaden überhaupt geladen werden können.
Ein weiterer Vorteil ist, dass du Veränderungen an deiner Seite (sowohl HTML als auch CSS) live durchführen kannst, um direkt die Auswirkungen zu sehen. Dadurch musst du nicht ständig in der Originaldatei der Website rumfummeln, sondern trägst dort nur noch die tatsächlich gewünschten Änderungen ein.

Gewöhn dich besser daran - es wird dir unheimlich viele Probleme ersparen.

 

[belafarinrod91]

Hi Leute,

Also langsam bin ich echt am verzweifeln ... entweder bin ich echt einfach nur sau doof oder echt bescheuert :-/

Für den Tipp mit Firebug, vielen Dank, kannte das schon aus Safari, das auch ein Entwickler-Modul hat.

So nun zum alten Problem, mittlerweile wird die schöne Navigations-Leiste immerhin in allen gängigen Browsern dargestellt, aber der Hover will nicht ... :-/

Quellcode : HTML

 <ul id="nav">
	 <li><img src="main_index/menu_rechts.gif" width="110px" height="59px"></li>    
     <li><a href="start.html" class="start"> 	<img src="main_index/hover/start.gif" width="116px" height="118px"> </a></li>
     <li><a href="fotos.html" class="fotos"> 	<img src="main_index/hover/fotos.gif" width="118px" height="118px"></a></li>
     <li><a href="videos.html" class="videos">	<img src="main_index/hover/videos.gif" width="133px" height="118px"></a></li>
     <li><a href="start.html" class="start">	<img src="main_index/hover/uberuns.gif" width="170px" height="118px"></a></li>
     <li><a href="start.html" class="start">	<img src="main_index/hover/gb.gif" width="197px" height="118px"></a></li>
     <li><img src="main_index/menu_links.gif" width="156px" height="59px"></li>
</ul>

Quellcode : CSS 1

#nav { height: 59px }

#nav li { list-style-type: none; display: inline-block }

#nav a { height: 59px; display: block; overflow: hidden }

#nav .start a { width: 116px; background: url(main_index/hover/start.gif) }

#nav .fotos a { width: 118px; background: url(main_index/hover/fotos.gif) }

#nav a:hover, #nav a:focus { background-position: 0px -59px }

Quellcode : CSS 2

#nav {
height: 59px;
width: 1000px;
}
#nav li {
list-style-type: none;
float: left;
height: 59px;
display: block;
overflow: hidden;
}
#nav li:hover, #nav li:focus {
backgroundposition: 0px 59px;
}
.start {
background: url(main_index/hover/start.gif);
width: 116px;
}
.fotos {
background: url(main_index/hover/fotos.gif);
width: 118px;
}

Hab alles ausprobiert ... auch das "-" bei background-position verändert :-/

Ich weiß sicherlich, dass es ein trivialer Fehler ist - aber ich find´ ihn nicht :-@ ...

PS : Wundert euch nicht, wenn ich mir mit meinen Ergebnissen sehr lange Zeit lasse - ist nur ein kleines Nebenhobby, bei dem ich nicht wirklich viel Zeit auf einmal investieren will ...

Vielen Dank für eure Hilfe !

Update : Seite wie vorher www.geo-exploring.de/hmtl/index.html <- da ist das erste "hmtl" beabsichtigt

 

[Crizzo]

Lies dich mal hier durch und versuche es umzusetzen: http://xhtmlforum.de/40267-faq-h-ufig-gestellte-fragen-und.html#faq15

 

[Belee]

Da ist sehr viel unnötiges drin sowie auch falsch aber das weisst du ja da es nicht funktioniert.

Mach das mal so...

<style type="text/css">
<!--
.astart {
 background: url(start.gif) no-repeat;
 display: block;
 height: 59px;
 width: 116px;
}
a.astart:hover{
 background: url(start.gif) 0px 59px;
 overflow: hidden;
}
-->
</style>
 
<ul>
 <li><a href="#" class="astart"></a></li>
</ul>

Das ist jetzt nur eine Demo, um die Navi horizontal anzuzeigen weisst du ja wie es geht.
Geht natürlich für alle Punkte auch kürzer, heisst, du musst nicht für jeden Punkt jeweils auch die Klassen erstellen sondern nur eine, dazu musst du aber dann alle Grafiken in einem "vertikal-untereinander" "Sprite" packen. Dann brauchts du nur noch die Positions-Klassen. Suche mal in Google danach.

 

[belafarinrod91]

Problem wurde beseitigt zwar ziemlich umständlich ... aber immerhin ! Vielen Dank !!!