CSS Hover

[Paul]

Hallo.

Habe ein Problem mit meinem CSS.Hover Menü.

  
#nav_home {  
		height:50px;  
		width:80px;  
		margin-left:10px;  
		display:inline;  
	}  
	  
		  
		#nav_home a, a:visited {  
			text-decoration:inherit;  
			color:inherit;  
		}  
		  
		#nav_home a:hover {  
			text-decoration:inherit;  
			color:inherit;  
			background-image:url(bilder/navhv.png);  
		}  

Sprich wenn man über den Link:
<a href="#"><img src="..." border=0/></a> mit der Maus geht soll dann das Hintergrundbild des Container verändert werden. Dies klappt nur teilweise und der neue Hintergrund wird nur zu einem kleinen teil eingeblendet.
Wo liegt da der Fehler?

Grüße

[apsel]

Om nah hoo pez nyeetz, Paul!

  #nav_home a, a:visited {
  	text-decoration:inherit;
  	color:inherit;
  }
  
  #nav_home a:hover {
  	text-decoration:inherit;
  	color:inherit;
  	background-image:url(bilder/navhv.png);
  }

[/code]

gibt es denn vorher kein Hintergrundbild?

#nav_home a selektiert alle Links innerhalb #nav_home, a:visited alle, nicht nur die im #nav_home (auch wenn das zur Lösung nichts beiträgt).

Ansonsten wäre ein Online-Beispiel sinnvoll, sowie die Verwendung eines Entwicklerwerzeugs wie Firebug oder Dragonfly.

Ebenso bietet sich möglicherweise die Verwendung von sprites an.

Matthias

[Paul]

Om nah hoo pez nyeetz, Paul!

  #nav\_home a, a:visited {  
  	text-decoration:inherit;  
  	color:inherit;  
  }  
    
  #nav\_home a:hover {  
  	text-decoration:inherit;  
  	color:inherit;  
  	background-image:url(bilder/navhv.png);  
  }  

[/code]

gibt es denn vorher kein Hintergrundbild?

#nav_home a selektiert alle Links innerhalb #nav_home, a:visited alle, nicht nur die im #nav_home (auch wenn das zur Lösung nichts beiträgt).

Ansonsten wäre ein Online-Beispiel sinnvoll, sowie die Verwendung eines Entwicklerwerzeugs wie Firebug oder Dragonfly.

Ebenso bietet sich möglicherweise die Verwendung von sprites an.

Matthias

Hallo Matthias,

hier: www.mwg-clan.de/self

Wenn man über "Startseite" geht erscheint zwar der neue Hintergrund, aber nur zum teil.

Grüße

[apsel]

Om nah hoo pez nyeetz, Paul!

Hinweise zum Forum: bitte zitiere sinnvoll, nur den Teil, auf den du antwortest, nicht alles.

Deine Seite hat eine ungeeignete Struktur (div-Suppe) weil du Elemente nicht entsprechend ihrer Semantik verwendest.

Du möchtest ein Layout mit Header, content und footer. Verwende die Links und Hinweise aus diesem Thread.

Deine Navigation ist eine Liste von Links, also

<ul id="nav">   <li><a ...>...</a></li>   <li><a ...>...</a></li>   <li><a ...>...</a></li> </ul>

Sinnvolle Gestaltungsmöglichkeiten findest du ebenfalls bei [ref:self812;css/layouts/navigationsleisten.htm@title=Self-html].

Die Gestaltung der Hintergründe solltest du, wie schon verlinkt, über Sprites abwickeln.

Damit Suchmaschinen deine Linkbezeichnungen finden, solltest du diese nicht unbedingt in Grafiken verstecken, wenn aber doch, dann das alt-Attribut (<img alt="Startseite" ...> verwenden. Das alt-Attribut ist übrigens für valides HTML obligatorisch!

Die Ursache für den Streifen ist übrigens, dass die Hintergrundfarbe "unter" der Grafik angezeigt wird, die Grafik also den Hintergrund überlagert.

Viel zu tun!

Beginne auf einem soliden Fundament, sonst wird alles andere nur sinnlose Fummelei.

Matthias

[Beat]

Habe ein Problem mit meinem CSS.Hover Menü.

#nav_home {
height:50px;
width:80px;
margin-left:10px;
display:inline;
}

Es ist überflüssig, einem inline Element height und width zuweisen zu wollen.

  #nav_home a, a:visited {  
  	text-decoration:inherit;  
  	color:inherit;  
  }  
  #nav_home a:hover {  
  	text-decoration:inherit;  
  	color:inherit;  
  	background-image:url(bilder/navhv.png);  

}

>   
> Sprich wenn man über den Link:  
> `<a href="#"><img src="..." border=0/></a>`{:.language-html} mit der Maus geht soll dann das Hintergrundbild des Container verändert werden. Dies klappt nur teilweise und der neue Hintergrund wird nur zu einem kleinen teil eingeblendet.  
> Wo liegt da der Fehler?  
  
Ersetze dein img durch Plaintext und der mögliche Fehler lässt sich einkreisen.  
  
mfg Beat

-- 
Aktuell:  

><o(((°>           ><o(((°>  

   <°)))o><                     ><o(((°>o  
Der Valigator leibt diese Fische

[Beat]

Habe ein Problem mit meinem CSS.Hover Menü.

#nav_home {
height:50px;
width:80px;
margin-left:10px;
display:inline;
}

Es ist überflüssig, einem inline Element height und width zuweisen zu wollen.

  #nav_home a, a:visited {  
  	text-decoration:inherit;  
  	color:inherit;  
  }  
  #nav_home a:hover {  
  	text-decoration:inherit;  
  	color:inherit;  
  	background-image:url(bilder/navhv.png);  

  }  

> >   
> > Sprich wenn man über den Link:  
> > `<a href="#"><img src="..." border=0/></a>`{:.language-html} mit der Maus geht soll dann das Hintergrundbild des Container verändert werden. Dies klappt nur teilweise und der neue Hintergrund wird nur zu einem kleinen teil eingeblendet.  
> > Wo liegt da der Fehler?  
>   
> Ersetze dein img durch Plaintext und der mögliche Fehler lässt sich einkreisen.  
>   
> mfg Beat  

mfg Beat

-- 
Aktuell:  
[Die NATO](http://edvan.fadeout.ch/ref/?customerId=30&channelId=43&broadcastId=252&wide=)  
Woran ich arbeite:  
[X-Torah](http://www.elcappuccino.ch/cgi/tok.pl?extern=1-pub-com3306-1)  
Plädoyer für eine alte Mystik  
und Vers-Einteilung  
in der Torah und der Apokalypse  
Beat Stoecklin 2008  
                 /|  
  <°)))o><   \_\_ / |    /|  
            /\_\_\ \_|\_\_\_/ |     ><o(((°>  
           OvVVvO    \_\_ |        ><o(((°>  
<°)))o><  /v    v\\\/  \|  
 <°)))o>< \^    ^/\_/\_         ><o(((°>  
           \^^^^/\_\_\_/  
            ----            ><o(((°>  

><o(((°>           ><o(((°>  

   <°)))o><                     ><o(((°>o  
Der Valigator leibt diese Fische