XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Problem mit vertikaler Navigation (http://xhtmlforum.de/showthread.php?t=47395)

Krissie 15.08.2007 13:51

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. :cry:
Vielleicht habt Ihr eine Idee?

Vielen Dank,
Krissie


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

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023