CSS Tipp: Trennstriche in der Navigation mittels Border
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.
- CSS Trennlinien

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.
CSS Tipp Border
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.
Basis Know-how CSS
Internetmarketing
zu : CSS Tipp: Trennstriche in der Navigation mittels Border 








Danke, wieder was gelernt
.
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!