CSS Tipp: Trennstriche in der Navigation mittels Border

[Update2012 CSS3 Lösung] Oft mag man Trennstriche wo haben, aber immer nur nach dem Link und nicht nach dem letzten Link. Oder man mag Rahmen vergeben, aber auf einmal werden diese zu dick. Trennstriche mit Border aber nur dort wo man auch wirklich mag. Hier die CSS Tipps von mir – aus den Tiefen meiner Festplatte.

in

Navigation mit Trennstrichen CSS
Navigation mit Trennstrichen CSS auch IE tauglich

Oft mag man Trennstriche in einer Navigation haben. Doch genau nach dem letzten Link sollte keiner mehr erscheinen. Oder man mag Rahmen vergeben. Aber auf einmal sind die viel zu dick weil doppelt.

Hier meine CSS Tipps aus den Tiefen meiner Festplatte. Quick und dirty – wie es gut deutsch heißt.

Update 2012 ich bringe zuerst die CSS3 Lösung und anschließend die Lösung mit Rahmen //Border.

Die Navigation soll am Schluss so aussehen:

Home| Impressum | News

Trennstriche in der Navigation mit CSS3

Man mag bei einer Navigation zwar zwischen den Elementen einen Rand oder Trennstrich, aber weder vor dem ersten Element noch nach dem letzten Element.

All dies kann der IE nicht wirklich daher muss man ihm helfen mit http://selectivizr.com/.Dort steht eine ganz genau Einbauanleitung. Muss es absolut IE sicher sein, dann die Lösung weiter unten nutzen.

Dazu verwendet man die Pseudoklassen last-child und first-child.

Setze ich den Rand /Border nach Rechts, dann brauche ich last-child, setze ich den Rand /Border nach Links, nach brauche ich first-child.

A) Zuerst bekommen alle li Elemente einen rechten Rand.

li{border-right:1px solid red;}

Dann nehm ich dem letzten li Element den Rand wieder weg.

li:last-child{border-right:none;}

B) Zuerst bekommen alle li Elemente einen linken Rand.

li{border-left:1px solid red;}

Dann nehm ich dem ersten li Element den Rand wieder weg.

li:first-child{border-left:none;}

CSS Tipp Border dies kann auch der IE

Die Naviagtion soll also so aussehen:

Home| Impressum | News

Die erste Reaktion ist immer dies mit border zu verwirklichen. Ich geh davon aus, dass diese Navi wie meist in einer Liste steckt.

li{border-right:1px solid red;}

Das Ergebnis ist dann dieses:

Home | Impressum | News |

Und der letzte border / Rahmen strahlt einem glücklich an und selber ist man verzweifelt.

Wie sooft im Leben ist auch hier die CSS Lösung nicht Rechts, sondern Links zu finden.

CSS und +

li+li{border-left:1px solid red;}

li+li ignoriert das allererste li, also kann da kein border/Rahmen sein.

CSS ++

Home Impressum | News

Dies kann man so verwirklichen.

li+li+li{border-left:1px solid red;}

Dieses Plus oder Plus Plus usw. wirkt auch bei allen anderen HTML Tags. Einfach mal ausprobieren und neue Möglichkeiten entdecken.

mts

5 Kommentare zu “CSS Tipp: Trennstriche in der Navigation mittels Border”

  2. Jeff Jagger

    ich habe schon lange mit css zu tun, aber das bei li+li das erste li nicht berücksichtigt wird ist mehr als interessant. geht das auch wenn man mit mehreren überschrften arbeitet? dann könnte auf diese weise immer der ersten h1 einen anderen abstand nach oben geben, wie den darauffolgenden h1 auf einer seite. da fäält mir ne menge ein was ich jetzt testen werde, danke für den heißen tipp!

  4. Richard

    Diese Seite hat mir bei der Erstellung einer neuen Website geholfen, vielen Dank für den tollen Tipp!
    bucopark.at

  5. Pingback: CSS Trennstriche in Menü und Navigation - Simoncreative - Webdesign & SEO aus Darmstadt