Hallo,
ich habe unter http://poure.eu/ eine Seite mit einer Dropdownnavigation erstellt. Im Firefox 3 und im Internetexplorer 7 funktioniert sie wunderbar.
Im Safari jedoch geht sie an den Seiten raus, weiß jemand Rat?
Mfg
Billbos 
Safari Dropdownfehler
-
Hallo,
ich habe unter http://poure.eu/ eine Seite mit einer Dropdownnavigation erstellt. Im Firefox 3 und im Internetexplorer 7 funktioniert sie wunderbar.
Im Safari jedoch geht sie an den Seiten raus, weiß jemand Rat?Mfg
Billbos
Du musst nach jedem Menüpunkt ein <p> setzen. Manche Browser nehmen es eben etwas genauer. Eigentlich ist es so wie es Safari macht richitg. Es ist nur ein Menü, die Richting davon ist aber nicht vorgeben <li> / </li> heißt nur das es Meünpunkte sind, die einfach nebeneinader liegen. <p> macht dagegen einen Absatz und sagt Dem Browser das er den nächsten Menüpunkt in eine neue Zeile nach dem vorherigen Menüpunkt erstellen soll.
Hier ich habe es dir mal überall gemach brauchst den Code nur noch mit deinem zu ersetzen.
HTML
Alles anzeigen<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Oswald von Nell-Breunig-Schule Rödermark</title> <link rel="stylesheet" type="text/css" href="http://poure.eu/css/layout.css" /> <link rel="stylesheet" type="text/css" href="http://poure.eu/css/navigation.css" /> <!-- Navigation-Top --> <script type="text/javascript"> /* <![CDATA[ */ startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById('navigation'); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; /* ]]> */ </script> <!-- Navigation-Top --> </head> <body> <!-- ************************************************************* Wrapper ************************************************************ --> <div id="wrapper"> <!-- ************************************************************* Header ************************************************************ --> <div id="header"> <div class="logo"><a href="http://poure.eu/index.html"></a></div> <div class="banner"><img src="http://poure.eu/rohdatein/flash/platzhalter/platzhalter.png" width="600" height="150" alt="Nell-Breuning-Schule Platzhalter" /></div> </div> <!-- ********************************************************** Navigation - Top *************************************************** --> <ul id="navigation"> <li><a href="index.html">Home</a></li> <li>Nell-Breuning <ul> <li><a href="#">Namensgeber </a></li><p> <li><a href="#">Schule </a></li><p> <li><a href="#">Leistungen </a></li><p> <li><a href="#">Entwicklung </a></li><p> </ul> </li> <li>Menüpunkt <ul> <li><a href="#">Unterpunkt </a></li><p> <li><a href="#">Unterpunkt </a></li><p> <li><a href="#">Unterpunkt </a></li><p> <li><a href="#">Unterpunkt </a></li><p> </ul> </li> <li>Menüpunkt <ul> <li><a href="#">Unterpunkt </a></li><p> <li><a href="#">Unterpunkt </a></li><p> <li><a href="#">Unterpunkt </a></li><p> <li><a href="#">Unterpunkt </a></li><p> </ul> </li> <li>Menüpunkt <ul> <li><a href="#">Unterpunkt </a></li><p> <li><a href="#">Unterpunkt </a></li><p> <li><a href="#">Unterpunkt </a></li><p> <li><a href="#">Unterpunkt </a></li><p> </ul> </li> </ul> <!-- ************************************************************* Navigation - Left *********************************************** --> <div id="navileft"></div> <!-- ************************************************************* Container ****************************************************** --> <div id="container"></div> <!-- ************************************************************* Footer ************************************************************ --> <div id="footer"></div> <!-- ********************************************************* Navigation - Bottom *************************************************** --> <div id="navibottom"></div> </div> <!-- END Wrapper --> </body> </html> -
Es wurde nicht mehr vertikal, sondern horizontal wiedergespeigelt, die Dropdownnavigation.
Ich habe das Problem unbemerkt selber gelöst aber danke für deine Antwort!Ich habe meine Antwort noch mal editiert jetzt müsste es bei dir klappen.
Aber wenn du es bereits gemerkt hast, okay.