|
|||
CSS Navigationsproblem
Hallo zusammen,
ich baue gerade eine auf CSS basierende Navigation und haben damit einige Probleme. Hier mal mein vorhandener Code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Navigation</title> <style type="text/css"> body { color: black; background-color: #FFFFAA; font-family: arial, helvetica, serif; font-size: 78%; } div#Rahmen { width: auto; padding: 0.8em; border: 0px solid black; background-color: transparent; } * html div#Rahmen { /* Korrektur fuer IE 5.x */ width: 69.7em; w\idth: 68.1em; } div#Rahmen div { clear: left; } ul#Navigation { margin: 0; padding: 0; text-align: center; } ul#Navigation li { list-style: none; float: left; /* ohne width - nach CSS 2.1 erlaubt */ position: relative; margin: 0.4em; padding: 0; } * html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */ margin-bottom: -0.4em; } *:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */ margin-bottom: -0.1em; } ul#Navigation li ul { margin: 0; padding: 0; position: absolute; top: 1.6em; left: -0.4em; display: none; /* Unternavigation ausblenden */ } * html ul#Navigation li ul { /* Korrektur fuer IE 5.x */ left: -1.5em; lef\t: -0.4em; } *:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */ background-color:transparent; padding-bottom:0.4em; } ul#Navigation li:hover ul { display: block; /* Unternavigation in modernen Browsern einblenden */ } ul#Navigation li ul li { float: none; display: block; margin-bottom: 0.2em; } ul#Navigation a, ul#Navigation span { display: block; width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */ padding: 0.2em 1em; text-decoration: none; font-weight: bold; border: 0px solid black; color: maroon; background-color: #DDDDFA; } * html ul#Navigation a, * html ul#Navigation span { width: 12.6em; /* Breite nach altem MS-Boxmodell fuer IE 5.x */ w\idth: 10.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */ } } </style> <script type="text/javascript"> if(window.navigator.systemLanguage && !window.navigator.language) { function hoverIE() { var LI = document.getElementById("Navigation").firstChild; do { if (sucheUL(LI.firstChild)) { LI.onmouseover=einblenden; LI.onmouseout=ausblenden; } LI = LI.nextSibling; } while(LI); } function sucheUL(UL) { do { if(UL) UL = UL.nextSibling; if(UL && UL.nodeName == "UL") return UL; } while(UL); return false; } function einblenden() { var UL = sucheUL(this.firstChild); UL.style.display = "block"; UL.style.backgroundColor = "transparent"; } function ausblenden() { sucheUL(this.firstChild).style.display = "none"; } window.onload=hoverIE; } </script> </head> <body> <div id="Rahmen"><ul id="Navigation"> <li><a href="#Beispiel">Aktuelles Intern</a> <ul> <li><a href="#Beispiel">Aktuelles 1</a></li> <li><a href="#Beispiel">Aktuelles 2</a></li> <li><a href="#Beispiel">Aktuelles 3</a></li> <li><a href="#Beispiel">Aktuelles 4</a></li> </ul> </li> <li><a href="#Beispiel">News</a></li> <li><a href="#Beispiel">Kursprogramm</a> <ul> <li><a href="#Beispiel">Rubrik 1</a> <ul> <li><a href="#Beispiel">Rubrik 1 Kurs 1</a></li> <li><a href="#Beispiel">Rubrik 1 Kurs 2</a></li> </ul> </li> <li><a href="#Beispiel">Rubrik 2</a> <ul> <li><a href="#Beispiel">Rubrik 2 Kurs 1</a></li> <li><a href="#Beispiel">Rubrik 2 Kurs 2</a></li> </ul> </li> </ul> </li> <li><a href="#Beispiel">Veranstaltungen</a> <ul> <li><a href="#Beispiel">Veranstaltungskalender 1</a></li> <li><a href="#Beispiel">Veranstaltungskalender 2</a></li> </ul> </li> <li><a href="#Beispiel">Informationen</a> <ul> <li><a href="#Beispiel">2001</a> <ul> <li><a href="#Beispiel">2001 - Intern</a></li> <li><a href="#Beispiel">2001 - Extern</a></li> </ul> </li> <li><a href="#Beispiel">2002</a> <ul> <li><a href="#Beispiel">2002 - Intern</a></li> <li><a href="#Beispiel">2002 - Extern</a></li> </ul> </li> <li><a href="#Beispiel">2003</a> <ul> <li><a href="#Beispiel">2003 - Intern</a></li> <li><a href="#Beispiel">2003 - Extern</a></li> </ul> </li> <li><a href="#Beispiel">2004</a></li> </ul> </li> <li><a href="#Beispiel">Fragen & Infos</a></li> <li><a href="#Beispiel">Guestbook</a></li> <li><a href="#Beispiel">Rechtliches</a></li> </ul> <div></div></div> </body> </html> Das ganze sollte eigentlich so aussehen: Aktuelles Intern (Hauptmenüpunkt - kein Link) - Aktuelles 1 (Link) - Aktuelles 2 (Link) - Aktuelles 3 (Link) - Aktuelles 4 (Link) News (Hauptmenüpunkt - direkter Link) Kursprogramm (Hauptmenüpunkt - kein Link) - Rubrik 1 (Untermenüpunkt - kein Link) - - Rubrik 1 - Kurs 1 (Link) - - Rubrik 1 - Kurs 2 (Link) - Rubrik 2 (Untermenüpunkt - kein Link) - - Rubrik 2 - Kurs 1 (Link) - - Rubrik 2 - Kurs 2 (Link) Veranstaltungen (Hauptmenüpunkt - kein Link) - Veranstaltungskalender 1 (Link) - Veranstaltungekalender 2 (Link) Informationen (Hauptmenüpunkt - kein Link) - 2000 (Untermenüpunkt - kein Link) - - Informationen 2000 - 1 (Link) - - Informationen 2000 - 2 (Link) - 2001 (Untermenüpunkt - kein Link) - - Infromationen 2001 - 1 (Link) - - Informationen 2001 - 2 (Link) - 2002 (Untermenüpunkt - kein Link) - - Informationen 2002 - 1 (Link) - - Informationen 2002 - 2 (Link) - 2003 (Untermenüpunkt - kein Link) - - Informationen 2003 - 1 (Link) - - Informationen 2003 - 2 (Link) - 2005 (Link) Fragen & Infos (Hauptmenüpunkt - direkter Link) Guestbook (Hauptmenüpunkt - direkter Link) Rechtliches (Hauptmenüpunkt - direkter Link) Ich komme damit leider überhaupt nicht weiter und kämpfe mich schon seit 2 Tagen durch Tutorials und die unterschiedlichsten Internetseiten. Deswegen hoffe ich, dass mir hier jemand helfen kann. Wäre wirklich schön. Sollte mit den meissten Browsern ohne Hilfe von Javascript laufen und W3 Valide sein. |
Sponsored Links |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 12:25 |
Einbindung von frei erhältlichen Scripten - CSS Problem | DonL | CSS | 1 | 22.01.2011 16:09 |
MYspace mehr als nur CSS oder ? | Vinceone | CSS | 0 | 12.07.2007 02:21 |
Eric Meyer's CSS | Petty | Ressourcen | 0 | 21.11.2005 08:18 |
Mozilla ignoriert externes css | DarkWanderer | CSS | 9 | 22.09.2005 11:39 |