CSS counter-reset funktioniert nicht so, wie er soll

[Auge]

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