ol-Listennummerierung formatieren

[finkenmann]

Hallo

vielleicht weiss grad jemand Rat. Ich möchte gerne bei einer nummerierten Liste (ol) die Nummerierung separat formatieren und würde gerne den Punkt hinter der Zahl eliminieren. Die Zahl soll also ohne Punkt ausgegeben werden und sollte fett und rot werden. Der li-Eintrag aber normal und schwarz.

Bei den ol kann man ja die «Nummerierung» ganz verschieden definieren (decimal ist ja die Standarddefinition), aber egal welches Format man wählt, hinter dem Listenelement steht jedesmal ein Punkt und den möchte ich nicht.

Den Inhalt könnte ich zur Not formatieren, wenn ich jeden Listeneintrag z.B. in ein <span> stellen würde. Nur ist das Problem dabei, dass die Listen in einem CMS erfasst werden und ich dem Benutzer eigentlich die Mühe ersparen möchte, jeden einzelnen Listeeintrag noch mit einem Span oder einer sonstigen Auszeichnung zu versehen.

Ich hoffe ich konnte meine Frage einigermassen klar formulieren. Habe nirgends was über die Formatierung der ol-Elemente gefunden.

[EKKi]

Mahlzeit finkenmann,

Ich möchte gerne bei einer nummerierten Liste (ol) die Nummerierung separat formatieren und würde gerne den Punkt hinter der Zahl eliminieren. Die Zahl soll also ohne Punkt ausgegeben werden und sollte fett und rot werden. Der li-Eintrag aber normal und schwarz.

Eventuell wäre die <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#nummerierung@title=automatische Nummerierung> mittels CSS etwas für Dich ... funktioniert aber naturgemäß nur in zeitgemäßen und vernünftigen Browsern.

MfG,
EKKi

[finkenmann]

So ganz ohne IE Unterstützung gehts dann halt doch nicht. Da schliesse ich zuviele User aus. Auf den 6er nehm ich keine grosse Rücksicht mehr, aber gleich alle IE User darf ich nicht übergehn.

[Gunnar Bittersmann]

@@finkenmann:

nuqneH

Ich möchte gerne bei einer nummerierten Liste (ol) die Nummerierung separat formatieren und würde gerne den Punkt hinter der Zahl eliminieren. Die Zahl soll also ohne Punkt ausgegeben werden und sollte fett und rot werden. Der li-Eintrag aber normal und schwarz.

Dann warte mal ab, bis ::marker [CSS3-LISTS §9] in den Browsern implementiert ist.

In der Zwischenzeit kannst du mit JavaScript nachhelfen und für jedes Listitem  ein 'span'-Element mit der Numerierung erzeugen:

var myList = document.getElementById("myList");  
for (var i = 0, counter = 1; i < myList.childNodes.length; i++)  
  if (myList.childNodes[i].nodeType == 1)  
    myList.childNodes[i].innerHTML = '<span class="marker">' + counter++ + '</span>' + myList.childNodes[i].innerHTML;

Bei aktiviertem JavaScript (Klasse "js" setzen: [PERFORMANCE-BP2]) blendest du die Standard-Listennumerierung aus und setzt die 'span'-Elemente an die Stelle:

.js #myList  
{  
  list-style: none;  
}  
  
.js #myList li  
{  
  position: relative;  
}  
  
.marker  
{  
  color: red;  
  font-weight: bold;  
  left: -3ex;  
  position: absolute;  
  text-align: right;  
  width: 2ex;  
}

Qapla'

[finkenmann]

Klingt nach einer plausiblen Lösung, allerdings würd ich trotz allem gerne auf der CSS Schiene bleiben. Schau mir dein Vorschlag aber gerne mal an.

Herzlichen Dank dafür.
Pierre