Dabei ging es insbesondere um die Darstellung von Code-Blöcken, die Formatierung von Tabellen sowie die mobile Ansicht im Portrait-Modus. Ziel war es, die Styles des verwendeten WordPress-Themes gezielt an meine eigenen Anforderungen und den technischen Stil der Webseite anzupassen.

Code

Die Standard-Abstände innerhalb des umschließenden Containers sowie des eigentlichen Code-Blocks haben mir optisch nicht zugesagt. Da ich im Regelfall eher Quellcode und Kommandozeilenausgaben dokumentiere, sollte sich die Darstellung auf der Seite eher daran orientieren.

Der Code-Block soll bündig links beginnen, einen grauen Hintergrund besitzen und zusätzlich durch einen Rahmen hervorgehoben werden. Durch den zusätzlichen Border-Pixel wurde die Formatierung jedoch beeinflusst, weshalb das box-sizing entsprechend angepasst wird. Dabei ist zu beachten, dass das umschließende pre-Element die Klasse wp-block-code besitzt und nicht das eigentliche code-Element. Deshalb werden Hintergrundfarbe auf dem pre-Element und die Abstände auf dem code-Element gesetzt. Andernfalls entsteht zwischen pre und code ein unerwünschter weißer Bereich.

Inline-Code soll hingegen ohne zusätzliche Abstände dargestellt werden und keinen eigenen farblichen Hintergrund besitzen.

.wp-block-code{
	padding:0.75em;
	margin-bottom:1em; 
	border-radius: 5px;
	border-style: solid;
	border-width:1px;
	box-sizing: content-box;
}

Tabellen

Der Abstand unterhalb der Tabelle war mir in der Standarddarstellung zu groß, da das umschließende Element bereits einen eigenen unteren Abstand besitzt. Daher wurde der zusätzliche margin-bottom der Tabelle entfernt.

Außerdem sollte die Tabellenüberschrift farblich hervorgehoben werden. Die Hintergrundfarbe wird dabei gezielt auf die th-Elemente innerhalb des thead gesetzt. Dadurch bleibt die Formatierung flexibel, falls th-Elemente später zusätzlich beispielsweise für die erste Spalte innerhalb des Tabelleninhalts verwendet werden sollen.

.wp-block-table table {
	margin-bottom:0px;
}

.wp-block-table table > thead > tr > th {
	background-color:#6d6d6d;
	color:white;
	border-color:#2b2b2b
}

Website-Titel

Auf mobilen Geräten im Portrait-Modus war der Seitentitel in Kombination mit Logo und Beschreibung zu groß, wodurch der Text umgebrochen ist. Deshalb wurde die Schriftgröße innerhalb einer Media Query gezielt für Geräte im Hochformat reduziert.

Dadurch bleiben Titel, Beschreibung und Logo auch auf kleineren Displays sauber ausgerichtet und die Darstellung wirkt insgesamt kompakter und aufgeräumter.

@media screen and (orientation: portrait){
	.site-branding .site-title{font-size:1.1em;}
	.site-branding .site-description{font-size:0.6em;}
}

Changelog

29.05.2026

Nach einem Update des Themes können mehrere Einstellungen zu den Code-Blocks entfernt werden. Die alten Einstellungen vermerke ich hier und ergänze die neuen Einstellungen direkt oben im Artikel.

.wp-block-code{
	margin-bottom:1em; 
	padding:0em;
	background: #e0e0e0;
	border-radius: 5px;
	border-style: solid;
	border-width:1px;
	box-sizing: content-box;
}

.wp-block-code code {
	font-family: Consolas, "Courier New", monospace;
	margin:0em; 
	padding:0.5em;
}

code {
	font-family: Consolas, "Courier New", monospace;
	margin:0em; 
	padding:0em;
	background-color:none;
}

Der Beitrag Formatanpassungen für Tabellen, Code und Titelleiste erschien zuerst auf Maximilian Krieg.

Da WordPress inzwischen intensiv mit Block-Elementen im visuellen Editor arbeitet und dabei deutlich semantischeren HTML-Code erzeugt, habe ich mich entschieden, das Thema neu aufzulegen und entsprechend anzupassen.

Bevor es an die Umsetzung geht, schauen wir uns kurz an, warum der Halbgeviertstrich bei Zitaten verwendet wird. Im Deutschen (und auch international) ist der Halbgeviertstrich (–) der Standard für:

• Autorenangaben bei Zitaten
• Gedankenstriche im Satz
• Aufzählungsähnliche Hervorhebungen

Diesen Halbgeviertstrich möchte ich vor der Quellenangabe automatisch per CSS einfügen, sodass keine manuellen typografischen Anpassungen im eigentlichen Inhalt mehr erforderlich sind. Dafür lohnt sich ein genauerer Blick auf die von WordPress erzeugte HTML-Struktur. Als Beispiel dienen das folgende Zitat und die zugehörige Quellenangabe.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

http://www.loremipsum.de

WordPress erzeugt aus dem Block folgenden HTML-Code, den ich zur besseren Lesbarkeit nachträglich eingerückt habe.

<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
        voluptua.
    </p>
    <cite>http://www.loremipsum.de</cite>
</blockquote>

Um den Halbgeviertstrich automatisch zu ergänzen, füge ich folgenden CSS-Code im Custom-CSS-Bereich meines WordPress-Themes hinzu. Auf diese Weise wird der Strich zentral über das Stylesheet gesteuert und bei allen Zitaten einheitlich dargestellt, ohne dass er manuell im Editor eingefügt werden muss. Das sorgt nicht nur für eine konsistente Typografie, sondern trennt auch sauber Inhalt und Darstellung

blockquote > cite::before { 
    content: "— ";
}

Der Beitrag Quellenangaben für das blockquote-Element erschien zuerst auf Maximilian Krieg.

Vor der Anpassung sehen die Bilder bei Nicht-Standard-Bildschirmgrößen zum Beispiel wie folgt aus. Ebenfalls wird bei Transparenz ein grauer Hintergrund eingefügt statt einem weißen.

Nach Prüfung mehrerer Optionen habe ich mich daher dazu entschiedenen das vorhandene Theme direkt im CSS zu bearbeiten. Folgende Einstellungen sind in der Customify: style.min.css aktiv und beeinflussen das Bild-Layout.

.posts-layout .entry-thumbnail {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    line-height: 0;
    background-color: #d5d5d5;

}

.posts-layout .entry-thumbnail {
    /*position: absolute;*/
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    /*display: flex;*/
    line-height: 0;
    /*background-color: #d5d5d5;*/
    padding:1em;
}

Am Smartphone sind nun in der vertikalen Ausrichtung die Bilder am unteren Ende abgeschnitten. Hierzu wird noch etwas Padding im Style für den Medientyp unten ergänzt.

@media screen and (max-width: 568px)
.posts-layout.layout--blog_classic .entry-media {
    margin-right: 0;


}

@media screen and (max-width: 568px)
.posts-layout.layout--blog_classic .entry-media {
    margin-right: 0;
    /*padding-bottom: 2em;*/
}

Update 26.11.2023: Padding-Bottom: 2em; wurde wieder deaktiviert.

@media screen and (max-width: 568px)
.posts-layout .entry-media {
    margin-bottom: 1em;
    width: 100%!important;
    padding-top: 56.25%;
}

@media screen and (max-width: 568px)
.posts-layout .entry-media {
    margin-bottom: 1em;
    width: 100%!important;
    /* padding-top: 56.25%; */
}

Update 01.06.2024: Padding padding:1em; wieder deaktiviert.

.posts-layout .entry-thumbnail {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    line-height: 0;
    background-color: #d5d5d5;

}

.posts-layout .entry-thumbnail {
    /*position: absolute;*/
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    /*display: flex;*/
    line-height: 0;
    /*background-color: #d5d5d5;*/
    /*padding:1em;*/
}

Durch die Anpassung betten sich die Bilder im Blog-Layout besser in das gegebene Theme auf verschiedensten Bildschirmgrößen ein. Im Vollbild-Modus sowie am Smartphone kann ich keinen Unterschied feststellen.

Der Beitrag WordPress – Anpassung CSS für Entry-Images erschien zuerst auf Maximilian Krieg.

Globales Seitenlayout

Die hier beschriebenen Styles sind abhängig von dem aktuell eingesetzten Template. Bei einem Wechsel muss ich sie individuell neu anpassen. Vorwiegend habe ich die Fußzeile kleiner gemacht, da sie einen viel zu große Abstand in alle Richtungen hat. Weiterhin habe ich die Differenzierung zwischen dem Hintergrund, dem Menü und den eigentlichen Inhalten durch Schatteneffekte und farbliche Hervorhebung weiter verstärkt.

.sidebarImages {
float:left;width:100%;
}

.copyright{
margin:0;
}

.t3-copyright {
padding:1rem 0;
}

#t3-footer{
    margin-top:1rem;
}

.t3-mainnav{
	box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.t3-mainbody{
	background-color:white;
	box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.t3-wrapper{
	background-color:#f1f1f1;
}

Inhaltslayout

Diese Styles beziehen sich auf die Inhalte der Artikel meiner Seite. Sie verbessern die Struktur und Lesbarkeit. Da ich sie regelmäßig benötige, werde ich auch den HTML-Quelltext an dieser Stelle präsentieren. Ich vermeide den Einsatz von Klassen, um eine höhere Kompatibilität mit älteren Beiträgen zu erzielen und den Quelltext einfach zu halten. Ich setzte stattdessen bevorzugt Selektoren ein.

Tabellenlayout

Tabellen sollen bei mir die maximale Seitenbreite ausnutzen. Durch die prozentuale Angabe skalieren sie auch gut bei mobilen Geräten oder Monitoren unterschiedlicher Größe. Da das Template nur horizontale Linien bei Tabellen verwendet, habe ich eine zellenbasierte Umrandung eingeführt. Wenn möglich verwende ich auch das caption-Tag. Damit es auffällt, habe ich den rot eingefärbt. Ich bin aktuell noch unentschlossen, ob ich eine Nummerierung der Tabellen, wie bei den Bildern, einführen möchte.

table {
width:100%;
	margin-bottom:10px;
}

td, th {
padding: 0.5rem; 
border: 1px solid #dddddd;
}

caption{
	font-style: italic; 
color:red; 
	text-align:center;
}

<table>
<caption>Überschrift</caption>
<thead>
<tr><th>Quelltext</th><th>Ergebnis</th></tr>
</thead>
<tbody>
<tr>
<td>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</td>
<td>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</td>
</tr>
</tbody>
</table>

Zitate

Um die Qualität meiner Beiträge zu verbessern und meinen eigenen wissenschaftlichen Ansprüchen gerecht zu werden, verwende ich verstärkt blockquote– und cite-Elemente. Der eingefügte Text ist kursiv, um ihn noch deutlicher hervorzuheben. Vor der Quelle wird automatisch ein Strich eingefügt, damit sie etwas eingerückt wird.

blockquote > p {
	font-size: 14px; 
	font-style:italic;
}

blockquote > footer > cite::before { 
content: "— ";
}

<div class="mkrEbeneStart>
<blockquote>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<footer><cite>http://www.loremipsum.de/</cite></footer>
</blockquote>
</div>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.http://www.loremipsum.de/

Bilder

Ich definiere zunächst, dass alle Bilder auf meiner Seite zentriert sein sollen. Weiterhin werden Bilder, die ich in Artikeln verwende, zusätzlich mit einer Beschriftung und Nummerierung versehen, wie bei einer wissenschaftlichen Arbeit.

img {
	display: block; 
	margin-left: auto; 
	margin-right: auto;
	margin-bottom:10px;
	width:100%;
}

.mkrEbeneStart img + figcaption:before{
	counter-increment: cBilder;
	content: "Abb. " counter(cBilder) ": ";
}

.mkrEbeneStart figcaption{
	text-align:center;
	padding-bottom:1rem;
}

<div class="mkrEbeneStart">
<figure><img title="Grauer Kasten" src="images/uploads/2015/20150618-grauerkasten.png" alt="Grauer Kasten" /><figcaption>Grauer Kasten</figcaption></figure>
<figure><img title="Grauer Kasten" src="images/uploads/2015/20150618-grauerkasten.png" alt="Grauer Kasten" /><figcaption>Grauer Kasten</figcaption></figure>
</div>

Überschriften

In einem früheren Artikel habe ich bereits beschrieben, wie man eine automatische Nummerierung bei Überschriften realisiert. Ich spanne ein div um den Bereich auf, der nummerierte Überschriften verwenden soll. Ich mache dies, um Konflikte mit dem jetzigen oder einem zukünftigen Template zu vermeiden. Aktuell halte ich es so, dass in neuen Artikeln alle Überschriften durchnummeriert werden. Ich verwende zwar keine <h5>-Überschriften, habe aber provisorisch den Style angelegt. Ich achte weiterhin darauf, dass jede Ebene in einer eigenen section liegt. Ein umschließendes header-Tag für die Überschriften vermeide ich, da es dann Probleme mit der Nummerierung gibt. Neu an dieser Stelle ist ebenfalls, dass auf der obersten Ebene der Counter für die Bildnummerierung initialisiert wird.

.mkrEbeneStart{
	counter-reset: ebene1 cBilder;
}

.mkrEbeneStart h3{
	counter-reset: ebene2;
}

.mkrEbeneStart h4{
	counter-reset: ebene3;
}

.mkrEbeneStart h3:before{
	content: counter(ebene1) " ";
	counter-increment: ebene1;
}

.mkrEbeneStart h4:before{
	content: counter(ebene1) "." counter(ebene2) " ";
	counter-increment: ebene2;
}

.mkrEbeneStart h5:before{
	counter-increment: ebene3;
	content: counter(ebene1) "." counter(ebene2) "." counter(ebene3) " ";
}

<div class="mkrEbeneStart">
<section>
<h3>Überschrift</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<section>
<h4>Überschrift</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</section>
<section>
<h4>Überschrift</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</section>
</section>
<section>
<h3>Überschrift</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<section>
<h4>Überschrift</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</section>
<section>
<h4>Überschrift</h4>
<article><header>
<p>Hier steht eine Frage oder Aussage</p>
</header><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></article>
</section>
</section>
</div>

Überschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Überschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Überschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Überschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Überschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Überschrift

Hier steht eine Frage oder Aussage

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Arbeitsblöcke

Ich vermeide bewusst die tiefe Stufung mit Überschriften, da sonst mehr Aufwand in die Strukturierung als in die eigentlichen Inhalte fließt. Für konkrete Inhalte und Aufgabenstellungen verwende ich daher article-Elemente. Defizite in der hierarchischen Strukturierung akzeptiere ich an dieser Stelle. Damit genau zu sehen ist, wo ein thematischer Block abschließt, ziehe ich einen dünnen Rand um den Artikel herum.

.mkrEbeneStart article>header>p{
	font-weight: bold;
}

.mkrEbeneStart article{
	border: 1px dashed #dddddd;
	margin: 1rem 0; 
	padding:1rem;
}

<article><header>
<p>Hier steht eine Frage oder Aussage</p>
</header><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></article>

Hier steht eine Frage oder Aussage

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Der Beitrag CSS-Anpassungen und HTML-Vorlagen erschien zuerst auf Maximilian Krieg.

Symptom

Im Browser wird ein vertikaler Rand (vgl. Abbildung) auf der rechten Seite von LaTeX-Formeln gezeigt, die mit MathJax auf der Seite gerendert werden. Dieser ist nach einer genauen Überprüfung eindeutig nicht Teil eines HTML-Elements und auch nicht im CSS von meiner Seite definiert. Der vertikale Rand erscheint unabhängig von den verwendeten Formeln. Eine Änderung am Server habe ich nicht vorgenommen und weiterhin tritt es ausschließlich im Chrome-Browser, aber nicht im Internet Explorer oder Mozilla Firefox auf.

Ursache

Im Git von MathJax habe ich einen Eintrag gefunden, der erklärt, dass dies mit einem veränderten Rundungsverfahren zusammenhängt, welches Chrome eingeführt hat. Früher hat Chrome Ränder mit einer Breite, die zwischen 0px und 1px liegt, abgerundet. Dies wurde jüngst geändert und durch ein aufrundendes Verfahren ersetzt, um sich anderen Browsern anzugleichen. Der Fehler liegt somit an meiner Version von MathJax.

Lösung

Der Fehler lässt sich problemlos dadurch beheben, dass man MathJax auf die neueste Version (Link) aktualisiert. Die Installation erfolgt durch Download, Entpacken und Anpassen der Pfade gemäß meines ursprünglichen Beitrags  Integration von LaTeX in Joomla.

Quellen

Sowohl im Git von MathJax (Link) als auch im Chromium-Bugtracker (Link) ist dieser Fehler berichtet worden. Die Erläuterungen zur Ursache stammen von dort.

Der Beitrag Chrome rendert MathJax mit einem schwarzen Rand erschien zuerst auf Maximilian Krieg.

/* Allgemeine Formatierungen */

	table {
		width: 100%;
		margin-bottom: 10px;
	}
	td, th {
		padding: 0.5rem;
		border: 1px solid #dddddd;
	}
	blockquote > p {
		font-size: 14px;
		font-style: italic;
	}
	blockquote > footer > cite::before {
		content: "— ";
	}

/* Style-spezifische Formatierungen */

	.copyright {
		margin: 0;
	}
	#t3-footer {
		margin-top: 1rem;
	}
	.t3-copyright {
		padding: 1rem 0;
	}
	.t3-mainnav {
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	}
	.t3-mainbody {
		background-color: white;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	}
	.t3-wrapper {
		background-color: #f1f1f1;
	}

/* Content-Formatierungen */

	.mkrEbeneStart {
		counter-reset: ebene1 cBilder;
	}
	.mkrEbeneStart h3 {
		counter-reset: ebene2;
	}
	.mkrEbeneStart h4 {
		counter-reset: ebene3;
	}
	.mkrEbeneStart h3:before {
		content: counter(ebene1) " ";
		counter-increment: ebene1;
	}
	.mkrEbeneStart h4:before {
		content: counter(ebene1) "." counter(ebene2) " ";
		counter-increment: ebene2;
	}
	.mkrEbeneStart h5:before {
		counter-increment: ebene3;
		content: counter(ebene1) "." counter(ebene2) "." counter(ebene3) " ";
	}
	.mkrEbeneStart article>header>p {
		font-weight: bold;
	}
	.mkrEbeneStart article {
		border: 1px dashed #dddddd;
		margin: 1rem 0;
		padding: 1rem;
	}
	.mkrEbeneStart table > caption {
		font-style: italic;
		color: red;
		text-align: center;
	}
	.mkrEbeneStart img + figcaption:before {
		counter-increment: cBilder;
		content: "Abb. " counter(cBilder) ": ";
	}
	.mkrEbeneStart figcaption {
		text-align: center;
		padding-bottom: 1rem;
	}
	.mkrEbeneStart img {
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10px;
		max-width: 100%;
	}

/* Kommentar-Plugin-Formatierungen */

	.ccomment-readmore {
		display: none;
	}
	.ccomment {
		margin-top: 1rem;
	}

Der Beitrag CSS-Aktualisierung für das Purity III-Template erschien zuerst auf Maximilian Krieg.

Der folgende Ausschnitt zeigt, wie ich Blockzitate in künftigen Artikel strukturieren werde.

<blockquote>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<footer><cite>http://www.loremipsum.de/</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Das W3C sieht an dieser Stelle vor, dass ein Zitat von einem figure-Element umschlossen wird und die Quellenangabe in einem figcaption-Element eingefügt wird. Mehr hierzu kann beim W3C (Link) nachgelesen werden. Weitere Beispiele und Informationen hierzu sind auf html5doctor (Link) zu finden. Der oben gezeigte Code führt zu folgender Darstellung.

Damit ich nicht manuell den Strich vor der Quelle setzen muss, lasse ich dies automatisch durch einen Style erledigen.

blockquote > footer > cite::before { 
    content: "— ";
}

Der Beitrag Quellenangaben für das blockquote-Element erschien zuerst auf Maximilian Krieg.

Cascading Style Sheets (CSS)

.mkrEbeneStart{
	counter-reset: ebene1;
}
.mkrEbeneStart h3{
	counter-reset: ebene2;
}
.mkrEbeneStart h4{
	counter-reset: ebene3;
}
.mkrEbeneStart h3:before{
	content: counter(ebene1) " ";
    counter-increment: ebene1;
}
.mkrEbeneStart h4:before{
    content: counter(ebene1) "." counter(ebene2) " ";
    counter-increment: ebene2;
}

Hypertext Markup Language (HTML)

Wie sahen die Überschriften vorher aus?

<h3>Ebene 1</h3> 
<h4>Ebene 2</h4>

Ebene 1

Ebene 2

Wie sehen die Überschriften jetzt aus?

<div class="mkrEbeneStart">
	<h3>Ebene 1</h3>
	<h4>Ebene 2</h4>
</div>

Ebene 1

Ebene 2

Der Beitrag Automatische Nummerierung mit CSS erschien zuerst auf Maximilian Krieg.