CSS horizontale Navigation auf 2.7.2

Hallo,

ich will derzeit eine 2-stufige horizontale Navigation formatieren, aber es klappt nicht.

Für die 1. Ebene habe ich das Modul navigation1 und für die zweite ebene das Modul navigation2
navigation 1: startlevel 1 / stoplevel 1 / hard limit
navigation 2: startlevel 2 / stoplevel 0

im css möchte ich die navigation1 wie folgt ansprechen

.mod_navigation ul.level_1 bzw. .mod_navigation li.level_1 .mod_navigation a.level_1

und navigation2 würde ich so ansprechen:
.mod_navigation ul.level_2 bzw. .mod_navigation li.level_2 .mod_navigation a.level_2

allerdings werden meine navigation2 ausgaben formatiert wie navigation 1

Wie spreche ich mein Modula navigation2 direkt an?

Früher war das ja einfacher mit .mod_navigationMain und .mod_navigationSub

M.E. nimmt mein Modul navigation2 wieder die Infos der level_1 hinterlegten Informationen.



Vielen Dank

Weise deinen Navigationen am besten einfach im Adminbereich unter Module eine eigene ID zu. Dann kannst du sie damit per CSS direkt ansteuern (ist auch kürzer, als jedesmal der lange Klassenname).

Z. B. ID menu1 und ID menu2 oder sowas in der Art.

Hallo Nina,

vielen Dank mit den IDs,

allerdings kenne ich mich gerade damit noch nicht so aus.

Nehemen wir nun an ich vergebe die IDs wie von Dir vorgeschlagen.

Wie greife ich dann im CSS wieder darauf zurück, dass ich dann

meine ID mit z.B.
.mod_navigation li
richtig verknüpfe. Wo muss ich hier meine id nav01 dazuschreiben bzw. in welcher Art und Weise?

Vielen Dank

Hast du einen Link zur Seite? Dann schau ich mir mal an, wie du dein CSS insgesamt bisher aufgebaut hast.

dies ist mein Navigations CSS
ich verwende es wie im TL Referenzsysem auch

und würde eben gerne

Level 1 Navigation und Level 2 Navigation individuell ansprechen...



.mod_navigation
{
width:900px;
padding-top:0px;
padding-right:30px;
padding-left:30px;
}
.mod_navigation ul.level_1
{
width:900px;
height:21px;
margin:0px;
padding:0px;
}
.mod_navigation .level_1 li
{
float:left;
margin-top:102px;
margin-right:40px;
color:#865285;
list-style-type:none;
}
.mod_navigation a,
.mod_navigation p,
.mod_navigation li
{
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:14px;
}
.mod_navigation p
{
font-weight:bold;
color:#865285;
}
.mod_navigation a
{
text-decoration:none;
color:#505050;
}
.mod_navigation a:hover
{
color:#865285;
}
.mod_navigation .level_2 li
{
float:left;
margin-top:7px;
margin-right:40px;
color:#865285;
list-style-type:none;
}
.mod_navigation .level_2 a,
.mod_navigation .level_2 p
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
.mod_navigation .level_2 p
{
margin-top:0px;
margin-bottom:0px;
padding-top:0px;
padding-bottom:0px;
color:#000000;
}

muss ich im Modul denn eigentlich hinter IDs auch noch spezielle Klassen eintragen?

Zitat:

---

Zitat von marczw

Ich verwende es wie im TL Referenzsysem auch

---

Damit wir nicht aneinander vorbeisprechen: Hast du zwei unterschiedliche Navigationsmodule angelegt, oder eines mit zwei Ebenen? Die TL-Demo hat ja gar kein horizontales Navigationsmenü ... oder meinst du eines der gekauften TL-Templates von Inetrobots (bzw. vom Handbuch für Admins)?

Wenn du zwei Module hast, dann kannst du es so machen:

• Du gehst im Adminbereich zu Layout -> Module
• Beim Modul der horiziontalen Navigation klickst du auf das Bleistift-Icon um in den Bearbeitungsmodus zu gelangen.
• Unten klappst du den Punkt "Experten-Einstellungen" (bei TL ab Version 2.7) auf, damit du die Eingabefelder für CSS-Id/Klasse siehst.
• Nun trägst du ins erste Feld davon (für die ID) das ein: menu1. Das Klassenfeld lässt du leer.
• Danach speicherst und schließt du den Bearbeitenmodus über den entsprechenden Button.

Das gleiche machst du jetzt noch für dein Untermenü, nur dass du dort die ID menu2 einträgst.

Kannst du mir keinen Link zu deiner Seite geben? Falls du ihn nicht hier posten willst, kannst du mir auch gerne eine Nachricht schicken. So rate ich hier in Bezug auf dein CSS sonst nur und sag dir eventuell was falsches.

Ich habe zwei Module angelegt, denn es sollen zwei Navigationen untereinander
horizontal angezeigt werden.

Ebene 1: horizontal
Ebene 2: horizontal - aber kleinere Schriftart, andere Farben, weniger Abstand zu Ebene 1 als Ebene 1 vom Startpunkt (oben) der Seite hat

Wenn sich das mit 1 Modul regeln lässt wäre es mir auch recht...

Link hab ich bekommen und schau mir gerade an, was du da so treibst ;)

Als erste Aufgabe: Weise deinen Navigationen doch jeweils noch die Klasse custom (im zweiten Feld) zu. Das ist eine Klasse die von TL in der typolight.css automatisch angelegt wird und hier dafür sorgt, dass deine Floatings auch mal wieder aufhören (siehe Clearfix-Methode).

wie spreche ich denn im css mittels selektor feld nun diese id an?

nochmals zu meinem Ziel:

ich brauche 1 horizontale Navigation 1. Ebene die von oben 102px unter dem Rand sitzt zugewiesen über <li> Selektor

ich brauche darunter 1 horizontale Navigation 2. Ebene, die zur davorliegenden einen Abstand zwischen 7 und 10px hat und eine wesentlich kleinere Schriftart verwendet...

Zitat:

---

Zitat von marczw

wie spreche ich denn im css mittels selektor feld nun diese id an?

nochmals zu meinem Ziel:

ich brauche 1 horizontale Navigation 1. Ebene die von oben 102px unter dem Rand sitzt zugewiesen über <li> Selektor

ich brauche darunter 1 horizontale Navigation 2. Ebene, die zur davorliegenden einen Abstand zwischen 7 und 10px hat und eine wesentlich kleinere Schriftart verwendet...

---

Grundsätzlich sprichst du eine ID in CSS mit einer Raute an. In deinem Beispiel also (wenn die ID menu1 gewählt wurde) mit #menu1.

In deinem konkreten Beispiel würde ich dir allerdings allgemein ein anderes herangehen an dein Layout raten:
Du weist den Abstand nach oben in der ersten Navebene derzeit jedem einzelnen LI mit einem Margin zu. Weise es doch stattdessen dem ganzen ersten UL zu :)

Abgesehen davon, würde ich dir raten, dass du nur ein Navigationsmenü-Modul einsetzt bei dem (sofern vorhanden) die Unterpunkte dann mit angezeigt werden. Bau das doch bitte mal so um, danach erkläre ich dir wie du dein CSS anpassen kannst um die grundsätzliche Darstellung hinzubekommen.

Für CSS-Finetuning würde ich dir dann dringend empfehlen, dass du dein Wissen zu CSS weiterbildest :)

Hallo,

ich hatte mit einem Navigationsmodul angefangen und es hat auch schon ganz fein ausgeschaut.

Die Höhenzuweisung hatte ich im <ul> eingebaut und es hat auch funktioniert.

Allerdings funktionierte das float nicht richtig im <li> Element des .level_1:

d.h. auf dem 4 Menüpunkt "Techniken" (der Ebene 1) liegen ja die Unterpunkte und er hat trotz Float Einstellung diesen 4. Menüpunkt immer in eine neue Zeile gezogen ...

Wie gesagt, stell mal bitte das hier ein:

Ein Modul Navigationsmenü mit Startlevel 0, Stoplevel 1 und keinem Haken bei HardLimit. Gib als ID hnav (ins erste Feld bei CSS-ID/Klassen) und als Klasse custom (ins zweite Feld bei CSS-Id/Klassen) ein.

Sobald du soweit bist, gib mir Bescheid. Dann erkläre ich dir, wie man es weiter nun per CSS richtig ansteuert.

....

wieder auf 1 Navigationsmodul reduziert - Du kannst Dir das Ergebnis ja gerne mal anschauen....
Hab ich da noch irgendwas mit dem Float falsch gemacht?

Lösche bitte jetzt alle Einträge aus deiner bNavigation.css und ersetze sie komplett mit diesen Einträgen:

Code:

---

/* Style sheet bNavigation */

#hnav { font-family:Arial, Helvetica, sans-serif; margin-top:102px;
padding-right:30px; padding-left:30px;}
#hnav ul, #hnav li { list-style-type:none; margin:0; padding:0; }
#hnav li{ float:left; }

#hnav a, #hnav span { display:block; margin:0; padding: 3px 20px;
color:#505050; text-decoration:none; font-size:14px; }
#hnav a:hover, #hnav a:focus, #hnav a:active { color: #865285; }
#hnav span, #hnav a.trail { font-weight:bold; color: #865285; }

#hnav .level_2a, #hnav .level_2span { font-size:11px; }

---

Wichtig: Das ist jetzt noch rudimentär, also erst der Anfang.

Hallo,

das habe ich so geändert,

das Problem ist aber immer noch das, dass wenn ich den Punkt "Techniken" markiert habe dann zuerst die "Ebene 2" Navigation eingeblendet wird und erst dann der Rest von der "Ebene 1" Navigation ...


Ist es möglich, dass hier noch ein Bug in TL vorhanden ist?

Bzw. wie könnte man es ggf. doch mit zwei Modulen abbilden?

Korrigiere bitte in deiner bBasic.css außerdem die nachfolgenden Anweisungen. Du handelst dir sonst nur massive Fehldarstellungen z. B. durch Einstellungsfehler beim sogenannten CSS Boxmodell ein.

Statt bisher:

Code:

---

#right {
background-image:url(tl_files/cms/bg_right.gif);
background-position:right top;
background-repeat:no-repeat;
margin:0;
padding:110px 15px 0;
width:170px;
}

---

Umstellen auf:

Code:

---

#right {
background-image:url(tl_files/cms/bg_right.gif);
background-position:right top;
background-repeat:no-repeat;
}
#right .inside {
padding:110px 15px 0;
}

---

Statt bisher:

Code:

---

#container {
background-image:url(tl_files/cms/main.gif);
background-repeat:repeat-y;
width:960px;
}

---

Umstellen auf:

Code:

---

#container {
background-image:url(tl_files/cms/main.gif);
background-repeat:repeat-y;
}

---

Statt bisher:

Code:

---

#main {
background-image:url(tl_files/cms/main_top.gif);
background-position:left top;
background-repeat:no-repeat;
margin:0;
padding:20px 0 20px 30px;
width:700px;
}

---

Umstellen auf:

Statt bisher:

Code:

---

#main {
background-image:url(tl_files/cms/main_top.gif);
background-position:left top;
background-repeat:no-repeat;
}
#main .inside {
padding:20px 0 20px 30px;
}

---

Merke dir bitte für die Arbeit mit Layouts in TYPOlight (aber auch allgemein):
Kombiniere möglichst niemals in einem DIV eine Breitenangabe (Width) mit zusätzlich noch Abstandsangaben (Padding, Margin)! Damit holst du dir richtigen Ärger mit CSS-Fehldarstellungen.

In TYPOlight gibt es für diesen Zweck innerhalb der Haupt-DIVs immer noch ein Innen-DIV mit der Klasse "inside". So kann man dem Haupt-DIV bei Bedarf z. B. eine Breitenangabe zuweisen und weist die Abstandsangabe dann dem inside-DIV zu.

Da du im Adminbereich von TYPOlight bereits übers Seitenlayout die grundlegendsten Breitenangaben gemacht hast (Gesamtbreite des Layouts, Breite der rechten Spalte), solltest du gar keine weiteren Breitenangaben mehr machen, sondern den Rest nur noch über die Abstände bei den inside-DIVs steuern.

Das gilt natürlich so nicht allgemein für alle TYPOlight-Layouts, aber in deinem Fall und bei den meisten typischen Layouts die mit dem TYPOlight-Framework gebaut werden stimmt es :)

Zitat:

---

Zitat von marczw

H
das Problem ist aber immer noch das, dass wenn ich den Punkt "Techniken" markiert habe dann zuerst die "Ebene 2" Navigation eingeblendet wird und erst dann der Rest von der "Ebene 1" Navigation ...
Ist es möglich, dass hier noch ein Bug in TL vorhanden ist?

---

Gaaaanz ruhig mit den jungen Pferden :D
Ich sagte ja, wir sind noch nicht fertig mit dem Anpassen. Mach bitte erstmal noch die CSS-Anpassungen rein, die ich im Beitrag über diesem hier angesagt habe. Danach zeig ich dir, wie es mit der 2. Ebene weitergeht :)

Eine Kleinigkeit noch: Mach bitte beim Navigations-CSS aus dem Margin-Top für #hnav ein Padding-Top: padding-top:102px; (sorry, mein Fehler).

Im Grunde müssen wir dein Layout und die Stylesheets erstmal ein bisschen aufräumen, damit sonstige Fehler weg sind und wir uns wirklich auf deine Navigation konzentrieren können.. Abgesehen davon versuche ich, dir ein paar der Layoutprinzipien zu erklären, damit du gleich was für die Zukunft mit CSS/TYPOlight lernst und auch andere die diesen Beitrag lesen etwas davon haben :)

...

Habe nun alle Änderungen am CSS eingebaut....

Ist natürlich sehr raffiniert die Breiten nicht doppelt anzugeben, wenn sie irgendwo anders im CMS schon stehen... ;-)

Allerdings hat die Navigation noch das Selbe Problem...

Ich habe gerade hin und her überlegt, wie wir das bei deinem speziellen Layout am besten hinbekommen. Ich denke, dass das hier helfen müsste. Ist doch ein wenig anders, als ich es vorhin gebaut habe, aber ich hatte nicht darauf geachtet, wie dein restliches Layout aufgebaut ist:

HTML-Code:

---

/* Style sheet bNavigation */
#hnav { font-family:Arial, Helvetica, sans-serif; }
#hnav ul, #hnav li{ margin:0; padding:0; list-style-type:none; }
#hnav li { display:inline; }
#hnav a, #hnav span { float:left; display:block; margin:0; padding:3px 20px; text-decoration:none; font-size:14px; color:#505050; }

#hnav a:hover,#hnav a:focus,#hnav a:active { color:#865285; }
#hnav span, #hnav a.trail{ font-weight:bold; color:#865285; }

#hnav .level_2 a,#hnav .level_2 span { font-size:11px; }

#hnav ul.level_1 { position:absolute; top: 100px; left: 30px; }
#hnav ul.level_2 { position:absolute; top: 130px; left: 30px; }

---

Nimm beim Modul die Klasse "custom" dann mal bitte doch testweise raus.

Im Grunde gehen wir nun so ran, dass wir die Basisangaben wie von dir gewünscht einstellen (Schriftgröße für Haupt- und Subnav, Darstellung der einzelnen Punkte, etc.), aber die zwei UL-Listen selbst absolut in deinem Header positionieren. So müsste es jetzt stimmen.

Es ist immer ein wenig schwierig, wenn man so aus der Ferne Vorschläge macht, da man sich dann doch erst den Rest des Layouts ansehen muss, damit die Vorschläge auch zu deinem restlichen Layout passen. :)

Du bist echt die Beste....

Jetzt ist das CSS System doch noch bezwungen bzw. richtig genutzt....

Habe von den Höhen noch etwas hin- und her modifiziert, aber nun bleibt die 1. Ebene Nav in einer Linie...

Noch eine letzte Frage: was ist denn zu tun, damit die Ebene 2 Navigation auch in einer Linie bleibt und nicht schon zur halben Zeile umbricht?

Danke Danke Danke :-)

Weise #hnav ul.level_1 testweise eine Breitenangabe von z. B. 900px zu.

Der Umbruch kommt daher, dass sich die Subnavigation an der Hauptnavigation in Bezug auf die Breite orientiert und deine Hauptnav wesentlich kürzer als die Subnav ist.

Freut mich, dass ich dir helfen konnte (siehe deine PNachricht) :)

Falls noch eine Frage aufkommt müssten dir aber jetzt für heute andere User helfen. Ich bin jetzt dann erstmal off für heute :)