Hallo Das erste CSS dient nur der Anzeige und hat dem Problem nichts zu tun: ~~~css 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 ~~~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 ~~~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 ~~~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 Das erste CSS dient nur der Anzeige und hat dem Problem nichts zu tun: ~~~css 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 ~~~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 ~~~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 Zähler 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 ~~~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 Mit dem folgenden CSS ~~~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 ~~~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 Zähler 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 ~~~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