zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit vertikaler Navigation

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.08.2007, 13:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.08.2007
Beiträge: 1
Krissie befindet sich auf einem aufstrebenden Ast
Frage Problem mit vertikaler Navigation

Hallo,

als Neuling hier erhoffe ich mir von Euch Hilfe, denn ich weiß nicht mehr weiter.

Ich habe eine vertikale Navigation. Jetzt treten in den unteren Ebenen bei den Navigationspunkten, die noch weitere Unterpunkte haben, zwei seltsame Phänomene auf, wenn ich sie aufrufe:

1. Das <ul> mit den Unterpunkten ist nicht mehr linksbündig.
2. Unter dem <ul> mit den Unterpunkten ist das Padding des aktuellen Navipunkts sichtbar.

Beides verschwindet, wenn ich einen Punkt aus der dritten Ebene aufrufe.

Hier könnt Ihr Euch ansehen, wie es NICHT aussehen soll:

http://dev.janhinnerk.de/menue.html

Und so soll es eigentlich aussehen:

http://dev.janhinnerk.de/menue_2.html

Dies ist das Stylesheet:

Code:
* {
	padding: 0;
	margin: 0;
}

body {
	background-color: white;
	font: 70% "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
   margin:30px;
}

.clear {
	clear: both;
}


#leftcolumn {
	display: inline;
	color: #333;
	margin: 20px 20px 20px 20px;
	padding: 0px;
	width: 180px;
	float: left;
}
#menucontainer {
	color: #666;
	width: 180px;
	margin: 0;
}

#menu {
	width: 100%;
	overflow: hidden;
	margin: 0em 0 0.5em 0;
	list-style-type: none;
	border-top: 2px #ddd solid;
	border-bottom: 2px #ddd solid;
}

#menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#menu li {
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
}

#menu a, #menu strong {
	display: block;
	width: 100%;             /* 95% */
	padding: 3px 0px 3px 5%;
	text-decoration: none;
	background-color: #ccc;  /* #fff*/
	color: #666;
	border-bottom: 1px #eee solid;
}

/* Menu Title */
#menu li#title {
	width: 100%;              /*95%*/
	padding: 3px 0px 3px 5%;
	font-weight: bold;
	color: #666;
	background-color: #ccc;         /* #fff;*/
	border-bottom: 4px #999 solid;
}

#menu li span {
	display: block;
	width: 95%;
	padding: 3px 0px 3px 5%;
	font-weight: bold;
	border-bottom: 1px #ddd solid;
}

/* Level 1 */
#menu li#active, #menu li strong {
	width: 100%;                    /* 95% */
	padding: 3px 0px 3px 5%;
	font-weight: bold;
	color: #c60;
	background-color: #ccc;        /* fff; */
	border-bottom: 1px #eee solid;
	display: block;
}

#menu li a {
	width: 100%;                    /* 95% */
	padding-left: 5%;
	background-color: #f8f8f8;
	color: #666;
}

#menu li a:focus,
  #menu li a:hover,
  #menu li a:active {
	background-color: #eee;
	color: #c60;
}

/* Level 2 */
  #menu li ul li a,
  #menu li ul li#active,
  #menu li ul li strong,
  #menu li ul li span {
	width: 100%;                    /* 90% */
	padding-left: 10%;
}

#menu li ul li a {
	background-color: #f8f8f8;
	color: #666;
}

#menu li ul li a:focus,
  #menu li ul li a:hover,
  #menu li ul li a:active {
	background-color: #eee;
	color: #c60;
}

/* Level 3 */
  #menu li ul li ul li a,
  #menu li ul li ul li#active,
  #menu li ul li ul li strong,
  #menu li ul li ul li span {
	width: 100%;                    /* 85% */
	padding-left: 15%;
}

#menu li ul li ul li a {
	background-color: #f8f8f8;
	color: #999;
}

#menu li ul li ul li a:focus,
  #menu li ul li ul li a:hover,
  #menu li ul li ul li a:active {
	background-color: #eee;
	color: #c60;
}

/* Level 4 */
  #menu li ul li ul li ul li a,
  #menu li ul li ul li ul li#active,
  #menu li ul li ul li ul li strong,
  #menu li ul li ul li ul li span {
	width: 100%;                    /* 80% */
	padding-left: 20%;
}

#menu li ul li ul li ul li a {
	background-color: #f8f8f8;
	color: #aaa;
}

#menu li ul li ul li ul li a:focus,
  #menu li ul li ul li ul li a:hover,
  #menu li ul li ul li ul li a:active {
	background-color: #eee;
	color: #c60;
}
Bitte stört Euch nicht an den auskommentierten Prozentzahlen. Das waren meine Versuche am Anfang, die stehen nur noch als Merkposten drin. Und die auskommentierte Hintergrundfarbe ist die, die der aktive Punkt eigentlich haben soll. Zur Verdeutlichung habe ich den Navi-Punkt dunkel gefärbt.

Ich bin nicht so der CSS-Freak, daher weiß ich jetzt hier nicht mehr weiter. Ich finde einfach den Fehler nicht bzw. weiß nicht, wie ich ihn umgehen kann.
Vielleicht habt Ihr eine Idee?

Vielen Dank,
Krissie
Mit Zitat antworten
Sponsored Links
Antwort

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
Float-Problem? mischaef CSS 33 20.10.2010 17:20
Problem mit FlyOut Menu im IE7 quarki69 CSS 5 15.03.2010 16:46
Problem mit Navigation (<a>) in ul bzw. li stefanw CSS 1 10.11.2008 17:52
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 16:29
Ul mit Sub-Ul Navigation macht Darstellungsprobleme im Opera eRoZion CSS 17 16.09.2005 10:30


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:41 Uhr.