Contao-Camp 2024
Ergebnis 1 bis 23 von 23

Thema: CSS horizontale Navigation auf 2.7.2

  1. #1
    Contao-Nutzer
    Registriert seit
    27.06.2009.
    Beiträge
    17

    Standard 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

  2. #2
    Administrator Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Hamburg
    Beiträge
    4.755
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  3. #3
    Contao-Nutzer
    Registriert seit
    27.06.2009.
    Beiträge
    17

    Standard IDs

    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

  4. #4
    Administrator Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Hamburg
    Beiträge
    4.755
    Contao-Projekt unterstützen

    Support Contao

    Standard

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

  5. #5
    Contao-Nutzer
    Registriert seit
    27.06.2009.
    Beiträge
    17

    Standard so schaut es derzeit aus

    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;
    }

  6. #6
    Contao-Nutzer
    Registriert seit
    27.06.2009.
    Beiträge
    17

    Standard IDs und Klassen

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

  7. #7
    Administrator Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Hamburg
    Beiträge
    4.755
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von marczw Beitrag anzeigen
    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.

  8. #8
    Contao-Nutzer
    Registriert seit
    27.06.2009.
    Beiträge
    17

    Standard zwei Module

    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...

  9. #9
    Administrator Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Hamburg
    Beiträge
    4.755
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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).

  10. #10
    Contao-Nutzer
    Registriert seit
    27.06.2009.
    Beiträge
    17

    Standard id

    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...

  11. #11
    Administrator Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Hamburg
    Beiträge
    4.755
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von marczw Beitrag anzeigen
    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

  12. #12
    Contao-Nutzer
    Registriert seit
    27.06.2009.
    Beiträge
    17

    Standard CSS umbauen

    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 ...

  13. #13
    Administrator Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Hamburg
    Beiträge
    4.755
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  14. #14
    Contao-Nutzer
    Registriert seit
    27.06.2009.
    Beiträge
    17

    Standard ist erledigt

    ....

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

  15. #15
    Administrator Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Hamburg
    Beiträge
    4.755
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  16. #16
    Contao-Nutzer
    Registriert seit
    27.06.2009.
    Beiträge
    17

    Standard geändert

    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?

  17. #17
    Administrator Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Hamburg
    Beiträge
    4.755
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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

  18. #18
    Administrator Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Hamburg
    Beiträge
    4.755
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von marczw Beitrag anzeigen
    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
    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

  19. #19
    Contao-Nutzer
    Registriert seit
    27.06.2009.
    Beiträge
    17

    Standard Änderungen alle eingebaut

    ...

    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...
    Geändert von marczw (27.06.2009 um 17:09 Uhr)

  20. #20
    Administrator Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Hamburg
    Beiträge
    4.755
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  21. #21
    Contao-Nutzer
    Registriert seit
    27.06.2009.
    Beiträge
    17

    Standard :-)

    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 :-)

  22. #22
    Administrator Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Hamburg
    Beiträge
    4.755
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  23. #23
    Administrator Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Hamburg
    Beiträge
    4.755
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Ähnliche Themen

  1. Horizontale Navigation
    Von vertexino0 im Forum Layout / Templates / Holy Grail
    Antworten: 4
    Letzter Beitrag: 24.09.2010, 07:35
  2. Horizontale Navigation
    Von Nap im Forum Layout / Templates / Holy Grail
    Antworten: 5
    Letzter Beitrag: 03.03.2010, 16:59
  3. Horizontale navigation
    Von JohannesH im Forum Layout / Templates / Holy Grail
    Antworten: 1
    Letzter Beitrag: 19.11.2009, 10:08
  4. horizontale navigation !?
    Von sfx im Forum Layout / Templates / Holy Grail
    Antworten: 2
    Letzter Beitrag: 09.08.2009, 22:37
  5. Horizontale Navigation
    Von christopher im Forum Layout / Templates / Holy Grail
    Antworten: 18
    Letzter Beitrag: 09.07.2009, 22:56

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •