Problem mit horizontalem Menue und dessen Unterpunkten

Hallo zusammen,

für einen guten Kumpel der bald für längere Zeit in's Ausland geht und der darüber bloggen möchte, werde ich ein Layout erstellen bzw. habe damit schon begonnen.

Dort habe ich links ein Menue, welches soweit auch ohne Probleme funktioniert. Doch das ist bis weilen nicht für die Seiten gedacht. Jene sollen oben auf der Seite erscheinen. Aktuell habe ich da eine normale Liste, die ich mit CSS gestaltet habe. Ohne Unterpunkte funktioniert das auch ohne Probleme. Nun hat diese "Liste" einen unteren Rahmen und unter jenem sollen dann die Unterseiten erscheinen.

In html schaut die Liste so aus:

<ul>
  <li><a name="oben" href="#oben">Startseite</a></li>
  <li><a href="#1">Ebene 1</a></li>
  <li><a href="#2">Ebene 2</a>
  <ul>
      <li><a href="#11">Ebene 2.1</a></li>
      <li><a href="#12">Ebene 2.2</a></li>
      <li><a href="#13">Ebene 2.3</a></li>
    </ul></li>
  <li><a href="#3">Ebene 3</a></li>
  <li><a href="#4">Ebene 4</a></li>
  <li><a href="#5">Ebene 5</a></li>
</ul>

Sie ist umgeben von einem Div. Der CSS-Teil schaut so aus:

#kopf {
    display:block;
    margin:0em;
    padding:0em;
    text-align:center;
    color:#CCCCCC;
    background-color:#660000;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom:0.25em solid #666666;
}


/* Listen Gestaltung */
#kopf ul {
    display:block;
    margin:0em;
    padding:0.5em 0em 0em 0em;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom:0.15em solid #CCCCCC;}


#kopf li {
    display:inline;
    /*
    margin:0em 0.25em 0em 0.25em;
    padding:0em 0.15em 0em 0.15em;
    */
    margin:0em 0.15em 0em 0.15em;
    padding:0em 0.15em 0em 0.15em;
    height:1em;
    background-color:#990000;
    border-top:0.05em solid #CCCCCC;
    border-left:0.05em solid #CCCCCC;
    border-right:0.05em solid #CCCCCC;
    border-bottom:none;}
#kopf li a:link { color:#CCCCCC; text-decoration:none;}
#kopf li a:visited { color:#CCCCCC; text-decoration:none;}
#kopf li a:hover { color:#0099CC; font-weight:bold; text-decoration:underline; }


#kopf ul ul {}
#kopf ul ul li {}

Nun stellt sich mir die Frage, wie ich die Unterseiten auch unter der ersten Liste anordnen kann. Denn wenn ich die "unterliste" nicht weiter definiere, wird sie ähnlich der bisherigen Liste ausgegeben. Problem ist dabei, dass die Unterpunkte eben nicht unterhalb der Hauptliste sind und dass sie somit auch vor den anderen "Hauptpunkten" erscheinen.

Gibt es eine Möglichkeit, dass man das mit der CSS-Gestaltung lösen kann? Denn wenn nicht, müsste ich wohl zwei "eigenständige Listen" nehmen. Doch ob das geht, ist mir noch unbekannt, da ich bislang nur weiß, dass man mit dem entsprechenden Template-Tag zwar die Tiefe nach unten beeinflussen kann, ob das aber auch anders herum geht (das man also zB nur die Unterseiten ausgibt) weiß ich (noch) nicht.

An sich wäre mir eine Lösung über CSS am liebsten, da die Seite dann auch noch lesbar aufgebaut bleibt, wenn man CSS abschaltet.

Hoffe daher, dass ihr vielleicht gute Tipps oder gar Hilfestellungen habt. Denn das was ich so im Netz an horizontalen Menues gefunden habe bezieht sich meistens auf zwei eigenständigen Listen.

Vielen Dank
Muckel/Tobias

Guten Tag nochmal,

bin ein klein wenig weiter gekommen. Und zwar habe ich für die "Liste der zweiten Ebene" die positionierung geändert und konnte damit mit top einen Abstand nach oben angeben. Dann habe ich jene noch gefloatet.

Das Zwischenergebnis schaut nun so aus, dass die Unterpunkte zwar auch unter den Hauptpunkten sind, das aber leider nicht mehr zentriert.

Eigentlich sollte das ganze auch zentriert sein. Mit der "Hauptebene" klappt dies auch, wenn ich in dem Umgebenen DIV die Ausrichtung auch auf zentriert stelle

text-align:center;

Doch das wirkt sich leider nicht auf die untere Ebene aus. Also dachte ich mir, dass ich es zum Beispiel bei dem Linkeneinzug belasse. Doch wenn ich das text-algin entferne, wird das zwar links ausgerichtet, aber die Hauptebene beginnt am Ende der Unterebene.

Dieses Problem müsste ich noch lösen, allerdings weiß ich noch nicht wie. Der CSS-Teil schaut nun so aus:

#kopf {
    display:block;
    margin:0em;
    padding:0em;
    /*text-align:center;*/
    color:#CCCCCC;
    background-color:#660000;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom:0.25em solid #666666;
}
/* Listen Gestaltung */
#kopf ul {
    display:block;
    margin:0em;
    /*padding:0.5em 0em 0em 0em;*/
    padding:0em;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom:0.15em solid #CCCCCC;}


#kopf li {
    display:inline;
    margin:0em 0.15em 0em 0.15em;
    padding:0em 0.15em 0em 0.15em;
    height:1em;
    background-color:#990000;
    border-top:0.05em solid #CCCCCC;
    border-left:0.05em solid #CCCCCC;
    border-right:0.05em solid #CCCCCC;
    border-bottom:none;}
#kopf li a:link { color:#CCCCCC; text-decoration:none;}
#kopf li a:visited { color:#CCCCCC; text-decoration:none;}
#kopf li a:hover { color:#0099CC; font-weight:bold; text-decoration:underline; }


#kopf ul ul {
    float:left;
    display:inline;
    position:relative;
    top:1em;
    margin:0.15em;
    padding:0.15em;
    border:none;
}


#kopf ul ul li {
    margin:0em 0.15em 0em 0.15em;
    padding:0em 0.15em 0em 0.15em;
    height:1em;
    background-color:#990000;
    border:0.05em solid #CCCCCC;
}

Und die html-Liste schaut so aus:

<div id="kopf">
Eine Zeile<br />
  <ul>
  <li><a name="oben" href="#oben">Startseite</a></li>
  <li><a href="#1">Ebene 1</a></li>
  <li><a href="#2">Ebene 2</a>
      <ul><li><a href="#11">Ebene 2.1</a></li>
      <li><a href="#12">Ebene 2.2</a></li>
      <li><a href="#13">Ebene 2.3</a></li>
    </ul></li>
  <li><a href="#3">Ebene 3</a></li>
  <li><a href="#4">Ebene 4</a>
      <ul><li><a href="#11">Ebene 4.1</a></li>
      <li><a href="#12">Ebene 4.2</a></li>
      <li><a href="#13">Ebene 4.3</a></li>
    </ul></li>
  <li><a href="#5">Ebene 5</a></li>
</ul>
<p>Ein Absatz</p>
</div>

Schön wäre es natürlich noch, wenn man es so hinbekommen könnte, dass die Unterpunkte nur bei gewählte oder gehovertem Überpunkt erscheinen. Und eben alles zentriert.

Habt ihr da Tipps oder Lösungen für mich?
Vielen Dank
Muckel/Tobias

Guten Morgen,

einen Link zu dem Problem habe ich parat, doch von einem zweiten Faden zum selben Thema halte ich nichts. Denn es ist und bleibt ja ein Problem mit den Unterpunkten des Menü.

Aktueller stand ist, dass die unterpunkte auch unter den Oberpunkten stehen, die Oberpunkte aber einen seitlichen Versatz haben (sie fangen eben erst bei dem Ende der Unterpunkte an und dies sollte nicht so sein).

Liebe Grüße
Muckel