Horizontale Navigation

  • Hallo,

    ich würde für eine horizontale Navigation gern die Liste "Pipe Dream" von Michael Barrish verwenden
    Listamatic: Pipe Dream

    Im Beispiel rührt der senkrechte Strich zwischen den Menüpunkten, wenn ich das richtig erkannt habe, von diesem Eintrag
    border-left: 1px solid #000

    Wenn ich das Menü einbaue und die Position ausrichte, z.B. vom linken an den rechten Seitenrand rücke, hat der links außen sitzende Menüpunkt auch diesen Strich. Ich hätte aber gerne ein rechts und links "offenes" Menü, so, wie es auch im obigen Beispiel aussieht
    Punkt1 │ Punkt2 │ Punkt3 │ Punkt4

    Da ich das Menü auf der rechten Seite haben will, hab ich das Menü schom "umgekehrt" (border-right statt border-left), so dass der Trenn-Strich auf die rechte Seite rutscht, und das Menü dann so weit an den Rand meines Blogs gerückt, dass der überzählige Strich des äußersten rechten Menüpunkts direkt auf dem Rand sitzt und quasi "verschwunden" ist (siehe Bsp.-JPEG).

    Das ist ja aber keine saubere Lösung, zumal ich schon im IE gesehen hab, dass das ganze dort um ein Pixel verrutscht angezeigt wird und der überzählige Strich wieder zu sehen ist.

    Gibt es eine Möglichkeit, einen der Menüpunkte vom Anzeigen des Trenn-Strichs auszuschließen? Oder gibt es eine viel weniger umständliche Variante für mein gewünschtes Menü-Layout?

    Vielen Dank im Voraus,
    tengri

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Das ganze ist im Weblog des Autors ausführlich erklärt. Es kommt wohl darauf an, dass man dem umgebenden Container sowohl eine Breite als auch ein overflow: hidden verpasst und bei den Listenitems mit negativen Rändern arbeitet :-)

    Alternativ geht es theoretisch auch mit :first-child, funktioniert aber im IE erst ab Version 7.

  • Ah, wunderbar, danke für die schnelle Antwort. Sein Weblog kannte ich noch nicht - da kann ich mich jetz aber erst mal abarbeiten.
    Danke nochmals!

  • Hallo spickzettel, hat wirklich geklappt, das Ganze nach den Anweisungen des Autors zu ändern, auch die Ausrichtung an der rechten Seite. Besten Dank!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!