Untermenü`s in der Navigationsleiste anpassen

Liebe Forengemeinde,

weder Google noch Beiträge hier können mir wirklich weiterhelfen - Falls ich was bei meiner 4stündigen Suche hier übersehen habe, bitte einen kleinen Stups. ;)

Folgendes neues Problem hat sich aufgetan:

Die (Haut-)Navigation funktioniert so, wie ich es mir vorstelle (siehe ScreenShoot 1).
Wenn ich jedoch auf einen Hauptnavigationspunkt klicke, wird die Unternavigation eingeblendet - soweit auch ok. Jedoch bricht die Hauptnavigation um und die nachfolgenden Hauptnavigationspunkte werden in einer 3. Zeile dargestellt. (siehe Screenshoot 2).

Änderungen der Einstellungen von "Display", "Overflow" und / oder "Clear" in der CSS brachten kein Erfolg (oder ich habs einfach falsch eingetragen?).

Jetzt habe ich mir folgende Gedanken gemacht:

1. Lösungsgedanke - eine zweite (Unter-)Navigation über Module einbinden und dort nur die Untermenü`s anzeigen lassen:
- müsste ich hierzu die entsprechenden CSS- Klassen in den Unterseiten (über die Funktion "Seitenstruktur") einbinden?
2. Lösungsgedanke - innerhalb der Navigation (irgendwie ein zweite Zeile erzeugen, in der nur die Untermenüs angezeigt werden
- hier häng ich total fest, wie...



Vom Grundsatz her stelle ich mir das so wie hier vor...

Mittlerweile qualmt mir der Kopf - und bin nur noch blind... Vielleicht hat jemand eine Idee dazu?

Hier mal meine CSS - Leider kann ich die neue Contao-Seite nicht online stellen, weil auf der Domain-Umleitung noch meine alte Seite läuft.

Code:

---


body {
    width:100%;
    height:100%;
    margin-right:auto;
    margin-left:auto;
    background-color:#c9c5c5;
    font:14px Arial;
    font-weight:normal;
    color:#575454;
}
     

#Header {
    width:960px;
    height:242px;
    max-height:242px;
    margin-right:auto;
    margin-left:auto;
    background-color:#d41919;
    background-repeat:repeat;
}
     

#Navigation {
    width:960px;
    height:50px;
    max-height:50px;
    float:left;
    margin-top:auto;
    margin-bottom:auto;
    vertical-align:middle;
    background-color:#bfbdbd;
    background-repeat:repeat;
    font:14px/14px arial;
    font-weight:bold;
    color:#3fa1e8;
    text-transform:capitalize;
    word-spacing:0px;
    list-style-type:none;
}
     

#Navigation li {
    padding-right:35px;
    padding-left:0;
    display: inline
}
     
#Navigation ul {
    padding-right:35px;
    list-style: none
}
     

#Navigation a: {
    color: #615f5f;
    text-decoration: none;
}
     
#Navigation a:visited {
    color: #082373;
    text-decoration: none;
}
     
#Navigation a:hover {
    font-weight:bold;
    text-transform:uppercase;
    width: 110px;   
    height: 25px;       
    color: #082373;       
    text-decoration: none;       
    background: #7ab3c4
}
     

#artikel {
    width:960px;
    height:480px;
    margin-top:5px;
    margin-right:auto;
    margin-left:auto;
    background-color:#f2f0f2;
    border:1px groove #4f494;
    font:14px/16px arial;
    font-weight:normal;
    color:#403e3e;
    text-indent:5px;
}
     
#Ressourcen - Footer {
    width:960px;
    height:5px;
    max-height:15px;
    background-color:#bfbdbd;
    font:8px arial;
    font-weight:normal;
}

---

Ein möglicher Ansatz:

PHP-Code:

---

#Navigation {
    ...
    position:relative;
}

#Navigation ul li ul {
    ...
    position:absolute;
    left:0px;
    bottom:0px;
} 


---

Nur als Denkansatz. Also das Submenü (#Navigation ul li ul) Jeweils absolut unten links positionieren, relativ zum gesamten #Navigation Container (#Navigation ul und #Navigation li dürfen nur position:static haben).

Zitat:

---

Zitat von Spooky

Ein möglicher Ansatz:

PHP-Code:

---

#Navigation {
    ...
    position:relative;
}

#Navigation ul li ul {
    ...
    position:absolute;
    left:0px;
    bottom:0px;
} 


---

Nur als Denkansatz. Also das Submenü (#Navigation ul li ul) Jeweils absolut unten links positionieren, relativ zum gesamten #Navigation Container (#Navigation ul und #Navigation li dürfen nur position:static haben).

---

*super*

Dein Ansatz war genau das, was mir gefehlt hat. Vielen Dank , auch für die schnelle Hilfe :)

wieder mal ein Problem mit der Navigation:

Mittlerweile wurde ich schon des Öfteren mit einem Fragezeichen darauf hingewiesen, ob eine Navigation wirklich links, oder in einem kleineren Screenbereich, unten, angebracht werden sollte (Stichpunkt Übersichtlichkeit).
Gerade in kleineren Screenbereichen (responsive Darstellung, oder auf mobilen Endgeräte) habe ich bisher diese Darstellung für mich begründet, dass User sowieso nach unten scrollen, um Inhalte aufzunehmen.

Gerade , was also den herkömmlichen Screen >960px betrifft, wurde ich nun schon aus dem privaten Umfeld darauf angesprochen, dass eine Navi oben sinnvoller wäre.

Für mich stellt sich nun das Problem, meine ursprüngliche Navi von "left" (obwohl sie derzeit bis vor 60sec. rechts dargestellt wurde - nach einem "Crash") nach oben zu befördern.

Ich möchte darauf hinarbeiten, die Navi oben darstellen zu lassen und ab einen bestimmten Screenbereich nur noch oben, in der Kopfzeile, ein pull-down-menü, einblenden zu lassen.

Nach den vielen Crash's, die ich hatte, habe ich den Faden verloren, wo genau die Einstellung zur oben liegenden Navi-Zeile lag. Das Layout habe ich schon umgestellt - soweit funktioniert es auch, dass die Navigation in der Kopfzeile mit den gewünschte Abständen nach oben dargestellt wird - Aber eben Level 1 und abwärts noch untereinander...

1. Vielleicht hat jemand hierzu einen dicken Stubs für mich, wo ich ansetzen muss?
2. Wie löse ich es am besten und sinnvollsten, dass die Navi, ab level2, ordentlich dargestellt wird (Stichwort Umbrüche)?

Es geht um diese Seite - Die entsprechenden Einträge in den aktivierten und bearbeitbaren CSS habe ich angehangen:

basic.css:

Code:

---

waagerechte Navi-NEU
.mod_navigation {
    max-width:1140px;
    bottom:1px;
    left:0;
    right:0;
    top:10px;
    position:relative;
    border-width:2px 0px;
    border-style:double;
    border-color:#807171;
}

Aussehen der Navigation im Level 1
.mod_navigation a,
.mod_navigation li,
.mod_navigation span {
    font:14px/1.5em Ubuntu,sans-serif,arial;
    font-weight:bold;
    color:#055b80;
    text-transform:capitalize;
    text-indent:5px;
}

Aussehen der Navigation im Level 2
.mod_navigation .level_2 a,
.mod_navigation .level_2 li,
.mod_navigation .level_2 span {
    font:12px Ubuntu,sans-serif,arial;
    font-weight:normal;
    color:#000;
    text-transform:none;
    text-indent:10px;
}
 
Farbe des aktuellen Menüpunktes
.mod_navigation span.active {
    font:14px Ubuntu,sans-serif,arial;
    font-weight:bold;
    text-decoration:underline;
    color:#147e87;
}
 
Hover-Effekt im Menü - Farbänderung
.mod_navigation a:hover {
    font:14px Ubuntu,sans-serif,arial;
    font-weight:bold;
    color:#0e689c;
}

---

und die default.css:

Code:

---

.mod_navigation {
    width:200px;
    top:43px;
    position:absolute;
    z-index:999;
}

.mod_navigation ul {
    margin:0 5px;
    padding:0;
    border-bottom:1px solid #c6ad8d;
    list-style-type:none;
}

Listen der Nav-Teile nebeneinander
.mod_navigation li {
    margin:0;
    padding:5px 0;
    border-top:1px solid #c6ad8d;
}
 
.mod_navigation .level_2 {
    padding:3px 0 0 9px;
    border-bottom:0px;
}

.mod_navigation .level_2 li {
    padding:0 0 3px;
    border-top:0px;
}

.mod_navigation a,
.mod_navigation li,
.mod_navigation span {
    font-size:14px;
    font-weight:bold;
    color:#000;
}
 
.mod_navigation .level_2 a,
.mod_navigation .level_2 li,
.mod_navigation .level_2 span {
    font-size:12px;
    font-weight:normal;
}

---

Vielen Dank für Eure Mühen, Beste Grüße und einen angenehmen Abend, Berliner

Zitat:

---

Zitat von Spooky

...
#Navigation ul li ul {
...

---

Was willst du mit dem 'li'? #Navigation ul ul spricht genauso alle ULs nach dem ersten Level (nicht nur den 2. Level) an wie deins.

Zitat:

---

Zitat von Berliner

wieder mal ein Problem mit der Navigation:

---

Ich sehe auf der Seite jetzt ein vertikales Menü, du wolltest doch ein horizontales.

Ich sehe, dass du CSS-Neuling bist, deswegen hast du auch hier nicht direkt die passende Lösung für deine Idee gefunden.

Die Idee mit zwei Navis untereinander funktioniert zwar etwas leichter, als alles mit einer, aber die Liste im Quelltext macht dann nicht mehr so viel Sinn, semantisch gesehen, weil die Unterseiten dann nicht mehr in Relation zur Elternseite stehen.

Du kannst alles mit einer Navi machen.

Gib zuerst allen LIs display:block; sonst haben sie display:list-item; danach kannst du alle Tags wie ein DIV behandeln, ULs und LIs.

Achte darauf, dass alle Elemente im Menü erstmal kein Margin und Padding haben.

Gib den SPANs und As im Menü auch noch display:block; dann kannst du sie besser formatieren. Setze Padding, Rahmen, Farben usw. am besten nur auf die SPANs/As.

CSS für die ULs und LIs wenns geht nur zur Ausrichtung, Positionierung verwenden.

Dann solltest du dich mit position:static|relative|absolute|fixed; auskennen.

Mit absolute löst du ein Element aus seinem normalen Elementefluss und kannst es mit left|right und top|bottom auf der Seite positionieren.

Dazu musst du wissen, was ein Elternelement ist. Ein absolut positioniertes Element orientiert sich bei der Ausrichtung an demjenigen Elternelement, welches nicht die Eigenschaft position:static; (default) hat.

Mit diesem Wissen kannst du jetzt irgendeinem Elternelement von der 2. UL (#Navigation > ul > li > ul) position:relative; verpassen und die 2. UL daran ausrichten.

Achte auch darauf, das absolut positionierte Elemente teilweise das Verhalten von normalen Blockelementen verlieren. Hauptsächlich die automatische Ausdehnung in der Breite.

Mit float:left; kannst du Blockelemente, die ja normalerweise einen Absatz erzeugen, also untereinander erscheinen, nebeneinander anordnen (wenn Platz vorhanden ist).

Benutze Firebug o.ä. zum Debuggen (ansehen, ausprobieren).

Die Erw. superfish liefert ein schönes Menü, ich meine auch direkt mit deinem resposive Wunsch. Schau's dir mal an.

Viel Spaß beim Entdecken von CSS.

Zitat:

---

Zitat von Andreas

Was willst du mit dem 'li'? #Navigation ul ul spricht genauso alle ULs nach dem ersten Level (nicht nur den 2. Level) an wie deins.

---

OCD meinerseits. Sei froh, dass ich nicht #Navigation > ul > li > ul schreibe :Þ.

Ups, du hast sogar recht. Meine Aussage zu #Navigation ul ul stimmt zwar, aber in meinem Text um nur die 2. UL anzusprechen muss es so heißen #Navigation > ul > li > ul. Die UL ist ja nicht direkt in der UL drin. :o

Hallo Andreas, Hallo Spooky,

vielen Dank erst einmal für eure teilweise sogar sehr ausführlichen Erklärungen.

Jetzt heissts bei mir erstmal Lern- und Fleiss-Arbeit.

Also vielen Dank nochmal, ich melde mich ganz bestimmt ... :D

Beste Grüße, Berliner

:D ...sooo :D

Hier ein aktueller Zwischenstand - allerdings steh ich nun endgültig im Wald. Abgesehen davon, dass die Artikel noch teilweise in die Navi-Leiste reinragen, bekomm ich es einfach nicht hin, die Level1-Elemente gleichmäßig auf die Gridbreite (grid 16 = 1140px) anzupassen / aufzuteilen, so dass es ansehnlich aussieht.

Änderungen mittels "padding" brachten auch nicht das Erwünschte.. *grummel*

Die nächste Sache sind die Level2-Elemente - gewünscht ist eine eingerückte, unter Level1 angeordnete Darstellung. Soweit ich nur 1 Untermenü habe, siehts auch gut aus - Wenn jedoch 2 Untermenü`s da sind, sieht`s schon anders aus..., diese werden neben dem Level1-Element dargestellt :(

Die Höhe der Navi-Leiste sollte ausreichen; Alles > 60px löst keine Veränderungen (>60px hätte ja evt. einen unterdrückten Zeilenwechsel wegnehmen können?) aus.
Die Rahmenlinie oben und unten sind derzeit noch als Hilfe für mich gedacht.

Der aktuelle Stand ist, dass ich derzeit fast alles, was die Navi betrifft, auf die basic.css eingeschränkt habe - Ausnahme ist das Ausblenden von "..skipnavigation".
Zum Bearbeiten und Live-Ansehen nehme ich die Dev-Tools; Firebug sehe ich leider nicht durch.. :(

*hmmm* vielleicht hat einer ne gute Idee dazu?

Code:

---

body {
    margin:0;
    padding:0;
    background:#dff0f2 url("/files/Heilsteine+Reiki/Bilder/Hintergrund_blau_1140x12.gif") center top repeat-y;
    font-family:Ubuntu,sans-serif,arial;
}

#wrapper {
    width:1140px;
    position:relative;
    margin:0 auto;
    height: auto !important;
}

Aussehen und Position des Header
#header {
    max-width:1140px;
    position:relative;
    float:none;
    margin-right:auto;
    margin-left:auto;
    padding-top:5px;
    padding-bottom:5px;
    font-family:Ubuntu,sans-serif,arial;
}

#container {
    max-width:1138px;
    position:relative;
}

#container,
.inside {
    position:relative;
}

#main {
    max-width:1140px;
    position:relative;
    margin-right:auto;
    margin-left:auto;
}

Hauptspalte
#main .inside {
    min-height:1px;
    position:relative;
    margin-bottom:20px;
}

waagerechte Navi-NEU
.mod_navigation {
    height:70px;
    max-width:1140px;
    bottom:0;
    left:0;
    right:0;
    top:10px;
    position:relative;
    float:left;
    display:block;
    border-width:2px 0px;
    border-style:ridge;
    border-color:#90bdde;
}

Aussehen der Navigation im Level 1- neu waagerecht
.mod_navigation a,
.mod_navigation li,
.mod_navigation span {
    float:left;
    display:block;
    margin-right:auto;
    margin-left:auto;
    padding:0 5px 0 10px;
    font:1.0em/1.5em Ubuntu,sans-serif,arial;
    font-weight:bold;
    text-decoration:none;
    color:#055b80;
    text-indent:5px;
}

Aussehen der Navigation im Level 2 -neu waagerecht
.mod_navigation .level_2 a,
.mod_navigation .level_2 li,
.mod_navigation .level_2 span {
    display:block;
    font:0.938em/1.5em Ubuntu,sans-serif,arial;
    font-weight:normal;
    text-decoration:none;
    color:#0d2d69;
    text-indent:15px;
}

Farbe und Größe des aktuellen Menüpunktes
.mod_navigation span.active {
    font:1.250em/1.5em Ubuntu,sans-serif,arial;
    font-weight:bold;
    text-decoration:underline;
    color:#147e87;
}

Hover-Effekt im Menü - Farbänderung
.mod_navigation a:hover {
    font:1.250em Ubuntu,sans-serif,arial;
    font-weight:bold;
    color:#0e689c;
}

Artikel-Darstellung
.mod_article {
    position:relative;
    margin:0 0 25px;
}

---

Beste Grüße, ganz dickes Dankeschön schon einmal vorab und einen schönen Abend, Berliner

.mod_navigation ul.level_2 { display:inline-block;} wäre eine Möglichkeit

Sorry, aber das CSS sieht allgemein irgendwie ziemlich kaputt aus, z.B. so viele inherits, text-indent usw. die man eigentlich nie braucht. Mit dem Grid scheinst du auch nicht wirklich umgehen zu können, siehe dazu hier http://ck2013.think-contao.de/das-responsive-grid.html

Wenn du mal das kompl. CSS raus schmeißt und das hier einfügst, siehst du was ich meine. Das ist so ungefähr die Basis.

Code:

---

#header ul,
#header li,
#header a,
#header span {
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#header li {
  float: left;
}
#header ul.level_1 {
  position: relative;
}
#header ul ul {
  display: none;
  position: absolute;
}
#header a, #header span {
  background: yellow;
  border: 1px solid gray;
  color: brown;
  padding: 5px;
  text-decoration: none;
}
#header a:hover, #header span {
  color: red;
}
#header ul.level_1 > li:hover > ul {
  display: block;
}

---

Das ist jetzt allerdings für Hover-Dropdown, weil du die Navi so eingestellt hast, dass sie alle Level generiert.

Stell die Navi mal so ein, dass sie nur das Untermenü von der Hauptseite generiert, auf der du dich gerade befindest und benutze dann diese Version.

Code:

---

#header ul,
#header li,
#header a,
#header span {
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#header li {
  float: left;
}
#header ul.level_1 {
  position: relative;
}
#header ul ul {
  left: 0;
  position: absolute;
}
#header a, #header span {
  background: yellow;
  border: 1px solid gray;
  color: brown;
  padding: 5px;
  text-decoration: none;
}
#header a:hover, #header span {
  color: red;
}

---

Gib der #header .mod_navigation noch overflow:visible; um das hidden von .block zu überschreiben.

Sorry, aber ich kann dir nur ein Beispiel geben, bei dem du dein ganzes restliches CSS deaktivieren musst, weil man sonst alles mögliche überschreiben müsste. Das hier ist nur ein Grundgerüst. Je nachdem was du sonst da noch machst muss man das natürlich anpassen und auch noch in anderen Browsern kontrollieren. Setz deine Formatierungen zum Schluss nur auf #header a, #header span und #header a:hover, #header span

Das Posten von deinem CSS kannst du dir eigentlich sparen, zumal du ja einen Link auf die Seite gesetzt hast. Man muss das CSS ja immer im Zusammenspiel mit dem HTML betrachten.

Im Firebug auf der linken Seite den HTML-Tab aktivieren, dann siehst du rechts das passende CSS, welches du temporär verändern kannst, auch komfortabel z.B. mit den Pfeil nach oben und unten Tasten.

Zitat:

---

Zitat von wulf

.mod_navigation ul.level_2 { display:inline-block;} wäre eine Möglichkeit

---

Vielen Dank für deine Antwort. Hoffe, dass es schon mal weiterbringt.

Beste Grüße, Berliner

guten Morgen, auch dir vielen Dank für deine schnelle und ausführliche Antwort.

Zitat:

---

Zitat von Andreas

Sorry, aber das CSS sieht allgemein irgendwie ziemlich kaputt aus, z.B. so viele inherits, text-indent usw. die man eigentlich nie braucht. Mit dem Grid scheinst du auch nicht wirklich umgehen zu können, siehe dazu hier http://ck2013.think-contao.de/das-responsive-grid.html

---

Ich vermute auch, dass die CSS einiges "mitbekommen" hat, bei den Crash`s, die ich hatte. Viele Einstellungen sind allerdings noch Überbleibsel aus dem ursprünglichen Aufbau der Seite. Und da ich, wie du ja schon bemerkt hast, CSS bisher nur in Dreamweaver bearbeitet habe und beim "Reinfummeln" bin, traue ich mich nicht, zu löschen, ohne zu wissen, was dann passiert ;) .
Das Grid ist eine Erweiterung, die ich installiert habe - soweit ich die entsprechende CSS verstehe, werden dort nicht wirklich Feinheiten formuliert, sondern eher das Grundgerüst.

Hauptproblem ist wohl, dass ich mich an etwas herangewagt habe, was vielleicht im Grundsatz etwas zu "groß" ist .. *gg*

Zitat:

---

Zitat von Andreas

Sorry, aber ich kann dir nur ein Beispiel geben, bei dem du dein ganzes restliches CSS deaktivieren musst, weil man sonst alles mögliche überschreiben müsste. Das hier ist nur ein Grundgerüst. Je nachdem was du sonst da noch machst muss man das natürlich anpassen und auch noch in anderen Browsern kontrollieren. Setz deine Formatierungen zum Schluss nur auf #header a, #header span und #header a:hover, #header span

---

Danke für dieses ausführliche Grundgerüst. Sollte wirklich alle Stricke reißen, werde ich wohl darauf zurückkommen. ;) Bis dahin würde ich mich allerdings an vorhandenem probieren - auch um zu lernen. Nachteil wäre hier, dass ich euch ständig "nerve" ;).

Zitat:

---

Zitat von Andreas

Das Posten von deinem CSS kannst du dir eigentlich sparen, zumal du ja einen Link auf die Seite gesetzt hast. Man muss das CSS ja immer im Zusammenspiel mit dem HTML betrachten.

---

Stimmt - daran dachte ich nicht, dass ja die Seite live analysiert wird... Werde das unterlassen :)

Zitat:

---

Zitat von Andreas

Im Firebug auf der linken Seite den HTML-Tab aktivieren, dann siehst du rechts das passende CSS, welches du temporär verändern kannst, auch komfortabel z.B. mit den Pfeil nach oben und unten Tasten.

---

Danke auch für den Anwendungstip zu Firebug.

Beste Grüße, Berliner