CSS Linkliste mit Seperatoren?

fi**en32 · 30. März 2009

hi leutz,

ich habe ein menue :

Code:

<ul>
<li><a href="#" title="">Link1</a></li>
<li><a href="#" title="">Link2</a></li>	
<li><a href="#" title="">Link3</a></li>				
<li><a href="#" title="">Link4</a></li>
</ul>

diese werden bei mir nebeneinander aufgelistet:
Link1 Link2 Link3 Link4

so nun möchte ich zwischen den links seperatoren einfuegen, zb ein "-"
Link1 - Link2 - Link3 - Link4

wie stell ich das am duemsten an?

claW. · 30. März 2009

Code:

li.<klasse> { display: inline-block; }
a.<klasse>:after { content: " - "; }

<klasse> natürlich selbst anpassen, da es ja nicht auf alle elemente angewandt werden soll.

PW-toXic · 30. März 2009

Tabellen verbieten, aber CSS 2 empfehlen, das nichtmal der IE7 kann

http://www.browser-statistik.de/
38% der User würden also deine Seperatoren mit dieser Lösung nicht sehen.
(IE8 ist bisher so gut wie noch garnicht verbreitet)
Abhängig von deinem Benutzerkreis können das auch durchaus 70% und mehr sei.
Siehe: http://www.chip.de/news/Browser-Statistiken-2008-schwere-Verluste-fuer-IE_34304373.html

Ich würde vorschlagen, dass du nach einem a Tag ein "-" einfügst (bis auf den letzten Eintrag der Liste). Das wäre mit php recht leicht und ohne großen Aufwand umzusetzen.
Wenn du komplexere Sachen brauchst, dann probiers mit paddig/margin und background-position mit eiem Bild deiner wahl.

Darii · 30. März 2009

@claW.: Wenn schon, dann richtig:

Code:

  ul.klasse li { 
    display: inline; /* damit es auch im IE halbwegs vernünftig aussieht */
    display: inline-block;
  }
  ul.klasse li::after {
    content: " - ";
  }
  ul.klasse li:last-child::after {
    content: "";
  }

Sonst wird hinter dem letzen Link auch noch ein "-" angezeigt.

@PW-toXic: So lange die Seite noch benutzbar bleibt kann man im privaten Bereich den IE imo getrost ignorieren.

PW-toXic · 30. März 2009

1) Ist hier nirgendwo herauszulesen, dass es sich um eine Webseite handelt, die getrost auf den IE verzichten kann.
2) ist die manuelle Lösung kein bisschen komplizierter - eher einfacher.
Ich sehe also keinen Grund hier auf CSS2 zu setzen, da sich das schlicht und einfach noch nicht durchgesetzt hat.

Aber das kann der Autor des Threads ja dann selbst enntscheiden - der weiss mehr was er braucht, und was nicht.
Dennoch ist es schlecht diese Lösung zu nennen, ohne auf die Nebeneffekte hinzuweisen.

Suche

CSS Linkliste mit Seperatoren?

fi**en32

Lieutenant

claW.

Gast

PW-toXic

Lieutenant

Darii

Lt. Junior Grade

PW-toXic

Lieutenant

Ähnliche Themen