nicht angemeldet
CSS Counter - Problem mit Container
0 Tabellenkalk
2 0 0 
Matthias Apsel
0
-1
CSS Counter - Problem mit Container
Hallo
Das erste CSS dient nur der Anzeige und hat dem Problem nichts zu tun:
h1, h2, h3 {
font-size: 1rem;
}
h1, h2, h3 {
margin-left: 1rem;
display: flex;
}
h1::before,
h2::before,
h3::before {
background-color: gold;
font-size: 1rem;
width: 5rem;
margin-right: 1rem;
}
Jetzt zum Problem:
Mit dem folgenden CSS
body {
counter-reset: ebene1;
}
h1 {
counter-reset: ebene2;
}
h2 {
counter-reset: ebene3;
}
h3 {
counter-reset: ebene4;
}
h1::before {
counter-increment: ebene1;
}
h2::before {
counter-increment: ebene2;
}
h3::before {
counter-increment: ebene3;
}
h1::before {
content:
counter(ebene1) " "
;
}
h2::before {
content:
counter(ebene1) "."
counter(ebene2) " "
;
}
h3::before {
content:
counter(ebene1) "."
counter(ebene2) "."
counter(ebene3) " "
;
}
und dem HTML
<h1>1</h1>
<h2>1.1</h2>
<h2>1.2</h2>
<h2>1.3</h2>
<h3>1.3.1</h3>
<h3>1.3.2</h3>
zeigt der Counter erwartungsgemäß die in den Überschriften hinterlegte Aufzählung, also
1
1.1
1.2
1.3
1.3.1
1.3.2
In der Praxis werden auf fast jeder Webseite Container wie header, main, footer, nav, section, article, div und so weiter hinzugefügt. Dadurch gerät jedoch der Zähler durcheinander. Mit dem HTML
<h1>1</h1>
<h2>1.1</h2>
<h2>1.2</h2>
<div>
<h2>1.3</h2>
<h3>1.3.1</h3>
</div>
<h3>1.3.2</h3>
wird
1
1.1
1.2
1.3
1.3.1
1.3.1
ausgegeben. Von der ersten h3 zur zweiten h3 zählt der Counter also nicht weiter.
Gibt es CSS-Anweisungen um den Counter zu veranlassen sich nur an den Überschriften zu orientieren?
Gruss
MrMurphy
-
Hallo,
Gibt es CSS-Anweisungen um den Counter zu veranlassen sich nur an den Überschriften zu orientieren?
m.E. tut er das. Das Div-Element enthält eine h2 und eine h3. Wieso sollte eine weitere h3 außerhalb etwas mit der h3 innerhalb zutun haben? Es fehlt einfach eine h2 vor der letzten h3.
Gruß
Kalk-
Hallo
Die Antwort hilft mir leider nicht weiter.
Mal abgesehen davon dass eine weitere h2-Überschrift keinen Sinn macht stimmt die Zählung dann auch nicht.
Gruss
MrMurphy
-
-
body { counter-reset: ebene1; } h1 { counter-reset: ebene2; counter-increment: ebene1; } h2 { counter-reset: ebene3; counter-increment: ebene2; } h3 { counter-reset: ebene4; counter-increment: ebene3; }<h1>1</h1> <h2>1.1</h2> <h2>1.2</h2> <div> <h2>1.3</h2> <h3>1.3.1</h3> </div> <h3>1.3.2</h3>wird
1
1.1
1.2
1.3
1.3.1
1.3.1ausgegeben. Von der ersten h3 zur zweiten h3 zählt der Counter also nicht weiter.
Gibt es CSS-Anweisungen um den Counter zu veranlassen sich nur an den Überschriften zu orientieren?
Nein. Das Problem liegt auch meiner Meinung nach in der Struktur deines Dokumentes – aber keine Panik.
Jedes Element übernimmt die Zähler seines Vorgängers derselben Ebene; hat es keinen Vorgänger, übernimmt es jene des Elternelements.
h2-1.2 hat einen Zähler ebene3 erzeugt. Das div als Nachfolger übernimmt diesen Zähler. h2-1.3 nun übernimmt seinerseits den ebene3-Zähler von seinem Elternelement div (und indirekt von h2-1.2), soll aber selber einen ebene3-Zähler erzeugen. h2-1.3 macht dann das, was als "verschachtelte Zähler" vorgesehen ist: Es existiert bereits ein Zähler des Namens, also wird ein Unterzähler gleichen Namens erzeugt.Counters are "self-nesting"; creating a new counter in an element which already has a counter with the same name simply creates a new counter of the same name, nested inside the existing counter. https://drafts.csswg.org/css-lists-3/#nested-counters
Füge bei h3::before zu content
'(' counters(ebene3,'.') ') 'hinzu, dann siehst du, was passiert: Bei h3-1.3.1 werden zwei ebene3-Zählerstände ausgegeben, "0.1", 0 von h2-1.2 und 1 von h2-1.3.Ohne diese Vorgehensweise wäre es äußerst aufwändig, Zähler in verschachtelten ol- und ul-Listen einzurichten.
Soweit zur Ursache.Wie eingangs schon angedeutet, würde ich versuchen, die Dokumentstruktur besser zu organisieren. Auch mir erscheint dein Aufbau etwas unlogisch, denn das erste h3 gehört zum Unterabschnitt im div mit h2-1.3, das zweite h3 zum Hauptteil mit dem h2-1.2. Es mag aber sein, dass das bei dir in der Praxis anders wirken kann.
Falls sich das nicht umorganisieren lässt, kannst du, zumindest in obigem Beispiel, mit counter-reset:none in div > h2 erreichen, dass dort kein neuer (Unter-) Zähler ebene3 angelegt wird. Da Zähler und Werte unterschiedlich weitergegeben werden (https://drafts.csswg.org/css-lists-3/#creating-counters), landet dann tatsächlich der ebene3-Wert vom ersten h3 beim zweiten h3.
-
Hallo
Aus meiner Fragestellung sollte hervorgehen, dass der HTML-Quelltext im body-Bereich nicht angepasst werden kann. Deshalb die konkrete Frage nach CSS-Lösungen.
Es handelt sich um keine Seite von mir. Die Seite ist sehr umfangreich, ich zeige nur ein neutrales stark vereinfachtes Beispiel um das Problem deutlich zu machen.
Die Verwendung von div-Containern in der gezeigten ist auch durchaus berechtigt.
In der konkreten Seite werden die div-Container benötigt um in die Seite Mikrodaten / Strukturierte Daten einzufügen, die sich in dem Inhalt nach der im div-Container eingeschlossenen h2-Überschrift und nach der ersten h3-Überschrift befinden, aber nicht mehr in dem Inhalt ab der zweiten h3-Überschrift.
Gruss
MrMurphy
-
Hallo MrMurphy1,
Aus meiner Fragestellung sollte hervorgehen, dass der HTML-Quelltext im body-Bereich nicht angepasst werden kann.
Aha⁉️
Gruss
Dennoch hast du den Grund für das Verhalten ausführlich dargelegt bekommen. Ein paar Worte des Dankes wären angebracht.
Bis demnächst
Matthias--
Rosen sind rot.-
Hallo
Ich finde traurig was du mir unterstellst ohne mich zu kennen.
Aha⁉️
Ich finde die Formulierung "Gibt es CSS-Anweisungen..." eindeutig. Sie zeigt, dass mir nur geholfen ist, wenn mein Problem mit CSS gelöst werden kann.
Ein paar Worte des Dankes wären angebracht.
Die kommen, sobald ich den Vorschlag von Regina Schauklug in Ruhe ausprobiert habe. Gegen Mitternacht fehlt mir die Konzentration um den Link durchzuarbeiten und aktuell fehlt mir die Zeit.
Ich finde es unhöflich mich zunächst für eine Antwort zu bedanken um dann später nachschieben zu müssen, dass damit mein Problem doch noch nicht gelöst ist.
Gruss
MrMurphy
-
Ich finde es unhöflich mich zunächst für eine Antwort zu bedanken um dann später nachschieben zu müssen, dass damit mein Problem doch noch nicht gelöst ist.
Aber erstmal groß und breit rumzunörgeln, und zwar wegen eines Punktes, der eigentlich schon abgehakt ist ("Falls sich das nicht umorganisieren lässt"), ist nicht unhöflich?
Bedanken tut man sich, davon mal abgesehen, für den Versuch der Hilfestellung an sich und nicht für passende Lösungen. Was glaubst du eigentlich, was das hier ist, eine Dienstleistung, bei der nur korrekte Ware bezahlt werden braucht?
Ich bin weg, ich kriege gerade sooooo einen Hals.
-
Hallo Regina,
Ich finde es unhöflich mich zunächst für eine Antwort zu bedanken um dann später nachschieben zu müssen, dass damit mein Problem doch noch nicht gelöst ist.
Aber erstmal groß und breit rumzunörgeln, und zwar wegen eines Punktes, der eigentlich schon abgehakt ist ("Falls sich das nicht umorganisieren lässt"), ist nicht unhöflich?
Bedanken tut man sich, davon mal abgesehen, für den Versuch der Hilfestellung an sich und nicht für passende Lösungen.
ACK. Und gerade MrMurphy als regelmäßiger Teilnehmer des Forums sollte das IMHO wissen.
LG,
CK
-
-
-
-
Aus meiner Fragestellung sollte hervorgehen, dass der HTML-Quelltext im body-Bereich nicht angepasst werden kann.
Das sei dir unbenommen. Ebenso sei es mir freigestellt, dies zu kommentieren. Dass dieses Forum keine Antwortmaschine ist, sondern auch das Umfeld kritisch beleuchtet wird, sollte dir eigentlich nicht neu sein.
Deshalb die konkrete Frage nach CSS-Lösungen.
Hättest du meine Antwort bis zum Ende gelesen, anstatt schon beim ersten leisen Kritikpunkt beleidigt aufzugeben – und ich schrieb noch extra im ersten Satz: keine Panik –, wüsstest du jetzt eine "konkrete CSS-Lösung".
Schade um meine Schreiberei. Die Stunde Mühe war immerhin nicht umsonst, denn zumindest ich habe was über die CSS-Zählerei gelernt.
Es ist ja eine Sache, eine passende Lösung niederzuschreiben und gar keine Antwort zu bekommen, aber eine Antwort zu bekommen, die nicht einmal ein klitzekleines Danke für den Lösungsansatz enthält, sondern wegen einer Nebensächlichkeit mehrere Absätze lang angenörgelt zu werden, und zwar nur dieses, ist jetzt gerade ein Schlag ins Kontor, ehrlich :(
-
-
-
Hallo
Da es offensichtlich nur darum geht mich durch bewußtes Nichtverstehen meiner Antworten zu diskreditieren enthalte ich mich jeder weiteren Antwort zu meinem Beitrag.
Gruss
MrMurphy
-
Hallo,
Achherrje, was ist dir denn über die Leber gelaufen?
Hier hast du ein paar Katzenbilder.Gruß
Kalk
-