Trennstriche im Navigations-Menü

Heute habe ich eine Frage zur Änderung des Aussehens des Menüs im Twenty Thirteen Theme erhalten:

Wie kann ich zwischen die Menüpunkte einen Trennstrich einbauen?

Dafür ergänze ich

.nav-menu li a {
color: #fff; /*neue Textfarbe */
display: block;
font-size: 15px;
line-height: 1;
padding: 15px 20px;
text-decoration: none;
}

mit der Zeile:

border-right: 1px solid #000;

zu

.nav-menu li a {
color: #fff; /*neue Textfarbe */
display: block;
font-size: 15px;
line-height: 1;
padding: 15px 20px;
text-decoration: none;
border-right: 1px solid #000;
}

Damit ist jetzt ein Trennstrich auf der rechten Seite vom jeweiligen Menüpunkt.

  • 1px ist die Rahmenstärke,
  • solid ist die Rahmenart (es gibt noch dashed und dotted für gestrichelt und gepunktet),
  • #000 ist die Rahmenfarbe, in diesem Fall Schwarz.

Der letzte Strich ist natürlich überflüssig, daher heben wir mit dem Pseudo-Befehl „:last-child“ diese Formatierung für das letzte <li> – bzw. <a>-Element wieder auf:

.nav-menu li:last-child a {
border-right:none;
}

Fertig 🙂

Vielen Dank an WalterD für die Frage!

Sie haben auch ein Problem? Nur zu – ich werde versuchen eine Antwort zu finden und hier zu veröffentlichen..

1 Gedanke zu „Trennstriche im Navigations-Menü“

  1. Sehr geehrter Herr Kuhlmann,

    besten Dank für Ihre schnelle und umfassende Antwort zu meiner Frage nach Trennstrichen im Menü.

    Nun habe ich weitere Fragen zum Layout:
    1.) Ich hätte gerne die Höhe der Kopfzeile so verändert, dass ein bestimmtes Bild „kopffüllend“ hinein passt und nicht umgekehrt, dass ich das Bild an die Kopfgröße anpassen muß.
    2.) In der Nähe des linken Browser-Fenster-Randes soll eine Art senkrechtes Lineal dargestellt werden (= ein senkrechter Strich der etwa alle cm von einem kurzen waagrechten Strich gekreuzt wird) und zwar genau in der Länge, die die Anzahl Beiträge und Kommentare vorgibt. Grundgedanke meines Lösungsansatzes ist es, ein Hintergrundbild (etwa mit der Höhe der Teilung) einzubauen, das sich bis zum Erreichen der Gesamthöhe wiederholt. – Aber ich weiß nicht wie das geht 🙁
    3.) Links neben jedem Beitrag möchte ich zwei Bilder linksbündig untereinander anzeigen. Das ober Bild soll mit dem oberen Textrand beginnen und sich nach unten aufbauen. Und das untere Bild soll in einem festen Abstand zum unteren Bild positioniert werden.
    4.) Last not least würde ich gerne jeweils den linken, mittleren und rechten Spalte jeder Seite beeinflussen. Z.B. würde ich gerne die rechte Spalte zugunsten der Mittleren Spalte verkleinern.

    Uff – ich hoffe, diese Fragen sind meinerseits nicht zu unverschämt. Und noch mehr hoffe ich, dass Sie mir wieder helfen können.

    Mit freundlichen Grüßen
    WalterD

    Antworten

Schreibe einen Kommentar