CSS-Problem: Einfache Reiternavigation mit zwei Leveln

Hallo liebes Forum,

seit einigen Tagen versuche ich eine einfache Reiternavigation mit zwei Leveln (level_1 = li und level_2 = ul) per CSS zu formatieren. Leider nur mit mäßigem Erfolg, siehe hier:

http://kulturnetz-schleswig.de/index...illkommen.html

Hier sind Ausschnitte meiner Layouts, so wie ich mir die verschiedenen Zustände der Navigation vorstelle:

Anhang 7676

Anhang 7677

Anhang 7678

Ich wäre für Hilfe sehr dankbar. Vielleicht hat jemand ja bereits etwas vergleichbares umgesetzt und kann mir da helfen. Anzumerken ist, dass es sich um ein Non-Profit Projekt handelt.

Danke und Grüße!

Hm, da die 2.Ebene in der Breite deutlich über das <li> der 1.Ebene hinausgehen soll, denke ich, wirst du einem Absolute Positionierung nicht drum herum kommen.
Probier mal folgendes aus. Ich denke, das geht dann in die Richtung, die du willst (Feintuning musste natürlich noch betreiben)

Code:

---

ul.level_2 {float:none;position:absolute;}

---

Gruß
dhe

Danke für den Tipp!

Habe ich direkt mal geändert, aber ich steige immer noch nicht durch. Wenn ein Navigationspunkt in ul aktiv ist, dann sitzt das wie es soll linksbündig. Wenn aber einer der Hauptpunkte oben aktiv ist, dann sitzt es bündig mit dem aktiven Punkt (siehe Seite).

Probier mal nur das hier

HTML-Code:

---

.mod_navigation ul {
  list-style: none;
  position: relative;
}
.mod_navigation a,
.mod_navigation span {
  display: block;
  padding: 1em;
/* weitere Formatierung hier */
}
.mod_navigation li {
  float: left;
}
.mod_navigation li ul {
  position: absolute;
  left: -999em;
}
.mod_navigation li:hover ul {
  left: 0;
}

---

Von hier kopiert und angepasst http://www.htmldog.com/articles/suckerfish/dropdowns/

Danke Andreas,

habe ich probiert, aber finde auch mit diesem Code nicht die gewünschte Lösung, da es sich hier um ein Dropdownmenü handelt. Die Unterpunkte sollen in meinem Menü immer sichtbar sein. Also eigentlich die ganz einfache Variante.

Freue mich über weitere Hilfe!

PS: oder ist das so wie ich mir das vorstelle, gar nicht machbar?

Hi,

habe live an zwei Stellen kleine Änderungen vorgenommen mit dem Ergebnis im Anhang. Verfeinern kannst du selbst.

Code:

---

.mod_navigation a, .mod_navigation span {
    color: #FFFFFF;
    display: block;
    padding: 12px;
    text-decoration: none;
}

.mod_navigation li a:hover {
    background-color: #009EE0;
    color: #FFFFFF;
    padding: 12px;
}

---

Zitat:

---

Zitat von fips

... Die Unterpunkte sollen in meinem Menü immer sichtbar sein. ..

---

Ach, da habe ich mich in die Irre führen lassen, da ich auf der Seite überhaupt keine Unterpunkte gesehen habe, erst bei Mouseover habe ich da irgendwas gesehen.

Ne, dann ist das ja noch einfacher,

HTML-Code:

---

.mod_navigation ul {
  list-style: none;
  position: relative;
}
.mod_navigation a,
.mod_navigation span {
  display: block;
  padding: 1em;
/* weitere Formatierung hier */
}
.mod_navigation li {
  float: left;
}
.mod_navigation li ul {
  position: absolute;
  left: 0;
}

---

Der Trick ist:
Wenn die UL in 2. Ebene keine position:absolute; hätte, wäre diese Liste einfach in dem entsprechenden LI der 1. Ebene, wäre also links mit diesem Listenpunkt bündig.
Also wird diese Liste (UL) mit position:absolute; aus dem Elementefluss genommen und irgendwo anders hin positioniert - und zwar immer nach links an den Rand des headers mit left:0;. Damit das funktioniert muss diese UL ein Elternelement mit position:relative; (richtig: Ahnenelement ohne position:static;) finden, an dem es sich ausrichten kann. Deswegen habe ich den Listen in .mod_navigation position:relative; gegeben, somit können sich die absolut positionierten Elemente an der Liste von Level 1 ausrichten.


@bizon - .mod_navigation li a:hover wird zu .mod_navigation a:hover. Ich finde es besser, immer nur das an Selektoren zu nehmen, was auch benötigt wird.

@andreas
Ich wollte hier auch keine neue Navigation bauen oder eine fertige Lösung anbieten, sondern wollte nur zeigen, wie nahe er eigentlich an seiner Wunschnavi ist. Deshalb auch nur die Minimaländerung im vorhandenen CSS.

War ja auch nicht weiter tragisch, ich sehe nur immer so viele Selektoren, die überflüssig sind, meistens das hier
.mod_navigation .level_1 li {}
Dabei ist das das selbe wie
.mod_navigation li {}
In beiden Fällen alle LIs innerhalb von .mod_navigation

@andreas
Da geb ich dir Recht, aber wo fängt man da an und wo hört das auf? Ich möchte hier nicht als CSS-Dozent auftreten, sondern nur Tipps geben, die in die gewünschte Richtung führen. Deshalb auch meine Empfehlung oben:

Zitat:

---

Zitat von bizon

Verfeinern kannst du das selbst.

---

Ich danke euch beiden für eure Hilfe.

Beides habe ich ausprobiert und habe letztendlich mit Andreas Lösungsvorschlag weiter gearbeitet. Da ich scheinbar viele überflüssige Selektoren in meinem zusammengeschusterten CSS hatte, wollte ich es lieber einmal aufgeräumt haben :-) Ich hoffe nun ist es etwas besser und ich habe keine neuen Fehler eingebaut.

Zu 98% bin ich fertig und glücklich. Leider muss ich für's Finetuning nochmal um Hilfe von euch Experten bitten:

Frage 1:
wie bekomme ich eine Hintergrundfarbe oder -bild in die erste Zeile? Oben bei den Hauptnavigationspunkten (Willkommen, Seite 2) Über die ganze Breite, also "width: 100%". Im Moment ist es noch ungefüllt / weiss.

Frage 2:
wie bekomme ich die Schriftgröße in der zweiten Zeile komplett auf 13pt? Wenn einer der unteren Menüpunkt aktiv ist, wird er leider immer mit 18pt dargestellt - scheinbar von "oben" geerbt.

Für euch wahrscheinlich leichte Fragen, aber ich habe lange herumprobiert und bin daran verzeifelt :(

Danke und viele Grüße

Du solltest dir das ganze auch mal mit Firebug im Firefox ansehen. Dann siehst du z.B., dass sowohl der NAV-Container der Navigation .mod_navigation, als auch die erste UL ul.level_1 keine Höhe haben. Das liegt daran, dass die LIs gefloatet sind. Du kannst also dem NAV od. der ersten UL explizit eine Höhe zuweisen, dann kannst du denen auch einen Hintergrund geben.

zu 2. Es wird nicht vererbt, sondern du hast alle As und alle SPANs innerhalb der Navigation mit diesen Selektoren direkt formatiert.

HTML-Code:

---

.mod_navigation a,
.mod_navigation span {
  font-size: 18pt;
}

---

Die As und SPANs der 2. Ebene kannst du so ansprechen, damit überschreibst du dann also nicht gewünschte Eigenschaften wieder

HTML-Code:

---

.mod_navigation .level_2 a,
.mod_navigation .level_2 span {
    font-size: 13pt;
}

---

Fantastisch, vielen Dank!
Nun passt alles und genauso habe ich es mir vorgestellt.


Ich habe den Firebug zwar am laufen, doch das mit der fehlenden Höhenangabe für den Hintergrund, das hätte ich nicht herausbekommen. Ich danke dir und natürlich auch den anderen für die unkomplizierte geduldige Hilfe.


Viele Grüße und einen schönen Tag!