Navigation Hover Problem

C

Cezka

Grünschnabel
Hallo zusammen ;)

Also vorab ich benutze Dreamweaver und habe es bislang im Firefox browser getestet.

Nun zu meinem Problem, ich möchte eine Navigation erstellen mit dem Hover effekt, bis jetzt hat auch alles gut geklappt bis auf den letzten Link in der Navi, wie ihr auf dem Bild sehen könnt, wird der Index sozusagen nach unten "geklappt" es taucht auch nur dann auf wenn ich mit der Maus, unter der Navigation bin, also da wo es aufklappt.
Bei Home etc. funktioniert alles super und diese werden normal rot hinterlegt.
b8ofilcq.jpg


HTML: 
<style type="text/css">
#Navi {
	background-image: url(Navibar%2011%20Rot%20Gr%C3%BCn.gif);
	height: 32px;
	width: 600px;
	margin-top: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #000;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
	margin-right: 1px;
	padding: 1px;
	margin-bottom: 1px;
}
#Navi li {
	display: inline;
	line-height: 32px;
	float: none;
	padding-right: 32px;
}
#Navi a  {
	margin-bottom: 10px;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	display: block;
	width: 90px;
	height: 32px;
	float: left;
	margin-left: 22px;
}
#Navi li a:hover {
	background-image: url(Navibar%2011%20Rot%20Gr%C3%BCn.gif);
	background-position: 0px -32px;
	float: left;

}
</style>
</head>

<body>

  <ul> 
  <div id="Navi">
    <li><a href="#">Home</a></li>
    
    <li><a href="#">News</a></li>
    <li><a href="#">Markt</a></li>
    
    <li><a href="#">Impressum</a></li>
    <li><a href="#">Index</a></li>
    
    </div>
  </ul>

</body>
</html>

Ich hoffe mal ihr versteht mein Problem und ich habe alles richtig gemacht mit dem Code einfügen ^^
Ich danke schonmal im vorraus für eure Hilfe.

mfg
Cezka
 
Zuletzt bearbeitet:
Hey Cezka,

ich weiß ehrlich gesagt nicht, warum das bei dir so komisch umbricht :-P Dein Code ist etwas wirr, deshalb hab ichs etwas minimalistischer neu geschrieben:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
	<head>
		<style type="text/css">
		<!--
		
		ul#Navi {
			float:left;
			width:600px;
			background:#ccc; }

		ul#Navi li {
			display:inline; }
			
		ul#Navi li a {
			float:left;
			width:90px;
			text-align:center;
			padding:5px; }
			
		ul#Navi li a:hover {
			background:#aaa; }
			
		//-->
		</style>
	</head>

	<body>

		<ul id="Navi"> 
			<li><a href="#">Home</a></li>
			<li><a href="#">News</a></li>
			<li><a href="#">Markt</a></li>    
			<li><a href="#">Impressum</a></li>
			<li><a href="#">Index</a></li>
		</ul>

	</body>
</html>

Unterschiede:

1. Doctype-Angabe (wichtig!)
2. Das div, was gleich nach dem ul-Element war, ist an der Stelle nicht zulässig (nach ul muss li folgen) und sowieso unnötig, da das ul selber schon ein Container ist. --> div-Suppe vermeiden!

Hoffe, das entspricht dem, was du haben wolltest.

Grüße,
Frezl
 
Okay Super dankeschön, mit deiner Methode klappt es ganz gut, wusste nicht das die Liste auch ein Container ist, dankeschön!
 
Hey Czeka,

naja, "Container" nenn ich das halt. Besser wäre zu sagen: Es gibt Elemente, die dürfen direkt im Body stehen, andere nicht. Ein <a> dürfte nicht allein im Body stehen, ein <ul> darf es aber. Man sollte eben drauf achten, dass man nicht unnötig viele Elemente ineinander verschachtelt. Damit sparst du dir einige Probleme beim Formatieren mit CSS.

Ob dein Code korrekt ist, kannst du mit dem HTML-Validator prüfen: http://validator.w3.org/

(Da wirst du auch sehen, dass mein Quelltext noch zwei andere Fehler hat ;-))

Grüße,
Frezl
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück