Automatische Nummerierung per CSS

[Steffen M. Luba]

Hallo!

Ich benötige etwas Hilfe bei der Automatischen Nummererierung von Listen per CSS.
Das Forum habe ich durchsucht (und dabei die Einträge Listenstart erst bei 2. möglich? und OL mit "start=" in HTML-Strict verboten ? gefunden), nur leider bin bezüglich meines Problems nicht weitergekommen. Hoffentlich habe ich nichts übersehen - falls doch, bitte ich um Nachsicht!

Ich würde nämlich gerne automatisch eine Liste in dieser Art genererieren:

I. Text
  1. Text
  2. Text
II. Text
  3. Text
  4. Text
  5. Text
III. Text
  6. Text
  7. Text

Die ist zwar ähnlich zum SELFHTML-Anzeigebeispiel, aber dennoch habe ich keinen blassen Schimmer, was ich abändern muß, damit er mir die Unterpunkte kontinuierlich durchnummeriert. Falls mir da jemand weiterhelfen könnte, wäre ich sehr dankbar!

Viele Grüße
Steffen M. Luba

[Michel]

Moin,

I. Text
  1. Text
  2. Text
II. Text
  3. Text
  4. Text
  5. Text
III. Text
  6. Text
  7. Text

  
<ol style="list-style-type:upper-roman">  
<li>Tagesordnung  
  <ol style="list-style-type:decimal">  
     <li>Foo</li>  
     <li>Bar</li>  
     <li>Bla</li>  
     <li>Blubb</li>  
  </ol>  
</li>  
<li>Pause  
  <ol style="list-style-type:decimal">  
     <li>Foo</li>  
     <li>Bar</li>  
     <li>Bla</li>  
     <li>Blubb</li>  
  </ol>  
</li>  
<li>Vorsprechung  
  <ol style="list-style-type:decimal">  
     <li>Foo</li>  
     <li>Bar</li>  
     <li>Bla</li>  
     <li>Blubb</li>  
  </ol>  
</li>  
</ol>

So? Es bietet sich an, das mit Klassen zu realisieren.

Grüße aus Hamburg
Michel

[Michel]

Moin,

I. Text
  1. Text
  2. Text
II. Text
  3. Text
  4. Text
  5. Text
III. Text
  6. Text
  7. Text

Moment. Mir fällt auf, dass meine Methode nicht zu diesem obigen Ergebnis führt. Also du willst, dass die arabischen Listeneinträge weitergeführt werden, unabhängig davon, ob irgendwann mal ein römischer "Oberpunkt" kommt? Sehr ungewöhnliche Gliederung, muss ich sagen :-)

Da fällt mir leider keine gescheite Lösung ein, wie sowas nur mit HTML oder CSS zu lösen wäre. Außer manuell schreiben.

Grüße aus Hamburg
Michel

[Steffen M. Luba]

Hallo Michel,

I. Text
  1. Text
  2. Text
II. Text
  3. Text
  4. Text
  5. Text
III. Text
  6. Text
  7. Text

Moment. Mir fällt auf, dass meine Methode nicht zu diesem obigen Ergebnis führt. Also du willst, dass die arabischen Listeneinträge weitergeführt werden, unabhängig davon, ob irgendwann mal ein römischer "Oberpunkt" kommt? Sehr ungewöhnliche Gliederung, muss ich sagen :-)

Ja, das ist leider das Problem, daß die arabischen Listeneinträge weitergeführt werden.
Die Liste ist für einen Freund von mir an der Uni, der seine Publikationen so gliedern will. Unter Römisch stehen die Kategorien (Buch, Aufsatz, etc.) und unter Lateinisch die Werke selbst, die er gerne insgesammt durchnummeriert hätte.

Da fällt mir leider keine gescheite Lösung ein, wie sowas nur mit HTML oder CSS zu lösen wäre. Außer manuell schreiben.

Ja, ich hab da schon was mit "start=xx" hinbekommen, nur ist das ja leider veraltet. Außerdem wird das Einfügen von Einträgen irgendwo am Anfang oder in der Mitte immer eine längere Sachen, da man alle Start-Einträge manuell ändern muß.

Grüße aus der Pfalz
Steffen

[Gunnar Bittersmann]

Hello out there!

<ol style="list-style-type:upper-roman">

Pfui Inline-Styles.

So? Es bietet sich an, das mit Klassen zu realisieren.

So? Was willst du hier klassifizieren und warum? CSS bietet genügend Selektoren ... man muss sie nur kennen und anzuwenden verstehen.

See ya up the road,
Gunnar

[Tobias Kloth]

Hallo Steffen,

Die ist zwar ähnlich zum SELFHTML-Anzeigebeispiel, aber dennoch habe ich keinen blassen Schimmer, was ich abändern muß, damit er mir die Unterpunkte kontinuierlich durchnummeriert.

Du musst drei Dinge ändern:
 - counter-reset bei h1 entfernen (dann wird der Zähler für die Unterpunkte nicht mehr bei jedem Hauptpunkt zurückgesetzt und die Unterpunkte werden fortlaufend nummeriert)
 - bei dem content für h2 das counter(Ebene01) (und den Punkt) entfernen
 - für den counter bei h1 noch einen Stil angeben (du brauchst "upper-roman")

dass das ganze dann aber nur mit Opera und Konqueror funktioniert, weißt du?

Grüße aus Nürnberg
Tobias

[Steffen M. Luba]

Hallo Tobias,

Du musst drei Dinge ändern:

• counter-reset bei h1 entfernen (dann wird der Zähler für die Unterpunkte nicht mehr bei jedem Hauptpunkt zurückgesetzt und die Unterpunkte werden fortlaufend nummeriert)
• bei dem content für h2 das counter(Ebene01) (und den Punkt) entfernen
• für den counter bei h1 noch einen Stil angeben (du brauchst "upper-roman")

Stimmt, das habe ich auch für für die h1- und h2-Überschriften genau so hinbekommen, nur wenn ich dann auf zwei verschachtelte ol umstelle versagt mein Latein leider komplett.

dass das ganze dann aber nur mit Opera und Konqueror funktioniert, weißt du?

Ja, leider :-( Aber wer weiß, was die Zukunft bringt... ;-)

Viele Grüße aus der Pfalz
Steffen

[Tobias Kloth]

Hallo Steffen,

Stimmt, das habe ich auch für für die h1- und h2-Überschriften genau so hinbekommen, nur wenn ich dann auf zwei verschachtelte ol umstelle versagt mein Latein leider komplett.

Die erste Ebene sind alle <li> die innerhalb eines <ol>s vorkommen, also "ol li"[1] - die zweite Ebene sind dann alle <li> die innerhalb eines <ol>s vorkommen welches wiederrum innerhalb eines <ol>s steht, also "ol ol li". Dann noch jeweils ein ":before" hinter die Selektoren, list-style-type für ol auf none gesetzt und fertig :-)

Grüße aus Nürnberg
Tobias

[1] man könnte auch mit dem http://de.selfhtml.org/css/formate/zentrale.htm#elemente_weitere@title=child-selector ("ol>li") arbeiten, aber das ist nicht zwingend erforderlich

[Steffen M. Luba]

Hallo Tobias,

ich befürchte, ich muß Deine Hilfsbereitschaft nochmal beanspruchen.
Dank Deinem Hinweis mit dem Link weiter oben konnte ich die römischen und arabischen Zahlen einarbeiten. Für die Sache mit den Überschriften klappt das auch problemlos.

  
<html><head>  
<style type="text/css">  
  
h1 { counter-increment:Ebene01; }  
  
h1:before {content:counter(Ebene01,upper-roman) ". "; }  
  
h2 { counter-increment:Ebene02; }  
  
h2:before { content:counter(Ebene02, decimal) ". "; }  
  
</style>  
</head><body>  
<h1>&Uuml;berschrift 1</h1>  
 <h2>&Uuml;berschrift 2</h2>  
 <h2>&Uuml;berschrift 2</h2>  
<h1>&Uuml;berschrift 1</h1>  
 <h2>&Uuml;berschrift 2</h2>  
 <h2>&Uuml;berschrift 2</h2>  
 <h2>&Uuml;berschrift 2</h2>  
<h1>&Uuml;berschrift 1</h1>  
 <h2>&Uuml;berschrift 1</h2>  
</body>  
</html>  

Das Problem ist jetzt leider die verschachtelte Liste. Da funktioniert das leider nicht, da er immer ein couter-reset macht. Ich vermute, das liegt am Verschachtelten (da ja <li> zweimal auftaucht), nur Durchblicken tu ich leider nicht. Vielleicht habe ich ja auch einen Fehler im Code, den ich einfach nicht erkenne.

  
<html><head>  
<style type="text/css">  
  
ol li { counter-increment:Ebene01;  
        list-style-type:none;}  
  
ol li:before { content:counter(Ebene01, upper-roman) ". "; }  
  
ol ol li        { counter-increment:Ebene02;}  
  
ol ol li:before { content:counter(Ebene02, decimal) ". "; }  
  
</style>  
</head>  
<body>  
<ol>  
 <li>&Uuml;berschrift  
  <ol>  
   <li>Unterpunkt</li>  
   <li>Unterpunkt</li>  
   <li>Unterpunkt</li>  
  </ol>  
 </li>  
 <li>&Uuml;berschrift  
  <ol>  
   <li>Unterpunkt</li>  
   <li>Unterpunkt</li>  
   <li>Unterpunkt</li>  
  </ol>  
 </li>  
 <li>&Uuml;berschrift  
  <ol>  
   <li>Unterpunkt</li>  
   <li>Unterpunkt</li>  
   <li>Unterpunkt</li>  
  </ol>  
 </li>  
</ol>  
</body></html>  

Weißt Du hier nochmal Rat?

Viele Grüße aus der Pfalz
Steffen

[Tobias Kloth]

Hallo Steffen,

Das Problem ist jetzt leider die verschachtelte Liste. Da funktioniert das leider nicht, da er immer ein couter-reset macht.

Du solltest dazusagen, dass "er" ein Gecko-Browser ist - Opera macht es nämlich wie gewünscht. Warum die Gecko-Engine das anders macht, weiß ich nicht, die hat im Bezug auf counter irgendwo einen Hau.

Grüße aus Nürnberg
Tobias

[Steffen M. Luba]

Hallo Tobias,

Das Problem ist jetzt leider die verschachtelte Liste. Da funktioniert das leider nicht, da er immer ein counter-reset macht.
Du solltest dazusagen, dass "er" ein Gecko-Browser ist - Opera macht es nämlich wie gewünscht. Warum die Gecko-Engine das anders macht, weiß ich nicht, die hat im Bezug auf counter irgendwo einen Hau.

Ooops *schäm*, ja, das hätt ich noch dazu sagen müssen, daß ich FF Portable 1.5.0.6 nutze.

Hmm, dann läßt sich wohl nicht mehr machen, als auf eine bessere Browserunterstützung zu warten. Als "er" das mit der Nummerierung bei den Überschriften korrekt dargestellt und kein counter-reset gemacht hat, keimte schon sowas wie Hoffnung in mir auf, aber dann wird's wohl mit den Listen nix - es sei denn, ich wechsele den Browser... ;-)

Ich danke Dir aber für die schnelle Hilfe und die Gewißheit, daß es nicht am Code, sondern am Browser liegt!

Viele Grüße aus der Pfalz
Steffen