Frage zu den vorgefertigten Layouts auf Selfhtml

[Beat]

Und das zwitschert er:

<ul id="navitop">
     <li>| <a href="http://forum.de.selfhtml.org">impressum</a></li>
     <li> | <a href="http://forum.de.selfhtml.org">feedback</a></li>
     <li> | <a href="http://forum.de.selfhtml.org">guestbook</a></li>
     <li> | <a href="http://forum.de.selfhtml.org">home</a> |</li>
  </ul>
"Zahnstocherei-Zahnstocherei"
Die '|' liessen sich doch mit CSS einbinden.
wie denn einbinden?

Im folgenden behanlde ich nur die dazwischen liegenden '|'.

Zum Beispiel mit den :before oder :after Pseudoelementen.

#navitop li + li:before{ content: '|'; }

Diese Version wird nicht von allen Browsern unterstützt.

Eine sauberere Version, in dem border-left verwendet wird:

#navitop li { padding: 0 1em; }  
#navitop li + li{ border-left: 1px solid black; }

Ich habe die Werte jetzt nicht mit dem konkreten Layout abgeglichen.

Will man's auch für die äusseren Grenzen verwendet man halt border-left und border-right.

mfg Beat