horizontale listen navigation mit trennzeichen?

[tilgino]

hi,
ist es möglich eine horizontale listen (li) navigation zu erstellen und zwischen den menus ein trennzeichen zu machen...

in etwa so:

menu1 | menu2 | menu3 | menu4 | menu5

man kann auch die bullets (dots) von li elemten nicht nutzen wenn man sie vertikal, inline anwendet...

danke
gruss
peter

[Ingo Turski]

Hi,

in etwa so:

menu1 | menu2 | menu3 | menu4 | menu5

das sieht doch ganz nach border aus, oder?

freundliche Grüße
Ingo

[Gunnar Bittersmann]

menu1 | menu2 | menu3 | menu4 | menu5

tilgino,
Das Trennzeichen setzt du vor jedes Listenitem mit dem Pseudo-Elemente :before:
li:before {content: "| "}

Damit vor dem ersten Item (selektiert mit der Pseudo-Klasse :first-child) kein Trennzeichen steht:
li:first-child:before {content: ""}

Alternativ kannst du auch das Trennzeichen hinter jedes Item setzen, außer hinter das letzte:
li:after {content: " |"}
li:last-child:after {content: ""}

(:last-child gibt es zwar noch nicht in CSS 2, sondern erst in CSS 3, aber die modernen Browser interpretieren das schon.)

Der IE hingegen kennt weder :before und :after noch :first-child. Für den muss es wohl eine Lösung mit border sein, wie Ingo sagte.

Wenn die Items nicht alle in eine Zeile passen und du das Trennzeichen hinter dem jeweils letzten Item, nie jedoch vor dem ersten Item einer Zeile haben möchtest, musst du das geschützte Leerzeichen verwenden. HTML-Entities wie   versteht CSS natürlich nicht, aber Backslash-Escapes:
li:after {content: "\A0 |"}

Live long and prosper,
Gunnar

[Ashura]

Hallo Gunnar.

menu1 | menu2 | menu3 | menu4 | menu5

Der IE hingegen kennt weder :before und :after noch :first-child. Für den muss es wohl eine Lösung mit border sein, wie Ingo sagte.

Ohne ::first-child bekommt man obiges aber auch mit border nicht hin, sofern man das Markup unverändert lässt.

Einen schönen Montag noch.

Gruß, Ashura

[Gunnar Bittersmann]

Ohne ::first-child bekommt man obiges aber auch mit border nicht hin, sofern man das Markup unverändert lässt.

Ashura,
sollen die IE-Nutzer doch den Browser wechseln oder halt einen Strich mehr sehen.

Warum eigentlich zwei Doppelpunkte? Hab das schon öfeter gesehen, mir aber noch keinen Reim drauf gemacht. Irgendwelche Änderung in CSS 3?

Live long and prosper,
Gunnar

[Ashura]

Hallo Gunnar.

sollen die IE-Nutzer doch den Browser wechseln oder halt einen Strich mehr sehen.

Ja, sehen ich ebenso. *Dieses* Manko ist ja wohl eines der kleinsten Übel überhaupt.

Warum eigentlich zwei Doppelpunkte? Hab das schon öfeter gesehen, mir aber noch keinen Reim drauf gemacht. Irgendwelche Änderung in CSS 3?

Ja. Dadurch werden ab CSS Level 3 Pseudoelemente von Pseudoklassen unterschieden. Unterstützt wird die neue Notation von Firefox, Opera und Konqueror, soweit ich dies beobachten konnte.

Einen schönen Montag noch.

Gruß, Ashura

[wahsaga]

hi,

Ohne ::first-child bekommt man obiges aber auch mit border nicht hin, sofern man das Markup unverändert lässt.

Kommt drauf an - man könnte ja z.b. den border-left des ersten Elementes "unter dem Rand" eines umgebenden Elementes verstecken, o.ä. :-)

gruß,
wahsaga

[Ashura]

Hallo wahsaga.

Ohne ::first-child bekommt man obiges aber auch mit border nicht hin, sofern man das Markup unverändert lässt.

Kommt drauf an - man könnte ja z.b. den border-left des ersten Elementes "unter dem Rand" eines umgebenden Elementes verstecken, o.ä. :-)

Ja, ginge auch.

Ich glaube aber, dass ich mir selbst noch einmal die selector-Sektion von CSS Level 3 durchlesen sollte.

Einen schönen Montag noch.

Gruß, Ashura