Menüleiste mit Trennlinien versehen

Thema wurde von matthias_wempe, 12. November 2017 erstellt.

  1. matthias_wempe
    matthias_wempe Mitglied
    Registriert seit:
    8. November 2017
    Beiträge:
    12
    Danke erhalten:
    0
    Danke vergeben:
    1
    Hallo,

    ich könnte mal eure Hilfe gebrauchen, denn ich verzweifel leider ein wenig mit meinen nicht gerade ausgeprägten Programmierkenntnissen. Ich möchte gerne das die Menü- / Kategorieleiste meines Shops mit Trennlinien versehen, exakt wie auf dieser Seite https://www.mister-2rad.de , nur halt mit eigenen Farben. Kann mir jemand weiterhelfen und sagen, wie das funktioniert?

    Ich freue mich auf eure Antworten!

    Herzliche Grüße aus Oldenburg,
    Matthias Wempe
     
  2. Anonymous
    Anonymous G-WARD 2015/2016
    Registriert seit:
    20. Februar 2012
    Beiträge:
    9.088
    Danke erhalten:
    1.613
    Danke vergeben:
    1.212
    Hallo Matthias

    willkommen im Forum.

    Bei Mister 2-Rad sieht der Code an dieser Stelle so aus:

    Code:
    #head_navi ul li {
        border-right: 1px solid #cecece;
        display: inline;
        float: left;
        padding: 0 0 0 0;
        height: 50px;
    }
    Für die Trennlinien ist das "border-right" verantwortlich.

    Versuche doch mal das hier als eigenes CSS im Styleedit einzugeben:

    Code:
    #head_navi ul li {
        border-right: 1px solid #cecece;
    }
    Caches leeren nicht vergessen. Das #cecece kannst Du natürlich auf Deine Wunschfarbe ändern.
     
  3. matthias_wempe
    matthias_wempe Mitglied
    Registriert seit:
    8. November 2017
    Beiträge:
    12
    Danke erhalten:
    0
    Danke vergeben:
    1
    Hallo Achim,

    vielen Dank für deine schnelle Unterstützung. Den CSS Code habe ich wie beschrieben eingegeben. Die Höhe hat sich im Menü verändert, auch der Text ist wunderbar zentriert, allerdings zeigt er die Trennlinien noch nicht an. Ich habe auch versucht, den Code von oben einzugeben. Auch dies funktioniert leider nicht. Weißt du vll. woran das liegen könnte?

    LG, Matthias
     
  4. Anonymous
    Anonymous G-WARD 2015/2016
    Registriert seit:
    20. Februar 2012
    Beiträge:
    9.088
    Danke erhalten:
    1.613
    Danke vergeben:
    1.212
    Link zum Shop?
     
  5. Anonymous
    Anonymous G-WARD 2015/2016
    Registriert seit:
    20. Februar 2012
    Beiträge:
    9.088
    Danke erhalten:
    1.613
    Danke vergeben:
    1.212
    Tipp: wenn Du im Chrome-Browser mit der rechten Maustaste auf den Bereich klickst und dann auf "untersuchen" klickst, bekommst Du den CSS-Code angezeigt und kannst ihn dort auch testweise ändern.

    Sieht so aus:
    Bild 1 ist der angezeigt Code
    Bild 2 ist die Optik wenn man den border-Code deaktiviert
     

    Anhänge:

  6. sven_fellermann
    sven_fellermann Erfahrener Benutzer
    Registriert seit:
    26. Mai 2017
    Beiträge:
    102
    Danke erhalten:
    4
    Danke vergeben:
    52
    Moin Moin :)
    Hat hier jemand vielleicht noch ne Idee wie man die Trennlinien realisiert? Irgendwo scheint ein Haken zu sein...
     
  7. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Code:
    .navbar-categories > ul > li {
        border-right: 1px solid #DeineFarbe;
    }
    sollte funktionieren
     
  8. sven_fellermann
    sven_fellermann Erfahrener Benutzer
    Registriert seit:
    26. Mai 2017
    Beiträge:
    102
    Danke erhalten:
    4
    Danke vergeben:
    52
    Ja cool, der ging nun, DANKE