plenist: CSS counter-reset funktioniert nicht so, wie er soll

Moin allerseits, kurz zu mir: bin nun schon einige Zeit "aus dem Beruf" und befasse mich derzeit mit der Umgestaltung einer HTML-Seite zu einer Druckausgabe.

Um nun die Abbildungen innerhalb der Kapitel mit einem Bildtext zu versorgen, der "Abb. x.y: 'Text zum Bild'" umfaßt, um daraus später ein Abbildungsverzeichnis zu erstellen, habe ich die CSS-Funktion Counter() eingesetzt. Einen Counter, der die Kapitel zählen soll und eine Counter, der die Abbildungen zum jeweiligen Kapitel zählen soll. Mein Wissensstand bis jetzt:

  1. counter-reset setzt den Counter auf Null, counter-increment erhöht den counter jeweils um 1
  2. Es muß eine, ich sag mal "Instanz" geben, an der festgemacht wird, wann der Counter hochgezählt wird, in meinem Fall bei jedem Auftreten von <h3>.
  3. mit den Pseudo-Klassen :: before und ::after können dann die Werte vom Counter ausgegeben werden

Soweit sogut, das funktioniert auch so - grundsätzlich, nur daß beim Wechsel des Kapitels der Counter für die Abbildungen nicht wieder heruntergesetzt wird, sondern im neuen Kapitel mit dem um 1 erhöhten Wert des Counters für die Abbildungen aus dem vorherigen Kapitel ausgegeben wird.

Beispiel: auf Seite 6 (= Kapitel 6) gibt es 2 Abbildungen, die mit 6.1 und 6.2 gezählt werden. In Kapitel 7 gibt es 2 Abbildungen, die eigentlich mit 7.1 und 7.2 gezählt werden sollen, aber als 7.3 und 7.4 erscheinen.

Frage: Wie bekomme ich es hin, daß der Counter für die Abbildungen beim Kapitelwechsel auf Null gesetzt wird und nicht einfach mit dem bisher aufaddierten Wert weitergeführt wird?

Meine CSS- und HTML-Datei hab ich hier mal als Bild angefügt

CSS&HTML

Ich hoffe, man kann es lesen.

Was ich noch nicht verstehe, ist, daß es so aussieht, als ob das Rücksetzen des Counters für die Abbildungen funktioniert, denn wenn ich direkt nach dem Auftauchen von <h3> mit h3::after den aktuellen Stand ausgeben, erhalte ich als Abb-Counter die Null. Soweit ich es verstanden habe, bezieht sich der Counter auf den ihn umgebenden Container bzw. den ihm übergeordneten, im Beispiel also das div innerhalb von "Inhalt". Aber ganz egal, wo ich das <h3> "hinsetze" (direkt unterhalb von "page", oder unterhalb von "header" oder unterhalb von "Inhalt" oder direkt in das <div> unterhalb von "Inhalt"), es wird nie die korrekte Nummerierung angezeigt, trotz Kapitelwechsel werden die Abbildung weiter hochgezählt. Kann mir bitte mal jemand den Schubs in die richtige Richtung geben?

Schöne Grüße an alle Mitlesenden hier

Klaus

  1. Hallo Klaus,

    1. counter-reset setzt den Counter auf Null, counter-increment erhöht den counter jeweils um 1
    2. Es muß eine, ich sag mal "Instanz" geben, an der festgemacht wird, wann der Counter hochgezählt wird, in meinem Fall bei jedem Auftreten von <h3>.
    3. mit den Pseudo-Klassen ::before und ::after können dann die Werte vom Counter ausgegeben werden

    das scheint mir soweit richtig zu sein.

    Soweit sogut, das funktioniert auch so - grundsätzlich, nur daß beim Wechsel des Kapitels der Counter für die Abbildungen nicht wieder heruntergesetzt wird, sondern im neuen Kapitel mit dem um 1 erhöhten Wert des Counters für die Abbildungen aus dem vorherigen Kapitel ausgegeben wird.

    Beispiel: auf Seite 6 (= Kapitel 6) gibt es 2 Abbildungen, die mit 6.1 und 6.2 gezählt werden. In Kapitel 7 gibt es 2 Abbildungen, die eigentlich mit 7.1 und 7.2 gezählt werden sollen, aber als 7.3 und 7.4 erscheinen.

    Frage: Wie bekomme ich es hin, daß der Counter für die Abbildungen beim Kapitelwechsel auf Null gesetzt wird und nicht einfach mit dem bisher aufaddierten Wert weitergeführt wird?

    Soweit ich dich verstanden habe, soll mit jedem h3-Element der counter hochgezählt werden. Dann wäre es für mich logisch, ihn mit einem h2-Element wieder zurückzusetzen. Hast du das so?

    Meine CSS- und HTML-Datei hab ich hier mal als Bild angefügt

    Das ist eine ganz schlechte idee. Besser: Den auf das Wesentliche reduzierten Code als Text hier reinstellen.

    Ich hoffe, man kann es lesen.

    Keine Ahnung, ob "man" kann - ich jedenfalls nicht. Ich sehe nur grüne Krümel auf einem riesengroßen weißen Hintergrund.

    Kann mir bitte mal jemand den Schubs in die richtige Richtung geben?

    Knappe Erklärung mit Beispielen:

    counter()
    counter-increment
    counter-reset

    Vielleicht findest du da noch einen hilfreichen Anstoß.

    Einen schönen Tag noch
     Martin

    --
    Ich fürchte, ich brauche ein neues Portemonnaie. Das alte ist leer.
    1. Moin Martin,

      Soweit ich dich verstanden habe, soll mit jedem h3-Element der counter hochgezählt werden. Dann wäre es für mich logisch, ihn mit einem h2-Element wieder zurückzusetzen. Hast du das so?

      Hatte ich nicht, habs gerade mal eingebaut: vor dem <h3> ein <h2> eingefügt, Ergebnis wie vor, also war nix.

      Ich versuch mal den Text hier einzufügen:

      <!--- CSS -->

      @media screen {
         .print {
           display: none;
      }
      
      body {
        width: 210mm; 
        height: 296mm;
        margin: 0mm; 
        padding: 0mm;
        overflow: scroll;
        background: white;
        color: black;
        position: relative;
        page-break-after: always;
        font-family: Times New Roman,sans-serif; 
        font-size: 20px;
        counter-reset: kapnum abbnum pagnum;
      }
      
      @page { 
        size: 210mm 296mm; 
        overflow: hidden;
        background: white;
        color: black;
        position: relative;
        page-break-after: always;
        font-family: Times New Roman,sans-serif; 
        font-size: 20px;
      }
      
      @page :left { 
         margin-left: 15mm; margin-right: 20mm;  
      }
      @page :right { 
        margin-left: 20mm; margin-right: 15mm;  
      }
      
      @page :header {
        margin-top: 5mm; 
        height: 20mm;
        width: 210mm;
        position: absolute;
        text-align: center; 
        font-size: 25px;
      }
      
      @page :inhalt {  
        margin-top: 25mm;
        margin-bottom: 270mm;  
        height: 270mm;
        width: 210mm; 
        position: absolute;
        font-size: 20px;
      }
      
      @page :footer { 
        margin-top: 270mm; 
        height: 25mm;
        width: 210mm;
        position: absolute;
        text-align: center; 
        font-size: 15px;
        page-break-after: always;
      }
      
      
      sheet {
        width: 210mm; 
        height: 296mm;
        position: relative;
        page-break-after: always;
      }
      
      p { 
        widows: 4;  orphans: 3;
      }
      
      .q {
        text-align: center;
        font-style: italic;
      }
      
      * {
             box-sizing: border-box;
             -moz-box-sizing: border-box;
         }
      
      
      .zweispaltig { 
        columns: 2;
        text-align: justify; 
        font-size: 18px;
        -ms-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
      }
      
      .zweispaltig::after {
          content: "";
          clear: both;
          display: table;
      }
      
      
      
      .roundimg {
          border-radius: 50%;
          -moz-border-radius: 50%;
          -webkit-border-radius: 50%
      }
      
      
      
      ul.leaders {
          max-width: 175mm;
          padding: 0;
          overflow-x: hidden;
          list-style: none}
      ul.leaders li:before {
          float: left;
          width: 0;
          white-space: nowrap;
          content:
       ". . . . . . . . . . . . . . . . . . . . "
       ". . . . . . . . . . . . . . . . . . . . "
       ". . . . . . . . . . . . . . . . . . . . "
       ". . . . . . . . . . . . . . . . . . . . "
       ". . . . . . . . . . . . . . . . . . . . "}
      ul.leaders li:after {
          float: left;
          width: 0;
          white-space: nowrap;
          content:
       ". . . . . . . . . . . . . . . . . . . . "
       ". . . . . . . . . . . . . . . . . . . . "
       ". . . . . . . . . . . . . . . . . . . . "
       ". . . . . . . . . . . . . . . . . . . . "
       ". . . . . . . . . . . . . . . . . . . . "}
      ul.leaders span:first-child {
          padding-right: 0.38em;
          background: white}
      ul.leaders span + span {
          float: right;
          padding-left: 0.38em;
          background: white;
          position: relative;
          z-index: 1}
      
      h2  { 
        counter-reset: abbnum 0; 
      }
      
      h3  { 
        counter-increment: kapnum; 
      }
      
      h3::after { content: "Kapitel: " counter(kapnum) "  Abbildung: " counter(abbnum) } 
      
      
      abb  { 
        counter-increment: abbnum; 
        font-size: 15px;
        text-align: center;
        font-style: oblique;
        font-weight: normal;
      } 
      
      abb::before { content: "Abb. " counter(kapnum) "." counter(abbnum) ": " } 
      
      nbr  {  
        counter-increment: pagnum;
        font-size: 20px;
        font-style: normal;
        font-weight: normal;
        text-align: center;
      } 
      
      nbr::before { content: "-  " counter(pagnum) "  -" } 
      

      <!--- HTML -->

      <html>
      
      <head>
      ......
      </head>
      
      <body>
      
      <!-- Seite 6 - links - Abstand 15 - 20 -->
      <page style="overflow: hidden;">
      
      <div class="header" style="border-top: 5mm; border-bottom: 2px solid black;">
      <p style="text-align: center; font-size: 25px;">Auf den Spuren von Johann Adam Schürmann</p>
      <p style="text-align: center; font-size: 20px; font-weight: bold;">Gliederung des Buches und Inhaltsverzeichnis</p>
      </div>
      <br />
      <div class="inhalt" style="display: flow-root;">
      <div style="padding-left: 15mm; padding-right: 20mm; float: left; width=175mm;">
      <h2></h2>
      <h3></h3>
      
      <p align="center">
      <img src="Docs/Bilder/JAS/slides/Erstes_Schulbuch.jpg" width="70%" height="70%"></img>
      </p>
       <p align="center"><abb>
      Das Schulbuch aus dem Jahr 1851.
      </abb></p>
      
      <p align="center">
      <img src="Docs/Bilder/JAS/slides/Plakette_William_2015.jpg" width="70%" height="70%"></img>
      </p>
      
      <p align="center"><abb>
      2015 stifteten die Familien, anlässlich des 200. Geburtstagsjubiläums von Pastor Clamor Wilhelm, die oben abgebildete Plakette auf Williams Grab.
      </abb></p>
      
      </div>
      </div>
      
      
      <div class="footer" style="margin-top: 0mm; border-top: 1px solid black;">
      <p style="text-align: center;">&nbsp;</p>
      <p style="text-align: center;"><nbr></nbr></p>
      </div>
      </page>
      
      
      
      <!-- Seite 7 - rechts - Abstand 20 - 15 -->
      <page style="overflow: hidden;">
      
      <div class="header" style="border-top: 5mm; border-bottom: 2px solid black;">
      <p style="text-align: center; font-size: 25px;">Auf den Spuren von Johann Adam Schürmann</p>
      <p style="text-align: center; font-size: 20px; font-weight: bold;">Gliederung des Buches und Inhaltsverzeichnis</p>
      </div>
      <br />
      <div class="inhalt" style="display: flow-root;">
      <div style="padding-left: 20mm; padding-right: 15mm; float: left; width=175mm;">
      <h2></h2>
      <h3></h3>
      
      <p align="center">
      <img src="Docs/Bilder/Lehrer/slides/John_Arundel.jpg" width="50%" height="50%"></img>
      </p>
      <p align="center"><abb>
      John Arundel<br />
      (* 10. Dezember 1778&nbsp;&nbsp;&nbsp;† 5. März 1848)
      </abb></p>
      
      Arundel war ein angesehener englischer Theologe und Pastor. Von 1820 bis 1846 war er "Home" Sekretär (Geschäftsführer) für die London Missionary Society.
      
      
      <p align="center">
      <img src="Docs/Bilder/Lehrer/slides/Bild_43a.jpg" width="50%" height="50%"></img>
      </p>
      <p align="center"><abb>
      "Meeting House" auch "Mr. Arundel's Chapel" genannt, London Southwark, Union Street. 
      </abb></p>
      
      Das Gebäude wurde nach dem Bau von 1783 bis 1881 als Methodisten- und Kongregationalisten-Kirche genutzt, danach verkauft und in eine Sportarena umgewandelt. Wegen ihrer Form erhielt sie den Namen "The Ring".
      <br /><br />
      Die Ordination wurde von den Pastoren und Theologen Dr. Thomas Henderson, Mr. William Ellis, Mr. John Arundel, Mr. Thomas Lewis, Mr. James Cooper, Mr. Cone und Mr. John Clayton vorgenommen.
      
      </div>
      </div>
      
      
      <div class="footer" style="margin-top: 0mm; border-top: 1px solid black;">
      <p style="text-align: center;">&nbsp;</p>
      <p style="text-align: center;"><nbr></nbr></p>
      </div>
      </page>
      
      
      
      <!-- Seite 8 - links - Abstand 15 - 20 -->
      <page style="overflow: hidden;">
      <div class="header" style="border-top: 5mm; border-bottom: 2px solid black;">
      <p style="text-align: center; font-size: 25px;">Auf den Spuren von Johann Adam Schürmann</p>
      <p style="text-align: center; font-size: 20px; font-weight: bold;">Gliederung des Buches und Inhaltsverzeichnis</p>
      </div>
      <br />
      <div class="inhalt" style="display: flow-root;">
      <div style="padding-left: 20mm; padding-right: 15mm; float: left; width=175mm;">
      
      <p align="center">
      <img src="Docs/Bilder/JAS/slides/John_Cameron_Lowrie.jpg" width="50%" height="50%"></img>
      </p>
      <p align="center"><abb>
      John Cameron Lowrie<br />
      (* 16. Dezember 1808&nbsp;&nbsp;&nbsp;† 31. Mai 1900)
      </abb></p>
      
      Reverend Dr. John Lowrie war der Sohn von Hon. Walter Lowrie. Er wurde 1832 Sekretär der "Western Foreign Missionary Society" in Indien und war der erste presbyterianische Missionar. Mit seiner Frau reiste er 1833 in die Mission. Dort gründete er die ersten Kirchen und Mis­sionsschulen. Johann Adam Schürmann und John Lowrie dürften sich dort kennengelernt und in Verbindung gestanden haben.
      <p align="center">
      <img src="Docs/Bilder/JAS/slides/Walter_Lowrie.jpg" width="50%" height="50%"></img>
      </p>
      <p align="center"><abb>
      Walter Lowrie<br />
      (* 10. Dezember 1784&nbsp;&nbsp;&nbsp;† 10. Dezember 1868)
      </abb></p>
      
      Von dem "ehrenwerten Mr. Walter Lowrie", wurde er eingeladen und konnte in dessen Haus wohnen.
      Reverend Hon. Walter Lowrie wurde in Schottland geboren. Er kam mit seinen Eltern in die USA, war Lehrer, Landvermesser, Theologe, Politiker, demokratisch-republikanischer Abgeordneter in Pennsylvania und Senator im Repräsentantenhaus der USA. Später arbeitete er für die presbyterianische Kirche der USA, war dort Sekretär für auswärtige Missionen. Lowrie war also auch verantwortlich für deren Missionare in Indien.
      
      </div>
      </div>
      
      
      <div class="footer" style="margin-top: 0mm; border-top: 1px solid black;">
      <p style="text-align: center;">&nbsp;</p>
      <p style="text-align: center;"><nbr></nbr></p>
      </div>
      </page>
      
      
      
      
      <!-- Seite 9 - rechts - Abstand 20 - 15 -->
      <page style="overflow: hidden;">
      
      <div class="header" style="border-top: 5mm; border-bottom: 2px solid black;">
      <p style="text-align: center; font-size: 25px;">Auf den Spuren von Johann Adam Schürmann</p>
      <p style="text-align: center; font-size: 20px; font-weight: bold;">Gliederung des Buches und Inhaltsverzeichnis</p>
      </div>
      <br />
      <div class="inhalt" style="display: flow-root;">
      <div style="padding-left: 20mm; padding-right: 15mm; float: left; width=175mm;">
      <h2></h2>
      <h3></h3>
      
      <p align="center">
      <img src="Docs/Bilder/Zeitgeschehen/slides/Kft_B-L_1789.jpg" width="100%" height="100%"></img>
      </p>
      <p align="center"><abb>
      Die Karte des Kurfürstentums Braunschweig - Lüneburg von 1789, dem das ehemalige Fürstbistum Osnabrück 1802 zugeschlagen wurde.
      </abb></p>
      
      Diese Zuordnung währte nicht lange. Napoleon beherrschte mit seinen Truppen und durch siegreiche Schlachten mehr und mehr Staaten und Regionen in Mitteleuropa. In den Schlachten von Jena und Auerstedt besiegte er Ende 1806 die Koalition der preußischen und russischen Truppen. In dem "Frieden von Tilsit" im Juli 1807 verlor Preußen wesentliche Teile seines westlichen Territoriums.
      
      <p align="center">
      <img src="Docs/Bilder/Zeitgeschehen/slides/Preussen-1806.jpg" width="100%" height="100%"></img>
      </p>
      <p align="center"><abb>
      Karte des Königreichs Preußen, zu dem seit 1806 auch das ehemalige Fürstbistum Osnabrück gehörte.
      </abb></p>
      
      Der braun eingefärbte Kartenteil zeigt das Territorium Preußens nach dem Frieden von Tilsit 1807.
      
      <p align="center">
      <img src="Docs/Bilder/Zeitgeschehen/slides/Wappen_Kft_B-L.jpg" width="50%" height="50%"></img>
      </p>
      <p align="center"><abb>
      Das Wappen des Kurfürsten von Braunschweig - Lüneburg.
      </abb></p>
      
      <p align="center">
      <img src="Docs/Bilder/Zeitgeschehen/slides/Wappen_Koenigreich_Preussen.jpg" width="65%" height="65%"></img>
      </p>
      <p align="center"><abb>
      Wappen des Königs von Preußen.
      </abb></p>
      
      </div>
      </div>
      
      
      <div class="footer" style="margin-top: 0mm; border-top: 1px solid black;">
      <p style="text-align: center;">&nbsp;</p>
      <p style="text-align: center;"><nbr></nbr></p>
      </div>
      </page>
      
      
      
      
      </body>
      
      </html>
      

      Soderle, paßt es jetzt besser?

      Gruß Klaus

      1. Hallo

        Fangen wir mal hinten an.

        Soderle, paßt es jetzt besser?

        Etwas, nur etwas. Hier im Forum gibt es über dem Eingabefeld eine Button-Leiste, in der es auch einen Button für die Auszeichnung von Textteilen als Code gibt (der da: </>). Der dahinterstehende Code erkennt auch, ob ein Teil eines Fließtexts ausgezeichnet werden soll oder ein mehrzeiliger Block, womit die Auszeichnung auch passend (Inlinecode oder Codeblock) erfolgt. Das erhöhnt die Lesbarkeit ungemein.

        Ich kenne mich nicht in allen Ecken der Browser-Unterstützung für Druck-Stylesheets aus, daher kann ich dir bei deinem eigentlichen Problem nicht behilflich sein. Klar ist, die Browserunterstützung ist bestenfalls mäßig. Alle gängigen Browser unterstützen nur Teile der für den Druck verfügbaren CSS-Features und jeder einen anderen Teil.

        Von mir also nur ein paar allgemeine Einfürfe.

          font-size: 20px;
        

        Für die Schriftgröße im Ausdruck empfiehlt sich die für dieses Medium gängige Einheit pt. Die Schriftgröße selbst müsstest du bei Verwendung von pt als Einheit allerdings noch (nach unten) anpassen.

        @page :header
        @page :inhalt
        @page :footer
        

        Diese Pseudoklassen (:header, :inhalt und :footer) gibt es in CSS nicht. Was soll das sein?

          @page :inhalt {  
          margin-top: 25mm;
          margin-bottom: 270mm;  
          height: 270mm;
          width: 210mm; 
        }
        

        Bist du sicher, dass du dem Inhalt sowohl eine Höhe zubilligst (height: 270mm;) und dazu noch einen gleich großen Abstand nach unten (margin-bottom: 270mm;) haben willst? Und …

        @page :footer { 
          margin-top: 270mm; 
        

        … dazu noch einen ebenso großen Abstand des Footers nach oben (margin-top: 270mm;)? Das sind zusammen 810mm, die bestenfalls im Querformat auf DIN A2 passen. und dass, …

        sheet {
          width: 210mm; 
          height: 296mm;
        }
        

        … wo du doch explizit irgedeinem im HTML-Standard nicht existentierenden Element die Größe von DIN A4 verpasst.

        .roundimg {
            border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%
        }
        

        Die Reihenfolge der Regeln ist falsch. Zuerst werden die Herstellerabhängigen Regeln notiert und als letztes die regelkonforme Regel. Im Block für zweispaltig hast du es übrigens für hyphens richtig herum notiert. Die Regel für border-radius kannst du übrigens getrost weglassen. Einen Browser, der das nicht nativ unterstützt, wirst du außerhalb von Museumslaboren nicht mehr begegnen.

        abb  {
        } 
        
        abb::before { content: "Abb. " counter(kapnum) "." counter(abbnum) ": " } 
        

        … und …

        <p align="center">
        <img src="Docs/Bilder/Lehrer/slides/John_Arundel.jpg" width="50%" height="50%"></img>
        </p>
        <p align="center"><abb>
        John Arundel<br />
        (* 10. Dezember 1778&nbsp;&nbsp;&nbsp;† 5. März 1848)
        </abb></p>
        
        Arundel war ein angesehener englischer Theologe und Pastor. Von 1820 bis 1846 war er "Home" Sekretär (Geschäftsführer) für die London Missionary Society.
        

        … hier setzt du nichtexistente Elemente, namentlich abb, ein. Zudem ist die Beschreibung zum Bild nicht als Textabsatz gekennzeichnet. Das sollte sie aber. Weiterhin benutzt du HTML-Attribute zur Gestaltung, wo CSS-Regeln benutzt werden sollten und an anderer, von mir nicht zitierter Stelle Inline-CSS, wo du doch sowieso exteres CSS vorhältst.

        Allgemein bietet sich hier der Einsatz von figure und figcaption an.

        <figure>
         <img src="Docs/Bilder/Lehrer/slides/John_Arundel.jpg" width="50%" height="50%" />
         <figcaption>
          <p>John Arundel<br />
         (* 10. Dezember 1778&nbsp;&nbsp;&nbsp;† 5. März 1848)</p>
          <p>Arundel war ein angesehener englischer Theologe und Pastor. Von 1820 bis 1846 war er "Home" Sekretär (Geschäftsführer) für die London Missionary Society.</p>
         </figcaption>
        </figure>
        

        Um die direkte Bildunterschrift von der allgemeineren beschreibung zu unterscheiden, kannst du dem Absatz eine Klasse zuweisen. Vielleicht bietet sich dafür auch ein anderes HTML-Element an. Mag sein, dass dazu von anderer Seite noch Vorschläge kommen.

        Tschö, Auge

        --
        200 ist das neue 35.
        1. Moin, und was haben diese "Ausführungen" nun mit dem im Topic angeführten Problem zu tun? Gruß

          1. Hallo

            und was haben diese "Ausführungen" nun mit dem im Topic angeführten Problem zu tun?

            Nichts. Das steht auch in der Einleitung meines Vorpostings explizit drin. Meine Ausführungen zeigen dir aber verbesserungswürdiges auf. Nimm's oder lass' es sein, aber ningel nicht rum, wenn jemandem Fehler auffallen und er/sie selbige anspricht. Sie abseits er eigentlichen Fragestellung aufzuzeigen, ist hier üblich.

            Tschö, Auge

            --
            200 ist das neue 35.
            1. EOD und tschüsssss

              1. @@plenist

                EOD und tschüsssss

                Das heißt, der Thread kann für weitere Antworten gesperrt werden‽

                🖖 Живіть довго і процвітайте

                --
                When the power of love overcomes the love of power the world will know peace.
                — Jimi Hendrix
                1. OK, überredet.

    2. @@Der Martin

      Meine CSS- und HTML-Datei hab ich hier mal als Bild angefügt

      Das ist eine ganz schlechte idee. Besser: Den auf das Wesentliche reduzierten Code als Text hier reinstellen.

      Das ist schon eine bessere Idee, aber immer noch eine schlechte. Besser: Das Ganze zum Ansehen im Web verfügbar machen; entweder auf dem eigenen Webserver oder auf Plattformen wie CodePen, dabblet o.ä.

      🖖 Живіть довго і процвітайте

      --
      When the power of love overcomes the love of power the world will know peace.
      — Jimi Hendrix
      1. Moin, sorry, aber ich habs nicht so mit Ameldung auf irgendwelchen Seiten. Gruß

        1. @@plenist

          sorry, aber ich habs nicht so mit Ameldung auf irgendwelchen Seiten.

          🤡

          Dabblet menu: Save anonymously

          🖖 Живіть довго і процвітайте

          --
          When the power of love overcomes the love of power the world will know peace.
          — Jimi Hendrix
  2. @@plenist

    Da du nicht zeigst, was du gemacht hast (nein, hellgrüner Text auf Weiß als Bild ist kein Zeigen), kann man auch schlecht prüfen, was du falsch gemacht hast.

    So jedenfalls geht’s: Beispiel.

    1. Es muß eine, ich sag mal "Instanz" geben, an der festgemacht wird, wann der Counter hochgezählt wird, in meinem Fall bei jedem Auftreten von <h3>.

    Das könnte das Problem sein. Ich zähle mit den sections hoch; mit h2 geht’s nicht.

    Dein Markup ist übrigens fehlerhaft. Benutzt du das nur für den Druck oder auch für eine Webseite?

    🖖 Живіть довго і процвітайте

    --
    When the power of love overcomes the love of power the world will know peace.
    — Jimi Hendrix
    1. Moin, wenn mein Verständnis richtig ist, leitet <h2> doch eine Section ein. Also warum kann ich dann diesen Punkt nicht als "Instanz" benutzen?

      Und ja, die Seite wird sowohl in der Anzeige als auch beim Druck wie gewünscht dargestellt.

      Gruß

      1. @@plenist

        wenn mein Verständnis richtig ist, leitet <h2> doch eine Section ein.

        „Leitet ein“ ist was anderes als „ist“.

        Und ja, die Seite wird sowohl in der Anzeige als auch beim Druck wie gewünscht dargestellt.

        Auch hier ist dein Verständnis falsch. Eine Webseite kann auf andere Arten als visuelle Anzeige ausgegeben werden. Und das funktioniert bei deinem kaputten HTML nicht wie gewünscht.

        🖖 Живіть довго і процвітайте

        --
        When the power of love overcomes the love of power the world will know peace.
        — Jimi Hendrix
  3. @@plenist

    Um nun die Abbildungen innerhalb der Kapitel mit einem Bildtext zu versorgen, der "Abb. x.y: 'Text zum Bild'" umfaßt, um daraus später ein Abbildungsverzeichnis zu erstellen, habe ich die CSS-Funktion Counter() eingesetzt.

    Hm, damit bekommst du die Numerierung in die Bildunterschrift. Aber was hast du davon? In deinem Abbildungsverzeichnis landet diese Numerierung ja nicht automatisch; da gibst du die Bildnummern händisch an?

    Wenn dann ein Bild oder ein Kapitel hinzukommt oder wegfällt, ändert sich die Numerierung bei den Bildunterschriften automatisch. Nicht aber im Abbildungsverzeichnis. Das heißt, das stimmt nicht mehr überein.

    Wie willst du das Problem lösen? CSS ist kein Redaktionssystem.

    🖖 Живіть довго і процвітайте

    --
    When the power of love overcomes the love of power the world will know peace.
    — Jimi Hendrix
    1. Moin, ich will erstmal für das im Topic angeführte Problem eine Lösung haben, wie ich das Ergebnis dann ins Verzeichnis bekomme, wird sich später finden. Gruß

      1. wie ich das Ergebnis dann ins Verzeichnis bekomme, wird sich später finden.

        Du baust also ein Haus mit Schornstein auf dem Dach und Heizungsanlage im Keller. Die Frage, wie Du den Rauch durch die Wohngeschosse von der Heizung im Keller in den Schornstein auf dem Dach bekommst, willst Du lösen sobald das Haus fertig gebaut ist?

        Ernsthaft?

    2. Hallo Gunnar,

      die Numerierung
      die Numerierung

      hurra, ich bin nicht der Einzige, der an der Schreibweise Numerierung mit nur einem m festhält!

      Einen schönen Tag noch
       Martin

      --
      Ich fürchte, ich brauche ein neues Portemonnaie. Das alte ist leer.
      1. Hi,

        die Numerierung
        die Numerierung

        hurra, ich bin nicht der Einzige, der an der Schreibweise Numerierung mit nur einem m festhält!

        #metoo

        cu,
        Andreas a/k/a MudGuard

      2. @@Der Martin

        hurra, ich bin nicht der Einzige, der an der Schreibweise Numerierung mit nur einem m festhält!

        Wenn ich melancholisch bin, schreibe ich auch noch Plazierung.

        🖖 Живіть довго і процвітайте

        --
        When the power of love overcomes the love of power the world will know peace.
        — Jimi Hendrix