|
|||
Dropdown Menü
Guten Tag zusammen,
ich sitze nun seid 2 Wochen an einem Dropdown Menü was fast nur aus Css und Images besteht. Zunächst schien alles im FF super zu funktionieren. Bis ich den IE mal geöffnet hab denn da geht gar nix. Im IE erscheint zwar das Menü aber es öffnet sich kein Submenü. Kann mir eventuell jemand sagen woran das liegt? Php Code PHP-Code:
Code:
#navi { width: 930px; padding: 0 0px; float: left; } #navi ul { float: left; list-style-type: none; } #navi ul ul { float: left; width: 140px; list-style-type: none; position: absolute; z-index: 2; display: none; } #navi a { text-decoration: none; display: block; text-align: center; } #navi li {float:left; } #navi li ul { display: none; position: absolute; margin-top:59px; } #navi li:hover ul { display:block;} * html #menu ul li { float: left; width: 100%; } *+ html #menu ul li { float: left; width: 100%; } *html body { behavior: url(csshover3-source.htc); font-size: 100%; } *html #menu ul li a { height: 1%; } a.user:link, a.user:visited { background-image: url(../navi/Bilder/rolling_01.jpg); width:102px; height:59px; } a.user:hover { background-image: url(../navi/Bilder/rolling_01_hover1.jpg); width:102px; height:59px; } a.button2:link, a.button2:visited { background-image: url(../navi/Bilder/rolling_03.jpg); width:66px; height:59px; float:left; } a.button2:hover { background-image: url(../navi/Bilder/rolling_03_hover10.jpg); width:66px; height:59px; } a.button3:link, a.button3:visited { background-image: url(../navi/Bilder/rolling_04.jpg); width:65px; height:59px; float:left; } a.button3:hover { background-image: url(../navi/Bilder/rolling_04_hover1.jpg); width:65px; height:59px; } a.button4:link, a.button4:visited { background-image: url(../navi/Bilder/rolling_06.jpg); width:105px; height:59px; float:left; } a.button4:hover { background-image: url(../navi/Bilder/rolling_06_hover1.jpg); width:105px; height:59px; } a.button5:link, a.button5:visited { background-image: url(../navi/Bilder/rolling_05.jpg); width:109px; height:59px; float:left; } a.button5:hover { background-image: url(../navi/Bilder/rolling_05_hover1.jpg); width:109px; height:59px; } a.button7:link, a.button7:visited { background-image: url(../navi/Bilder/rolling_10.jpg); width:115px; height:59px; float:left; } a.button7:hover { background-image: url(../navi/Bilder/rolling_10_hover1.jpg); width:115px; height:59px; } a.button6:link, a.button6:visited { background-image: url(../navi/Bilder/rolling_07.jpg); width:69px; height:59px; float:left; } a.button6:hover { background-image: url(../navi/Bilder/rolling_07_hover1.jpg); width:69px; height:59px; } a.button8:link, a.button8:visited { background-image: url(../navi/Bilder/rolling_11.jpg); width:76px; height:59px; float:left; } a.button8:hover { background-image: url(../navi/Bilder/rolling_11_hover1.jpg); width:76px; height:59px; } a.button1_1:link, a.button1_1:visited { background-image: url(../navi/Bilder/rolling_02_1.jpg); width:150px; height:20px; margin-left:26px; } a.button1_1:hover { background-image: url(../navi/Bilder/rolling_02_hover1.jpg); width:150px; height:20px; margin-left:26px; } a.button1_2:link, a.button1_2:visited { background-image: url(../navi/Bilder/rolling_02_2.jpg); width:150px; height:20px; margin-left:26px; } a.button1_2:hover { background-image: url(../navi/Bilder/rolling_02_hover2.jpg); width:150px; height:20px; margin-left:26px; } a.button1_3:link, a.button1_3:visited { background-image: url(../navi/Bilder/rolling_02_3.jpg); width:150px; height:20px; margin-left:26px; } a.button1_3:hover { background-image: url(../navi/Bilder/rolling_02_hover3.jpg); width:150px; height:20px; margin-left:26px; } a.button1_4:link, a.button1_4:visited { background-image: url(../navi/Bilder/rolling_02_4.jpg); width:150px; height:20px; margin-left:26px; } a.button1_4:hover { background-image: url(../navi/Bilder/rolling_02_hover4.jpg); width:150px; height:20px; margin-left:26px; } a.button2_1:link, a.button2_1:visited { background-image: url(../navi/Bilder/rolling_03_1.jpg); width:150px; height:20px; } a.button2_1:hover { background-image: url(../navi/Bilder/rolling_03_hover1.jpg); width:150px; height:20px; } a.button2_2:link, a.button2_2:visited { background-image: url(../navi/Bilder/rolling_03_2.jpg); width:150px; height:20px; } a.button2_2:hover { background-image: url(../navi/Bilder/rolling_03_hover2.jpg); width:150px; height:20px; } a.button2_3:link, a.button2_3:visited { background-image: url(../navi/Bilder/rolling_03_3.jpg); width:150px; height:20px; } a.button2_3:hover { background-image: url(../navi/Bilder/rolling_03_hover3.jpg); width:150px; height:20px; } a.button2_4:link, a.button2_4:visited { background-image: url(../navi/Bilder/rolling_03_4.jpg); width:150px; height:20px; } a.button2_4:hover { background-image: url(../navi/Bilder/rolling_03_hover4.jpg); width:150px; height:20px; } a.button2_5:link, a.button2_5:visited { background-image: url(../navi/Bilder/rolling_03_5.jpg); width:150px; height:20px; } a.button2_5:hover { background-image: url(../navi/Bilder/rolling_03_hover5.jpg); width:150px; height:20px; } a.button3_1:link, a.button3_1:visited { background-image: url(../navi/Bilder/rolling_04_1.jpg); width:200px; height:32px; } a.button3_2:link, a.button3_2:visited { background-image: url(../navi/Bilder/rolling_04_2.jpg); width:200px; height:32px; } a.button4_1:link, a.button4_1:visited { background-image: url(../navi/Bilder/rolling_06_1.jpg); width:200px; height:32px; } a.button4_2:link, a.button4_2:visited { background-image: url(../navi/Bilder/rolling_06_2.jpg); width:200px; height:32px; } a.button4_3:link, a.button4_3:visited { background-image: url(../navi/Bilder/rolling_06_4.jpg); width:200px; height:32px; } a.button4_4:link, a.button4_4:visited { background-image: url(../navi/Bilder/rolling_06_3.jpg); width:200px; height:32px; } a.button5_1:link, a.button5_1:visited { background-image: url(../navi/Bilder/rolling_05_1.jpg); width:200px; height:32px; } a.button5_2:link, a.button5_2:visited { background-image: url(../navi/Bilder/rolling_05_2.jpg); width:200px; height:32px; } a.button6_1:link, a.button6_1:visited { background-image: url(../navi/Bilder/rolling_07_1.jpg); width:200px; height:32px; } a.button6_2:link, a.button6_2:visited { background-image: url(../navi/Bilder/rolling_07_2.jpg); width:200px; height:32px; } a.button7_1:link, a.button7_1:visited { background-image: url(../navi/Bilder/rolling_10_1.jpg); width:200px; height:32px; } a.button7_2:link, a.button7_2:visited { background-image: url(../navi/Bilder/rolling_10_2.jpg); width:200px; height:32px; } a.button7_3:link, a.button7_3:visited { background-image: url(../navi/Bilder/rolling_10_3.jpg); width:200px; height:32px; } a.button7_4:link, a.button7_4:visited { background-image: url(../navi/Bilder/rolling_10_4.jpg); width:200px; height:32px; } a.button8_1:link, a.button8_1:visited { background-image: url(../navi/Bilder/rolling_11_1.jpg); width:200px; height:32px; } a.button8_2:link, a.button8_2:visited { background-image: url(../navi/Bilder/rolling_11_2.jpg); width:200px; height:32px; } a.button8_3:link, a.button8_3:visited { background-image: url(../navi/Bilder/rolling_11_3.jpg); width:200px; height:32px; } a.button8_4:link, a.button8_4:visited { background-image: url(../navi/Bilder/rolling_11_4.jpg); width:200px; height:32px; } a.button8_5:link, a.button8_5:visited { background-image: url(../navi/Bilder/rolling_11_5.jpg); width:200px; height:32px; } a.button8_6:link, a.button8_6:visited { background-image: url(../navi/Bilder/rolling_11_6.jpg); width:200px; height:32px; } a.button8_7:link, a.button8_7:visited { background-image: url(../navi/Bilder/rolling_11_7.jpg); width:200px; height:32px; } a.button8_8:link, a.button8_8:visited { background-image: url(../navi/Bilder/rolling_11_8.jpg); width:200px; height:32px; } a.button8_9:link, a.button8_9:visited { background-image: url(../navi/Bilder/rolling_11_9.jpg); width:200px; height:32px; } a.button8_10:link, a.button8_10:visited { background-image: url(../navi/Bilder/rolling_11_10.jpg); width:200px; height:32px; } a.logout:link, a.logout:visited { background-image: url(../navi/Bilder/logout.jpg); width:72px; height:59px; float:left; } a.logout:hover { background-image: url(../navi/Bilder/logout_hover1.jpg); width:72px; height:59px; } a.timer:link, a.timer:visited { background-image:url(../navi/Bilder/timer.jpg); width:151px; height:59px; } |
Sponsored Links |
|
|||
Oh Sorry dachte hab ich mit rein geschrieben. www.ligascript.net - Create your own league Aber nicht wunder der Banner ist im FF falsch und das Subnavi ist nicht richtig eingestellt und auch noch nicht komplett gewechselt. Man muss sich einloggen um es zu sehen. Test pw:test
Geändert von Bistlie (30.03.2010 um 16:52 Uhr) |
|
||||
EDIT: Ach so, das mit dem Einloggen hast du aber erst nachträglich geschrieben ich schau's mir nochmal an..
Ein erster guter Schritt ist es sicher mal, die Seiten zu validieren. W3C CSS Validator results for http://test.bdg-gamers.de/index.php/de/news/index (CSS level 2.1) Im CSS hast du an die 100 Fehler, und auch die HTML-Seite selbst wirft im Validator an die 50 Fehler aus: [Invalid] Markup Validation of http://test.bdg-gamers.de/index.php/de/news/index - W3C Markup Validator Und: ich habe die Seite zwar im FF geöffnet, aber da tut sich nur unter Gästebuch (nach einem Klick erscheint ein seeeehr winziges Menü) und unter Hilfe und Support etwas. Hast du dir schon mal Lösungen wie suckerfish angeschaut? DIVs in LIs ist z.B. keine gute Lösung, ich würde beim UL > LI > UL > LI...-Schema bleiben. In deinem Fall ist es wahrscheinlich besser, eine vorgefertigte Lösung zu verwenden. Es gibt mittlerweile sehr gute CSS-Lösungen, z.B. hier: Stu Nicholls | CSSplay | CSS only menus. Greets, scherii |
|
||||
Ok, ich bin jetzt bei der richtigen Navigation gelandet, habe mir das mal kurz angeschaut. Vermutlich verträgt sich li:hover nicht mit dem IE, versuch mal die Navi so umzustellen, dass sie dem HTML von Stu Nicholls | CSSplay | Validating drop down cross-browser menu entspricht. Da kannst du einiges "abkupfern".
Für konkretere Vorschläge ist ein Test-Case nötig, in dem nur das drin ist, was mit dem Problem zu tun hat (auch im CSS). Sonst können wir nur vermuten. |
|
|||
Boar wie blöd das ist wenn ich es alleine in eine Datei mache muss ich einiges ändern das es überhaupt angezeigt wird.
http://test.bdg-gamers.de/navi.php das Submenü ist verschoben warum auch immer. |
|
||||
Zitat:
PS: Es gibt hier übrigens auch eine Editierfunktion EDIT: Unbedingt den Doctype einfügen! Warum, das siehst du hier: http://www.oliverbertschinger.ch/webdesign/doctype/ Ich empfehle diesen: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Bitte validiere die Seiten und CSS-Dateien, bevor du hier wieder schreibst - dann können diese Fehler ausgeschlossen werden. Geändert von scherii (30.03.2010 um 18:32 Uhr) |
Sponsored Links |
|
|||
Also hab jetzt den Doctype eingefügt.
Danach hab ich die Seite nach Fehlern Prüfen lassen. Er hat 2 Fehler gefunden. Die 2 Fehler sollten aber keine sein, die Punkte die er als Fehler angibt sind dazu da das die Navi im IE V6 und Tiefer Funktioniert. Soll ich die Punkte trotzdem raus nehmen oder drin lassen? EDIT: Ich glaub ich träume Die Navi Funtioniert jetzt im IE. Lag das wirklich am fehlendem Docetype? Auf jeden fall Bekommst schon mal ein DICKES DANKE von mir. EDIT2: Komando zurück. Ich habe Doktype im anderen Script auch eingefügt da gehts trotzdem nich. Geändert von Bistlie (30.03.2010 um 19:08 Uhr) |
Sponsored Links |
Stichwörter |
doctype |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS Dropdown Menü: Hover-Effekt auch wenn Maus im Untermenü ist | Sp33dy G0nz4l3s | CSS | 2 | 12.06.2010 18:38 |
Darstellungsproblem | flohpapa | CSS | 3 | 16.12.2009 09:55 |
DropDown Menü verschwindet | andre-ne | CSS | 2 | 18.11.2009 11:44 |
dropdown menü einbauen | PatrickM | CSS | 6 | 07.01.2008 17:13 |
Mysteriöses in CSS Dropdown Menü | ph!L | CSS | 3 | 21.07.2006 13:31 |