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
 Navigation mit Border

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. :zwinker:

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


Basis Know-how CSS
InternetmarketingInternetmarketing Buchempfehlung

Top

2Kommentare zu : CSS Tipp: Trennstriche in der Navigation mittels Border

2 Kommentare
  1. 1

    Danke, wieder was gelernt :-) .

  2. 2

    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!

Deine Meinung
... zum Thema
Name und E-mail sind nötig


WebDesign Angebot

mein Angebot

Ich biete benutzerfreundliches, barrierefreies WebDesign und InternetMarketing, denn was nützt die schönste Homepage, wenn sie keiner findet. Schalk und Support ist inclusive.
Kontakten Sie mich einfach » E-Mail

InternetMarketing Angebot

Mieten Sie meine Kreativität

Ich habe jede Menge Idee und Können, wie man auch ihren Shop, ihre Homepage und ihr Business im Internet bekannt macht.
Kontakten Sie mich einfach » E-Mail

WebDesign Preise

Preise by mts

Professionelles WebDesign ist eine Investition. Billig und günstig sind andere ..ich bin gut und bezahlbar.
Kontakten Sie mich einfach » E-Mail


Achtung: Sie haben JavaScripts und/oder CSS deaktiviert. Sie können diese Inhalte nutzen, einiges an Funktionen steht jedoch nicht zur Verfügung.

Zu den Inhalten springen

« zurück

vor »

  • WebDesign Icon

    WebDesign

    WebDesign ist mehr als Grafik- und Printdesign. WebDesign und Website Marketing sind Geschwister. Rund um WebDesign.
  • WebDesign Tutorials Icon

    WebDesign Tutorial

    Kein WebDesigner fällt vom Himmel. Mal ein Online Shop, mal Community, mal Web 2.0 social Media oder Wiki. Erfahrungen uvm.
  • CSS Icon

    CSS

    Ich habe zig CSS Beispiele, Erkenntnisse irgendwo auf der Festplatte meines PCs und Gehirns. Ich gebe diese gern weiter :-).
  • InternetMarkering Icon

    InternetMarketing

    Wie verkauft man im WWW unter Ausnutzung der SUMAs, der Social Media Dienste. Internet Marketing Praxis uvm..
    und Website Promotion
  • SEO Icon

    SEO

    SEO ist weder Geheimwissen noch 0815 Tätigkeit, - schlicht notwendig für den Erfolg im WWW. Meine Erfahrung mit SEO.
  • Internet Recht Icon

    Internet Recht

    Was tun bei Abmahnungen. Rechtsfallen sind u.a. free Download, Fotos, Marken, Forum, Kommentare. Wo gibt es Hilfe.
  • Schokolade Icon

    ..und außerdem ...

    mein Blog | mein Netzwerk | barrierefreies WebDesign | Usability im WebDesign | Net-Lexikon | WordPress Themes

©  2004 - 2010Professional Webdesign barrierefrei auf WebDesign-in.de, ImpressumImpressum Lizenz||Top