UL-Liste mit CSS formatieren

[Messmar]

Hallo,

wie weit kann man die Listen mit CSS formatieren bzw. defenieren?
Ich habe z.B. eine Liste mit Nummern (list-style-type: decimal), und diese Nummer sollen rot sein.

Kann man das mit CSS hinbekommen?

Danke und Gruß

Messmar

[Felix Riesterer]

Lieber Messmar,

wenn Du "eine Liste mit Nummern" hast, warum nimmst Du da <ul> anstatt <ol>?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Messmar]

HI,

wenn Du "eine Liste mit Nummern" hast, warum nimmst Du da <ul> anstatt <ol>?

Da hast du vällig recht ;-) ist mir unterlaufen.

Aber kann man die Nummer (Und nur die Nummer) mit einer anderen Farbe dastellen

Besten Gruß

Messmar

[wahsaga]

hi,

Aber kann man die Nummer (Und nur die Nummer) mit einer anderen Farbe dastellen

bitte lies erst die restlichen antworten, bevor du deine frage unnötiger weise wiederholst.

gruß,
wahsaga

[Messmar]

Hi,

bitte lies erst die restlichen antworten, bevor du deine frage unnötiger weise wiederholst.

Danke für den Hinweis. Es wurde geantwortet während ich meinen Beitrag
schrieb.

Gruß

Messmar

[Cheatah]

Hi,

wenn Du "eine Liste mit Nummern" hast, warum nimmst Du da <ul> anstatt <ol>?
Da hast du vällig recht ;-) ist mir unterlaufen.

nein, hat er nicht. <ol> neißt nicht "numbered list" oder so, sondern "ordered list". Die Wahl, ob man <ol> oder <ul> verwenden möchte, ist zu exakt 100% davon unabhängig, ob es eine Nummerierung geben soll. Womit Felix Recht hat, ist der Denkanstoß.

Cheatah

[Ashura]

puts "Hallo " + gets.chomp + "."

?> Messmar
=> Hallo Messmar.

wie weit kann man die Listen mit CSS formatieren bzw. defenieren?

So weit, wie alle anderen Elemente auch (im Vergleich zu manchen auch mehr).

Ich habe z.B. eine Liste mit Nummern (list-style-type: decimal), und diese Nummer sollen rot sein.

Kann man das mit CSS hinbekommen?

Ja, aber nicht unbedingt so, wie du es dir vorstellen würdest.
Den list-style-type kannst du AFAIK nicht getrennt vom Listeninhalt formatieren.

Hierfür müsstest du die Eigenschaft counter verwenden, was du aufgrund von :before oder :after getrennt formatieren kannst. (Bis jetzt versteht aber nur Opera counter.)

Einen schönen Freitag noch.

Gruß, Ashura

[wahsaga]

hi,

Ich habe z.B. eine Liste mit Nummern (list-style-type: decimal), und diese Nummer sollen rot sein.

Kann man das mit CSS hinbekommen?

die aufzählungszeichen direkt per CSS fabrlich anders zu definieren als den inhalt, dazu ist mir keine möglichkeit bekannt.

es wäre aber denkbar, für die liste selbst die schrift als rot zu definieren - und dann den inhalt der list items in ein weiteres containerelement zu packen, welches dann wieder andersfarbig fomratiert wird (am einfachsten wohl per nachfahrenselektor).

ist halt die frage, ob man für so einen optischen effekt das zusätzliche markup in kauf nehmen möchte.

gruß,
wahsaga

[Felix Riesterer]

Lieber mess...Rechtschreibkünstler,

es wäre aber denkbar, für die liste selbst die schrift als rot zu definieren - und dann den inhalt der list items in ein weiteres containerelement zu packen, welches dann wieder andersfarbig fomratiert wird (am einfachsten wohl per nachfahrenselektor).

wahsaga denkt an sowas: <li><span>...Inhalt...</span></li>

Damit könntest Du im CSS-Teil Folgendes definieren:

li { color: red; }  
li span { color: #black; }

ist halt die frage, ob man für so einen optischen effekt das zusätzliche markup in kauf nehmen möchte.

wahsaga meint, ob man bei streng semantisch eingesetztem HTML diese zusätzlichen <span>-Tags (die ja für die Dokumentstruktur keine weitere Bedeutung haben) wirklich im Dokument haben will.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[wahsaga]

hi,

wahsaga meint, ob man bei streng semantisch eingesetztem HTML diese zusätzlichen <span>-Tags (die ja für die Dokumentstruktur keine weitere Bedeutung haben) wirklich im Dokument haben will.

wahsaga hat darauf nur hingewiesen, damit es kein anderer macht :-)
er selber sieht das nicht so streng - wenn sich ein beabsichtigter effekt nicht anders realisieren lääst, dann wird halt im zweifelsfalle das markup mal etwas erweitert ...

gruß,
wahsaga

[Messmar]

Hi,

wahsaga denkt an sowas: <li><span>...Inhalt...</span></li>

Damit könntest Du im CSS-Teil Folgendes definieren:

li { color: red; }

li span { color: #black; }

  
Das könnte eine Lösung sein.  
  

> > ist halt die frage, ob man für so einen optischen effekt das zusätzliche markup in kauf nehmen möchte.  
  
Mir legt ein Design bzw. Layout vor das so einen optischen effekt enthält und es dann umgesetzt werden soll.  
Ich werde es halt ;-( wie es ist umsetzten.  
  
  
Gruß  
  
Amin

[Cyx23]

Hallo Messmar,

Ich habe z.B. eine Liste mit Nummern (list-style-type: decimal), und diese Nummer sollen rot sein.

<ol> darfs auch sein?

Netscape 4 kanns schon lange, und mit Mozilla klappts auch recht
einfach, nur Opera und IE scheinen doch ein span o.ä. zu benötigen,
bzw. für IE ist auch eine etwas unschöne Notlösung möglich:

<style type="text/css">
ol {color:black}
li{color:red}
* ol {color:red;}
* li:first-line { color:black;}
* html li:first-letter{color:red;}
</style>
<ol>
<li>Punkt</li>
<li>Punkt</li>
</ol>

Grüsse

Cyx23