Trennzeichen in Navigation

Thema wurde von S-IT, 9. November 2018 erstellt.

  1. S-IT
    S-IT Mitglied
    Registriert seit:
    9. November 2018
    Beiträge:
    24
    Danke erhalten:
    1
    #1 S-IT, 9. November 2018
    Hallo,

    ich möchte in der Navigation ein Trennzeichen einfügen, wie es in GX2 vorhanden war.

    Habe es hiermit versucht:

    li:before {content: "|"}

    li:first-child:before {content: ""}

    Allerdings kann ich die daraus resultierende Verschiebung in die zweite Spalte nicht korrigieren. Hat jemand eine bessere Lösung?

    In Bild 1 ist das Trennzeichen nachträglich eingezeichnet (in beiden Navigationen), wie es sein sollte. Bild 2 zeigt den Fehler.

    Verwende ich außerdem statt "|" das gewünschte <font style="color:#ff0000;"> | </font>, wird das Trennzeichen nicht angezeigt.

    Trennzeichen(1).png

    Trennzeichen(2).png
     
  2. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    #2 barbara, 9. November 2018
    Versuche es mal mit:
    Code:
    @media (min-width: 768px){
.navbar-nav > li {
    border-left: 1px solid #ff0000;
}
.navbar-nav > li:first-of-type {
    border-left: none;
}}
     
  3. S-IT
    S-IT Mitglied
    Registriert seit:
    9. November 2018
    Beiträge:
    24
    Danke erhalten:
    1
    #3 S-IT, 9. November 2018
    Trennzeichen.png

    Sieht dann so aus. Und dann bekomme ich die Höhe nicht an den Text angepasst.
     
  4. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    #4 barbara, 9. November 2018
    Da ändert man die Höhe der Leiste, nicht die des einzelnen Button
     
  5. S-IT
    S-IT Mitglied
    Registriert seit:
    9. November 2018
    Beiträge:
    24
    Danke erhalten:
    1
    #5 S-IT, 9. November 2018
    Gambio.png

    Hab ich schon versucht. Irgendwas stört da noch. Bin dran.
     
  6. S-IT
    S-IT Mitglied
    Registriert seit:
    9. November 2018
    Beiträge:
    24
    Danke erhalten:
    1
    #6 S-IT, 12. November 2018
    Meine vorläufige Lösung:

    div#topbar-container .navbar-nav > li {
    background-image: url(https://carbon-concepts.de/images/separator-topmenu.png);
    background-repeat: no-repeat;
    }

    div#topbar-container .navbar-nav > li:first-of-type {
    background-image: none;
    }

    div#categories .navbar-nav > li {
    background-image: url(https://carbon-concepts.de/images/separator-menu.png);
    background-repeat: no-repeat;
    }

    div#categories .navbar-nav > li:first-of-type {
    background-image: none;
    }

    separator-topmenu.png: Oben 8px transparent/Mitte 12px Farbe/8px transparent
    separator-menu.png: Oben 11px transparent/Mitte 18px Farbe/11px transparent



    Mir gefällt aber nicht, dass bei einer Grafik die Linie zu dick ist. Ist es möglich, dem im Screenshot markierten Element border-right unter Beachtung des Abstandes zuzuweisen? Oder eine weiße Grafik nur links über den Rahmen zu legen, die im Bereich des Striches transparent ist? Size 100% lässt den Rand an der Unterkante des Headers verschwinden.
    Trennzeichen.png