Ergebnis 1 bis 24 von 24

Thema: Navigation mit "Abstand"

  1. #1
    Contao-Nutzer
    Registriert seit
    24.02.2010.
    Beiträge
    61

    Standard Navigation mit "Abstand"

    Hallo zusammen,

    ich möchte eine Navigation erstellen die bei einigen Menüpunkten einen Abstand enthält.

    etwa so :

    -Ebene1
    -Ebene2
    -Ebene3
    -(abstand)
    -(abstand)
    -Ebene4
    -Ebene5
    -(abstand)
    -(abstand)
    -Ebene6
    -Ebene7
    -Ebene8
    -(abstand)
    -(abstand)
    -Ebene9

    muss ich mit verschiedene Templates arbeiten oder gibt es einen einfacheren Weg ?
    gruss nada

  2. #2
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.293
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo nada,
    einfach den Seiten in der Seitenstruktur eine Klasse geben (z.B. 'abstand'). Dann kannst du den Rest über CSS machen .abstand {margin-top: 2em;}

    Viele Grüße
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  3. #3
    Contao-Nutzer
    Registriert seit
    24.02.2010.
    Beiträge
    61

    Standard

    So einfach !!! Danke
    gruss nada

  4. #4
    Gesperrt
    Registriert seit
    07.05.2011.
    Beiträge
    1.199

    Standard

    Guter Tipp, da muss man erstmal drauf kommen. :-)

    Und weil das Listenelement und der Link so beide diese Klasse erhalten, kann man im CSS auch beides ansprechen. Z. B. um in Submenüs außer dem Abstand auch eine Trennlinie zwischen bestimmte Navigationspunkte zu setzen.

  5. #5
    Contao-Nutzer
    Registriert seit
    23.08.2011.
    Beiträge
    176

    Standard

    Guter Tipp für den Abstand, muss ich mal ausprobieren.
    Wie kann man das machen, dass der oberste Punkt manchmal nicht klickbar ist, aber angezeigt wird.
    Bsp.:

    Seite1 <= mit Ihnhalt soll klickbar sein.
    Seite1.1
    Seite1.2

    Seite2 <= ohne Inhalt als Überschrift für die Unterpunkte, soll nicht klickbar sein.
    Seite2.1
    Seite2.2
    Seite2.2.1
    Seite2.2.2

  6. #6
    Alter Contao-Hase Avatar von bizon
    Registriert seit
    16.06.2010.
    Beiträge
    1.125

    Standard

    Im Wiki ist eine Anleitung.

  7. #7
    Contao-Nutzer
    Registriert seit
    23.08.2011.
    Beiträge
    176

    Standard

    Oh super und danke für die schnelle Antwort.

    Bei contao 2.10 gibt es zwei Templates
    nav_default.xhtml
    nav_default.html5

    Welches müsste ich ändern oder gar beide?

  8. #8
    Alter Contao-Hase Avatar von bizon
    Registriert seit
    16.06.2010.
    Beiträge
    1.125

    Standard

    Ich benutze noch durchgehend xhtml, weil es sicher noch einige Zeit braucht bis html5 wirklich Standard ist.

  9. #9
    Contao-Nutzer
    Registriert seit
    23.08.2011.
    Beiträge
    176

    Standard

    Zitat Zitat von MacKP Beitrag anzeigen
    einfach den Seiten in der Seitenstruktur eine Klasse geben (z.B. 'abstand'). Dann kannst du den Rest über CSS machen .abstand {margin-top: 2em;}
    Wenn man das so macht, bekommt aber auch die Seite selbst ein Margin oben und "hoppst" dann beim Aufruf entsprechden im Vergleich zu den anderen Seiten.

  10. #10
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.293
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo rost,
    das passiert nur, wenn man die Spezifikation beim CSS nicht bedenkt und nur diese Klasse nimmt. Anders sieht es aus, wenn man .navigation .klassevonderseite {abstand} schreibt.

    Viele Grüße
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  11. #11
    Contao-Nutzer
    Registriert seit
    23.08.2011.
    Beiträge
    176

    Standard

    Danke für die schnelle Antwort.

    Bei mir funktioniert es nur mit
    Code:
    .mod_navigation .abstand {margin-top:1em;}

  12. #12
    Contao-Nutzer
    Registriert seit
    29.07.2012.
    Beiträge
    87

    Standard

    Ich möchte eine Navigation erstellen, die bei den Menüpunkten folgenden Abstand enthält:
    Seite1 Seite2 Seite3 Seite4 Seite5

    Wie mache ich das? Also so wie im Anhang möchte ich's gerne haben.
    Angehängte Grafiken Angehängte Grafiken

  13. #13
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.293
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo Umar,
    kann man verschiedenartig machen mit CSS. Zum Beispiel mit border-left: 10px; oder was auch immer.

    Viele Grüße
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  14. #14
    Contao-Nutzer
    Registriert seit
    29.07.2012.
    Beiträge
    87

    Standard

    Hallo MacKP, danke sehr! Bloß es tut sich da nichts. Vielleicht habe ich auch mein Problem nicht klar formuliert.
    Ich möchte meine Menüleiste so wie hier (also mit der Trennung und den Abständen) erstellen: http://dailydesignnotes.com

    Ich weiß leider nicht, wie ich das hinbekomme. Ich habe schon einiges versucht.
    Angehängte Grafiken Angehängte Grafiken

  15. #15
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.293
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    naja, margin-left: 10px; geht auch... kannst ja auch mal auf der Seite da selber gucken mit Firebug.
    Warum was bei dir nicht geht, kann ich so nicht sagen. Wäre besser, wenn du uns einen Link geben könntest zu deiner Seite um das dann direkt da sehen zu können.

    Viele Grüße
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  16. #16
    Contao-Nutzer
    Registriert seit
    29.07.2012.
    Beiträge
    87

    Standard

    Danke, ich schaue mal ob das so funktioniert. Meine Seite läuft momentan nur unter localhost.
    Ich habe eine Vorahnung woran das liegt... Sicher bin ich mir aber nicht! Vielleicht kann mir trotzdem auf Anhieb einer weiterhelfen.

    Bei mir sieht die Menüleiste halt so aus. Und das möchte ich getrennt (d.h. Startseite, Seite 1, Seite 2, Seite 3, usw. für sich alleine) haben:
    Angehängte Grafiken Angehängte Grafiken
    Geändert von Umar (04.04.2013 um 15:39 Uhr)

  17. #17
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.293
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Dann poste uns wenigstens mal dein CSS für die Navi.
    Ich weiß z.B. nicht ob die Grafik im Hintergrund beim ul, li oder a vergeben wurde oder sonst wo...
    Ohne Code oder so kann man da nicht viel sagen...
    An sich Abstand (also margin).. nur an welcher Stelle wirst du so selber gucken müssen. Oder du machst einfach den Strich rechts breiter.. dann wirkt das ja auch so.. mit border...

    Viele Grüße
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  18. #18
    Contao-Nutzer
    Registriert seit
    29.07.2012.
    Beiträge
    87

    Standard

    CSS für die Navi:

    Code:
    #nav_1 {
        right:0;
        position:absolute;
        float:right;
        background:#000 url("tl_files/ihya/nav.gif") left top repeat-x;
    }
    
    #nav_1 ul {
    }
    
    #nav_1 li {
        list-style-type:none;
    }
    
    #nav_1 li a {
        border-right:1px solid #000;
        font-weight:bold;
        color:#E5F2FF;
    }
    
    #nav_1 a, #nav_1 li, #nav_1 span {
        font:12px Verdana,Geneva,Arial,Helvetica,sans-serif;
        font-weight:bold;
        color:#fff;
    }
    
    /* --hover || focus ------------------------------------------------- */
    #nav_1 a:hover, #nav_1 a:focus {
        font-weight:bold;
        color:#fff;
    }
    
    #nav_1 li.sfhover a, #nav_1 li.active a {
        font-weight:bold;
        color:#fff;
    }

  19. #19
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.293
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Versuchs mal mit
    Code:
    #nav_1 li {border-right: 10px solid #000;}
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  20. #20
    Contao-Nutzer
    Registriert seit
    29.07.2012.
    Beiträge
    87

    Standard

    Danke, dass funktioniert zwar, aber der Hintergrund der Abstände ist nicht Transparent sondern schwarz.
    Was muss ich in diesem Fall tun?

  21. #21
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.293
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Du kannst in dem Fall den li's auch nen margin geben anstelle von dem Rahmen an der Seite...
    Ich weiß ja immer noch nicht wie genau du das haben willst...
    der Verlauf im HIntergrund ist dann aber immer noch zu sehen, da der ja dem div zugewiesen wurde...

    Viele Grüße
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  22. #22
    Contao-Nutzer
    Registriert seit
    29.07.2012.
    Beiträge
    87

    Standard

    MacKP, ich habe jetzt den Farbcode #999 genommen, da es zum Hintergrund passt. Vielen Dank! Du hast mir weitergeholfen!

    Ich möchte gerne, dass die Grafik bzw. das Menü eine bestimmte Breite und Höhe bekommt, so ähnlich wie auf dailydesignnotes.com. Ich habe alles versucht, aber irgendwie funktiert es nicht (bzw. ich weiß nicht wo und wie man das genau macht). Ich hoffe, dass du mir auch in diesem Fall weiterhelfen kannst.
    Geändert von Umar (05.04.2013 um 03:40 Uhr)

  23. #23
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.293
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    dem a und dem span (für activ) padding geben... oder line-hight und padding anpassen.

    Viele Grüße
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  24. #24
    Contao-Nutzer
    Registriert seit
    29.07.2012.
    Beiträge
    87

    Standard

    Ich habe es geschafft! Es funktioniert jetzt! Vielen Dank!
    Geändert von Umar (06.04.2013 um 02:21 Uhr)

Aktive Benutzer

Aktive Benutzer

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

Berechtigungen

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