CSS-Menü funktioniert nur teilweise

[dennis3484]

Hallo,

wir haben für ein Projekt in der Uni eine kleine Webseite gebaut. Leider macht uns das Text-Menü einige Schwierigkeiten. Sobald die Elemente auf der selben Höhe sind, lässt sich nur noch der letzte Eintrag klicken. Dieses Problem gibt es nur im FF bzw. Opera. Im Internet Explorer funktioniert es wunderbar.

Weiß jemand, wo das Problem liegt? Die Webseite findet ihr auf folgender Seite: http://www-stud.fh-fulda.de/~fdai2262/fh/index.htm


Vielen Dank,
Dennis


index.htm Code:

<div id="home"><a href="index.htm">Home</a></div>
<div id="cocktails"><a href="cocktails.htm">Cocktails</a></div>
<div id="mixen"><a href="mixen.htm">Mixen</a></div>
<div id="kontakt"><a href="kontakt.htm">Kontakt</a></div>

style1.css Code:

#home 			{ position: absolute; left: 0; top: 130px; width: 407px; text-align: right; }
#cocktails 	{ position: absolute; left: 0; top: 130px; width: 497px; text-align: right; }
#mixen 			{ position: absolute; left: 0; top: 130px; width: 567px; text-align: right; }
#kontakt 		{ position: absolute; left: 0; top: 130px; width: 652px; text-align: right; }

style2.css Code:

#home 			{ position: absolute; text-align: right; 
								padding: 10px;
								margin: -10px 0 0 -10px; }
								
#cocktails 	{ position: absolute; text-align: right;
								padding: 10px;
								margin: -10px 0 0 -10px; }
								
#mixen 			{ position: absolute; text-align: right;
								padding: 10px;
								margin: -20px 0 0 -10px; }
								
#kontakt 		{ position: absolute; text-align: right;
								padding: 10px;
								margin: 20px 0 0 -10px; }

 

[PuppetMaster]

Mit der Firefox-Erweiterung Web Developer kannst du sehen, dass sich deine Div-Blöcke überlagern: Der Block "cocktails" mit left: 0; top: 130px; width: 497px; liegt so über dem Block "home" mit left: 0; top: 130px; width: 407px;, deshalb ist der Link darunter nicht mehr anklickbar. Entweder änderst du die Navigation so, dass die Blöcke nebeneinander liegen und nicht alle bei left: 0 beginnen, oder du fügst jedem einen z-index zu, oder du änderst schlicht im HTML die Reihenfolge...

<div id="kontakt"><a href="kontakt.htm">Kontakt</a></div>
<div id="mixen"><a href="mixen.htm">Mixen</a></div>
<div id="cocktails"><a href="cocktails.htm">Cocktails</a></div>
<div id="home"><a href="index.htm">Home</a></div>

 

[Scheuch]

Vielleicht ist das hier eine Alternative.

 

[dennis3484]

Danke für die Tipps!

Ich weiß auch gar nicht, warum ich dieses Menü nicht von Anfang an so wie die Bilder gemacht habe...