zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Navigationsleiste-Fehler

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.04.2014, 21:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.04.2014
Beiträge: 11
Necator befindet sich auf einem aufstrebenden Ast
Standard 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&uuml;r Unternehmen </a> </li>
<li><a href="#"> f&uuml;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="#">  &Uuml;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 -->
CSS-Code:
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;

}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.04.2014, 21:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.04.2014
Beiträge: 11
Necator befindet sich auf einem aufstrebenden Ast
Standard

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
muss natürlich
Code:
ul li ul li:hover ul li
rein, weil ich ja nicht alle Listenelemente sondern nur eines ansprechen will.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.04.2014, 10:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.181
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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 &Uuml; etc. sparen und direkt Sonderzeichen etc. verwenden. Die HTML-Sonderzeichen sind eigentlich veraltet und es gibt heutzutage keinen Grund mehr, sie noch zu verwenden.
Mit Zitat antworten
  #4 (permalink)  
Alt 03.04.2014, 10:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.04.2014
Beiträge: 11
Necator befindet sich auf einem aufstrebenden Ast
Standard

Ich wollte es eig. in UTF-8 abspeichern, da ist mir wohl ein Fehler unterlaufen.
Werd ich ändern, hab dann aus Gewohnheit die Kürzel eingefügt . Danke für den Hinweis
Mit Zitat antworten
  #5 (permalink)  
Alt 03.04.2014, 11:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.04.2014
Beiträge: 11
Necator befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 03.04.2014, 11:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.181
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Natürlich.
Mit Zitat antworten
  #7 (permalink)  
Alt 03.04.2014, 12:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.04.2014
Beiträge: 11
Necator befindet sich auf einem aufstrebenden Ast
Standard

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;
das ganze div zentriert sein?
Mit Zitat antworten
  #8 (permalink)  
Alt 03.04.2014, 12:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.181
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

An welchem Element orientiert sich dein div denn? Mehr können wir dir leider nicht helfen da wir nicht wissen wie dein jetziger Stand des HTML ist.
Mit Zitat antworten
  #9 (permalink)  
Alt 03.04.2014, 12:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.04.2014
Beiträge: 11
Necator befindet sich auf einem aufstrebenden Ast
Standard

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;
bzw.
Code:
text-align: left;
 margin: 0 auto;
geschrieben. Beides funktioniert leider nicht.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 03.04.2014, 13:16
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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;
}
Hintergrund grün eingefärbt.

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.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, fehler, hover, html, navigation

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:47 Uhr.