|
|||
Navigationsleiste-Fehler
Hallo werte xhtml-Community,
ich habe heute probiert mir schnell eine einfache Navileiste zu basteln. Leider wurde aus dem schnell ein lange Ich schildere euch kurz meinen Fehler, unten dann der Quellcode dazu. Wenn man in der Navileiste auf "Unsere Leistungen" dann auf "Strategischer Mehrwert" fährt, blendet er richtigerweise " für Partner" und "für Unternehmen" rechts daneben ein, soweit alles gut. Sobald man jedoch mit der Maus über "Coaching" oder einem anderen Unterreiter geht, verschwinden die 2 "Dritt"-Reiter "Unternehmen" und "Partner" nicht wieder, was sie sollten, da sie schließlich nur zu "Strategischer Mehrwert" gehören. Ich hoffe das war irgendwie verständlich. Kurzfassung: Wenn man mit der Maus über "Coaching" fährt wird "Partner" und "Unternehmen" eingeblendet, was nicht so sein soll! Ich hoffe es kann mir jemand helfen, ich bin schon bisschen am verzweifeln :/ HTML-Code:
<link href="navbar.css" rel="stylesheet" type="text/css" /> <style type="text/css"> </style> <div id="navbar"> <ul> <li><a href="#"> Home </a> </li> <!-- end of Home li Tag --> <li><a href="#"> Unsere Leistungen </a> <ul> <li><a href="#"> Strategischer Mehrwert </a> <ul> <li><a href="#"> für Unternehmen </a> </li> <li><a href="#"> für Partner </a> </li> </ul> <!-- end of Mehrwert ul Tag --> </li> <li><a href="#"> Coaching </a> </li> <li><a href="#"> Beratung </a> </li> <li><a href="#"> Beirat/Aufsichtsrat </a> </li> </ul> <!-- end of Leistungen ul Tag --> </li> <!-- end of Leistungen li Tag --> <li><a href="#"> Finanzierung </a> <ul> <li><a href="#"> Kriterien </a> </li> <li><a href="#"> Team </a> </li> <li><a href="#"> Businessplan </a> </li> <li><a href="#"> Beteiligungsprozess </a> </li> <li><a href="#"> Finanzierungskonditionen </a> </li> </ul> <!-- end of Finanzierung ul Tag --> </li> <!-- end of Finanzierung li Tag --> <li><a href="#"> Portfolio </a> <ul> <li><a href="#"> Portfoliounternehmen </a> </li> <li><a href="#"> Exits </a> </li> </ul> <!-- end of Portfolio ul Tag --> </li> <!-- end of Portfolio li Tag --> <li><a href="#"> Über uns </a> <ul> <li><a href="#"> Team </a> </li> <li><a href="#"> Partner </a> </li> <li><a href="#"> Kontakt </a> </li> <li><a href="#"> Impressum </a> </li> </ul> <!-- end of Über uns ul Tag --> </li> <!-- end of Über uns li Tag --> </ul> <!-- end of main ul Tag --> </div> <!--end of main Navbar Div Tag --> Code:
@charset "utf-8"; #navbar { padding: 0px; height: 50px; width: 900px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #navbar ul { margin: 0px; padding: 0px; } /* Erstellen der Tabs */ #navbar ul li { background-color: #333333; float: left; border: 1px solid #FFF; position: relative; list-style-type: none; border-left-width: 0px; } /* Haupt-Style Elemente und Positionierung als Block */ #navbar ul li a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 30px; color: #FFF; text-decoration: none; text-align: center; display: block; height: 30px; width: 150px; } /* Ausblenden der 2. Stufe */ #navbar ul ul { position: absolute; visibility: hidden; top: 31px; } /* Sichtbarmachen der 2. Stufe */ #navbar ul li:hover ul { visibility: visible; } /* Sichtbarmachen der 3. Stufe */ #navbar ul li ul:hover ul li{ visibility: visible; left: 151px; top: -32px; position: relative; } /* Beibehaltung der grauen Farbe */ #navbar ul li:hover { background-color: #666; } |
Sponsored Links |
|
|||
kann geclosed werden, habs direkt danach gefunden^^
Der Fehler lag am Ansprechen der Hierarchie im CCS beim Wiedersichtbarmachen der 3. Stufe (s. Kommentar im Code) Statt Code:
ul li ul:hover ul li Code:
ul li ul li:hover ul li |
Sponsored Links |
|
|||
Nachdem das Problem gelöst wurde hier auch noch eine kurze Frage:
Warum speicherst du deine Dateien nicht in UTF8 ab, dann kannst du dir das Ü etc. sparen und direkt Sonderzeichen etc. verwenden. Die HTML-Sonderzeichen sind eigentlich veraltet und es gibt heutzutage keinen Grund mehr, sie noch zu verwenden. |
|
|||
Jetzt habe ich aber nochmal eine Frage, momentan erscheinen Reiter der 2. Stufe direkt, sobald man über die anderen drüber fährt. Gibt es eine sinnvolle und einfache Möglichkeit, wie ich es erreiche, dass sie smooth erscheinen, bzw. ausklappen/rausfahren?
Grüße |
|
|||
|
|
|||
Stimmt etwas an meiner Auflösung nicht, oder ist die Navigationsleiste nicht zentriert? Wenn nein, wieß jemand, wie ich es beheben kann? Eig. sollte doch mit
Code:
text-align: left; margin: 0 auto; |
|
|||
Die Files sind immer noch die gleichen wie oben im Post.
Meine Idee war jetzt also das gesamte Div, welches momentan um alle html Listen geht zu zentrieren. Dazu habe ich in die css #navbar Code:
margin-left: auto; margin-right: auto; Code:
text-align: left; margin: 0 auto; |
Sponsored Links |
|
|||
Bei mir geht es mit deinem Code.
HTML-Code:
#navbar { padding: 0px; height: 50px; width: 900px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; background-color: green; } Da machst du etwas anderes nicht richtig, von dem wir nichts wissen. Stelle mal dein Projekt online und teile uns den Link mit.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Sponsored Links |
Stichwörter |
css, fehler, hover, html, navigation |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 13:25 |
Horizontal zentrierte Navigationsleiste erstellen | Webnut | CSS | 4 | 16.01.2011 13:09 |
Dynamische Navigationsleiste horizontal, vertikal | Faven | CSS | 6 | 28.06.2010 16:06 |
Fehler im Code | koshiro | (X)HTML | 23 | 07.12.2009 14:39 |
Fehler bzw. Warnungen für eine Lightbox | empfei | (X)HTML | 3 | 24.10.2009 15:27 |