Sponsored Links |
|
||||
An Hand von Bildern können wir dir leider nicht helfen.
Kannst du mal "testbaren Code" online stellen bzw. hier posten. testbarer Code: inkl. komplettem CSS und HTML sowie möglichst wenig, was nicht zum Problem gehört (Inhalt, Werbebanner, usw.)
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
Sponsored Links |
|
|||
das problem hab ich lösen können.
das layout lag zunächst direkt in der html datei und es wurde noch eine externe css importiert, bei der es einen li { ... } gab, in dem der text auf -20px verschoben wurde. die breite passte jetzt auch zur ersten hirarchie, da ich den vorgegeben code nochmal komplett neu gemacht habe. einen kleinen makel gibt es jedoch noch. im IE 7 gibt es einen Minimalen Abstand zwischen den gedroppten Menüeinträgen. den dazugehörigen code werde ich wohl erst ab nächstem montag hier posten können, da ich bis zum ende der woche in einer oracle schulung bin. |
|
|||
hi,
hier ist mal der code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>Titel</title> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <link href="style.css" type="text/css" rel="stylesheet" /> <script type="text/javascript"> if(window.navigator.systemLanguage && !window.navigator.language) { function hoverIE() { var LI = document.getElementById("TopNavi01").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 = "#000000"; /*Hier Standardhintergrundfarbe*/ } function ausblenden() { sucheUL(this.firstChild).style.display = "none"; } window.onload=hoverIE; } </script> </head> <body> <div id="Rahmen"> <ul id="TopNavi01"> <li><a href="#"><b><u><i>Überschrift1</i></u></b></a> <ul id="TopNavi02"> <li><a href="#" Target="_top">Unterpunkt 1</a></li> <li><a href="#" Target="_top">Unterpunkt 2</a></li> <li><a href="#" Target="_top">Unterpunkt 3</a></li> <li><a href="#" Target="_top">Unterpunkt 4</a></li> <li><a href="#" Target="_top">Unterpunkt 5</a></li> <li><a href="#" Target="_top">Unterpunkt 6</a></li> </ul> </li> <li><a href="#"><b><u><i>Überschrift2</i></u></b></a> <ul id="TopNavi02"> <li><a href="#" Target="_top">Unterpunkt 1</a></li> <li><a href="#" Target="_top">Überschrift 2 Unterpunkt 2</a></li> <li><a href="#" Target="_top">Unterpunkt 3</a></li> <li><a href="#" Target="_top">Unterpunkt 4</a></li> <li><a href="#" Target="_top">Unterpunkt 5</a></li> <li><a href="#" Target="_top">Unterpunkt 6</a></li> </ul> </li> <li><a href="#"><b><u><i>Überschrift3</i></u></b></a> <ul id="TopNavi02"> </ul> </li> <li><a href="#"><b><u><i>Überschrift4</i></u></b></a> <ul id="TopNavi02"> </ul> </li> <li><a href="#"><b><u><i>Übershrift5</i></u></b></a> <ul id="TopNavi02"> </ul> </li> </ul> </div> </body> </html> Code:
* { margin:0px; padding: 0px; } body { font: normal 100.01% Helvetica, Arial, sans-serif; color: black; background-color: #ffffff; margin: 0px; } ul#TopNavi01 { /*Ausrichtung der gesamten Buttons nach oben/unten/links/rechts*/ margin: 0; text-align: left; } /*Innen- und Außenabstände der einzelnen Buttons der jeweiligen ul*/ ul#TopNavi01 li { height: 25px; /*Hoehe der ersten Navigationsebene */ width: 150px; /* Breite der ersten Navigationsebene */ list-style: none; float: left; /* Listet die Menuepunkte der ersten Navigationsebene nebeneinander */ position: relative; background-color: yellow; /* nicht sichtbar */ } /*a href-Formatierung*/ ul#TopNavi01 li a { background-color: darkmagenta; /*Hintergrundfarbe Buttons*/ color: greenyellow; /*Schriftfarbe der h-ref*/ text-align: left; } /*Ausrichten der Navigation der zweiten Ebene*/ ul#TopNavi01 li ul { width: 150px; top: 25px; /*Abstand der Navi der Ebene 2 zu den Buttons der Ebene 1*/ display: none; /* Unternavigation ausblenden */ } ul#TopNavi01 li:hover ul { display: block; } /*Hintergrund Untermenu*/ ul#TopNavi01 li ul li { float: none; display: block; background-color: mediumspringgreen;/*ohne Auswirkung*/ } /*Eigenschaften aller Buttons bestimmen, ausgewählt über tag<a>.*/ ul#TopNavi01 a, ul#TopNavi01 span { display: block; text-decoration: none; font-weight: bold; width: 150px; /*Setzt die Breite der oberen Buttons */ padding-top: 0.5em;/*Bei FireFox ca. 0.5, damit der Kontakt zwischen 1.Ebene und 2.Ebene nicht abreisst!*/ } /* Hovereffekte fuer die erste Ebene */ ul#TopNavi01 a:hover, ul#TopNavi01 span, li a#aktuell { border-color: red; border-left-color: lightgreen; border-top-color: purple; color: white; background-color: grey; } /*Eigenschaften aktuelle Unterseite*/ ul#TopNavi01 li ul span { background-color: chartreuse; } /*Farbe der Buttons beim Runterflip (TopNavi02)*/ ul#TopNavi02 li a { width: 145px; height: 24px; padding: 0px 0px 0px 5px; text-align: left; border-bottom: 1px solid black; background-color: deeppink; /*Hintergrundfarbe Leiste*//*ohne Auswirkung*/ color: lightgrey; } /*Mouseover-Eigenschaften für TopNavi02*/ ul#TopNavi02 li a:hover { background-color: yellowgreen; color: black; } Überschrift 2 Unterpunkt 2 ist bewußt viel länger gewählt. dabei springt der zu lange text in eine neue zeile, die jedoch durch den Unterpunkt3 verdeckt wird. wie kann man diesem "fehler" (?!) umgehen ? das problem tritt beim Firefox, IE7 und dem Opera auf. beim IE6 gibt es das problem nicht, da dieser das flipdown über javascript erhält und es ohne dieses auch nicht zu machen scheint. weiß jemand rat ? |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Drop Down Menü per onklick? | BoBoR | CSS | 18 | 17.04.2009 12:45 |
Tab Menü Problem | BloodHunger | CSS | 6 | 22.12.2008 16:04 |
Problem mit padding im Menü | Sp33dy G0nz4l3s | CSS | 1 | 22.09.2006 19:09 |
Problem mit Menü... | Zero-X | CSS | 18 | 12.07.2006 17:52 |
Das Menü und mein Problem | Sven | CSS | 1 | 13.03.2005 02:07 |