Navigation per CSS um Trenner erweitern

[Mauki]

Wie kann ich den meine obere Navigation (Startseite, Kontakt ...) per CSS um einen Trenner "|" erweitern.

Navigation aktuelle Seite --> Die Links stehen direkt im Code
Navigation Entwurf neue Seite --> Die Links werden von WP erzeugt

 

[Slashwalker]

.navi_oben a:after{
content:"|";
}

Aber der IE 6 macht da soweit ich weiß nicht mit , zudem erzeugt das auch hinter "Intern" einen |

 

[el caramba]

am schnellsten in dem du aus: Startseite ein Startseite | machst

haste ein plugin etc installiert oder missbrauchst du einfach das blog als cms?

 

[MasterofDistres]

Als schnelle Lösung würde ich einmal bei

.navi_oben li {
    display: inline;
    [B]border-right: 1px solid #fff;
    padding-right: 5px;[/B]
}

hinzufügen und folgendes für den letzten Punkt, um den Rahmen dort wieder zu entfernen:
(Klassen-Selektor ggfs. ändern)

li.page_item.page-item-55 {
	border-right: none;
	padding-right: 0px;
}

In CSSEdit (d.h. Webkit) hat es jedenfalls den gewünschten Effekt zur Folge gehabt, in FF /IE konnte ich's auf die schnelle nicht testen

 

[el caramba]

.navi_oben a:after{
content:"|";
}

Aber der IE 6 macht da soweit ich weiß nicht mit , zudem erzeugt das auch hinter "Intern" einen |

a:hover:after { content: " ]";}
a:focus:after { content: " ]";}

die kann der ie soviel ich weiß

 

[Mauki]

am schnellsten in dem du aus: Startseite ein Startseite | machst

naja das ist nicht so perfekt

haste ein plugin etc installiert oder missbrauchst du einfach das blog als cms?

Ja hab auch Plugins installiert, z.b pageMash oder Page Link Manager

@MasterofDistres
hab mal deine Lösung probiert. Auf dem PC sieht es in Safari spitze aus, in FF ist am Anfang noch ein Strich und im IE ist das grausig

 

[Mauki]

.navi_oben a:after{
content:"|";
}

Aber der IE 6 macht da soweit ich weiß nicht mit , zudem erzeugt das auch hinter "Intern" einen |

Mit dieser Lösung klebt der Strich direkt am Link

 

[Bajuware]

Ich würds auch über border-right machen, zusätzlich noch als block, die Höhe kleiner als die line-height und das entsprechende padding rein. Dann ist der Strich kleiner als die Schrift, was wahrscheinlich ein bisserl besser aussieht.

 

[Mauki]

@Bajuware
Wie würde da der passenden Code dafür aussehen?

Im FF ist aber bie border-right auch noch ein Strich vor Startseite. Wie bekommt man das den weg?

 

[Bajuware]

gib dem ersten Menüpunkt, deiner Startseite einfach ne weitere Klasse mit auf den Weg, die ein entsprechend den Border entfernt. Alternativ kannst du das ganze ja auch noch mittels Hintergrundbild gestalten um das ganze etwas aufzupeppen.

Beispiel:

.deineklasse { display: block; height: 20px; padding: 0 10px; background: #fff url(../deinbild.gif) top right no-repeat; line-height: 20px; font-family: ...; color: #fff; font-size: 12px; text-decoration: none; }

für den letzten Menüpunkt dann entsprechend

.deineklassezwei { background: #fff; }

da display block könntest du jetzt auch noch ein:

.deineklasse:hover, .deineklassezwei:hover { background: #f5f5f5; color: green; font-weight: bold; }

oder ähnliches stylen.

 

[Mauki]

Hab jetzt mal mit folgendem Code probiert und im Safari/FF sieht es gut aus. IE muß ich morgen mal checken!

Bekommt man die Trenner noch ein wenig kleiner?

.navi_oben li {
    display: inline;
    border-right: 1px solid #fff;
    padding-right: 5px;
	}

li.page_item.page-item-60 {
	border-left: none;
	padding-right: 0px;
	}

li.page_item.page-item-55 {
	border-right: none;
	padding-right: 0px;
	}