Gunnar Bittersmann: horizontale listen navigation mit trennzeichen?

Beitrag lesen

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

--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)