Ausgangslage

Bisher habe ich meine Herstellerzertifizierungen mithilfe eines WordPress-Plugins in Form eines Sliders dargestellt. Diese Lösung hat ihren Zweck erfüllt, gefällt mir inzwischen jedoch nicht mehr.

Durch den Slider ist immer nur ein Teil der vorhandenen Zertifizierungen sichtbar. Zudem bietet die Darstellung wenig Raum für zusätzliche Informationen zu den einzelnen Zertifikaten. Um sich einen vollständigen Überblick zu verschaffen, muss daher zunächst durch die verschiedenen Einträge navigiert werden.

Anforderungen

Die neue Darstellung soll alle Zertifizierungen direkt und übersichtlich auf einer Seite zeigen. Gleichzeitig möchte ich wichtige Metadaten wie den aktuellen Status und das Erwerbsdatum hinterlegen, ohne die Übersicht mit zusätzlichen Informationen zu überladen.

Daraus ergeben sich folgende Anforderungen:

• alle Zertifizierungen auf einen Blick
• übersichtliche und responsive Darstellung
• Zertifizierungs-Badge im Vordergrund
• zusätzliche Informationen bei Bedarf
• komfortable Bedienung per Maus, Touch und Tastatur
• keine zusätzliche Plugin-Abhängigkeit

Für die Umsetzung bieten sich Flip-Cards an. Auf der Vorderseite steht das jeweilige Zertifizierungs-Badge im Mittelpunkt. Mit einem Klick dreht sich die Karte und zeigt auf der Rückseite die zugehörigen Informationen.

Auch hierfür gibt es entsprechende WordPress-Plugins. Da die Anforderungen technisch überschaubar sind, möchte ich jedoch bewusst auf eine weitere Plugin-Abhängigkeit verzichten und die Lösung ausschließlich mit HTML, CSS und JavaScript umsetzen.

Umsetzung

Eine Flip-Card besteht aus einem äußeren Container sowie einer Vorder- und Rückseite:

flip-card
└── flip-card-inner
    ├── flip-card-front
    └── flip-card-back

Das innere Element wird beim Wechsel zwischen Vorder- und Rückseite um 180° gedreht. Auf meiner Zertifizierungsseite befindet sich auf der Vorderseite das jeweilige Badge, während die Rückseite die zugehörigen Informationen enthält.

Die Komponente ist bewusst generisch aufgebaut und kann daher auch für Projekte, Produkte, Teammitglieder oder andere Inhalte verwendet werden.

HTML

Eine einzelne Flip-Card wird mit folgendem HTML aufgebaut:

<div class="flip-card"
     tabindex="0"
     role="button"
     aria-label="Details anzeigen">

    <div class="flip-card-inner">

        <div class="flip-card-front">
            <img src="images/example.jpg"
                 alt="Beispielbild">

            <span class="flip-card-hint">
                Details
            </span>
        </div>

        <div class="flip-card-back">

            <span class="flip-card-category">
                Kategorie
            </span>

            <p class="flip-card-title">
                Titel
            </p>

            <p class="flip-card-description">
                Kurze Beschreibung
            </p>

            <div class="flip-card-meta">

                <div class="flip-card-meta-row">
                    <span class="flip-card-meta-label">
                        Status
                    </span>
                    <span class="flip-card-meta-value">
                        Aktiv
                    </span>
                </div>

                <div class="flip-card-meta-row">
                    <span class="flip-card-meta-label">
                        Erstellt
                    </span>
                    <span class="flip-card-meta-value">
                        09/2026
                    </span>
                </div>

            </div>

            <span class="flip-card-back-hint">
                Zurück
            </span>

        </div>

    </div>

</div>

Weitere Karten können später einfach durch Kopieren dieses Blocks ergänzt und mit den jeweiligen Inhalten versehen werden.

CSS

Die Darstellung und die eigentliche Flip-Animation werden vollständig mit CSS umgesetzt. Vorder- und Rückseite liegen dabei übereinander. Über die Klasse is-flipped wird das innere Element um 180° gedreht.

.flip-card {
    position: relative;
    width: 280px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    perspective: 1200px;
    cursor: pointer;
    outline: none;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.55s ease;
    transform-style: preserve-3d;
}

.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    padding: 24px;

    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.flip-card-front {
    background: #fff;
    transition: box-shadow 0.25s ease;
}

.flip-card:hover .flip-card-front {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

.flip-card-front img {
    display: block;
    width: 82%;
    height: 82%;
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
}

.flip-card-hint {
    position: absolute;
    right: 14px;
    bottom: 11px;

    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;

    color: #777;
    opacity: 0;

    transition: opacity 0.2s ease;
}

.flip-card:hover .flip-card-hint,
.flip-card:focus .flip-card-hint {
    opacity: 1;
}

.flip-card-back {
    background: #182436;
    color: #fff;
    text-align: center;
    transform: rotateY(180deg);
}

.flip-card-category {
    margin-bottom: 10px;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.12em;

    color: rgba(255, 255, 255, 0.65);
}

.flip-card-title {
    margin: 0 0 10px;
    padding: 0;

    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;

    color: #fff;
}

.flip-card-description {
    margin: 0 0 18px;
    padding: 0;

    font-size: 0.9rem;
    line-height: 1.5;

    color: rgba(255, 255, 255, 0.85);
}

.flip-card-meta {
    width: 100%;
    max-width: 210px;
    margin-top: 2px;

    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.flip-card-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
    padding: 8px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.15);

    font-size: 0.82rem;
    line-height: 1.4;
}

.flip-card-meta-label {
    color: rgba(255, 255, 255, 0.60);
}

.flip-card-meta-value {
    color: #fff;
    font-weight: 600;
    text-align: right;
}

.flip-card-back-hint {
    position: absolute;
    right: 14px;
    bottom: 11px;

    font-size: 11px;
    letter-spacing: 0.04em;

    color: rgba(255, 255, 255, 0.5);
}

.flip-card:focus-visible {
    border-radius: 14px;
    outline: 2px solid #182436;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .flip-card-inner {
        transition: none;
    }
}

Farben, Abstände, Größe und Seitenverhältnis können anschließend an das Design der eigenen Website angepasst werden.

JavaScript

JavaScript wird lediglich benötigt, um beim Anklicken der Karte die CSS-Klasse is-flipped hinzuzufügen beziehungsweise wieder zu entfernen.

document.addEventListener('DOMContentLoaded', function () {

    const cards = document.querySelectorAll('.flip-card');

    cards.forEach(function (card) {

        card.addEventListener('click', function () {
            card.classList.toggle('is-flipped');
        });

        card.addEventListener('keydown', function (event) {

            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                card.classList.toggle('is-flipped');
            }

        });

    });

});

Damit funktioniert die Interaktion nicht nur mit Maus und Touchscreen, sondern auch über Enter oder die Leertaste.

Mehrere Flip-Cards als Grid

Für meine Zertifizierungsseite benötige ich natürlich mehr als eine Karte. Die einzelnen Flip-Cards lassen sich dafür mit einem zusätzlichen Container zusammenfassen:

<div class="flip-card-grid">

    <!-- Flip-Card -->
    <div class="flip-card">
        ...
    </div>

    <!-- Flip-Card -->
    <div class="flip-card">
        ...
    </div>

</div>

Die responsive Anordnung übernimmt CSS Grid:

.flip-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 32px 0;
}

.flip-card-grid .flip-card {
    width: 100%;
}

@media (max-width: 1000px) {
    .flip-card-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .flip-card-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .flip-card-grid {
        grid-template-columns: 1fr;
    }
}

Damit werden abhängig von der verfügbaren Bildschirmbreite vier, drei, zwei oder eine Karte pro Zeile dargestellt.

Integration in WordPress

Ich verwende die Flip-Cards auf meiner Zertifizierungsseite innerhalb des Gutenberg-Editors. Dort lassen sich HTML, CSS und JavaScript getrennt voneinander in den jeweils dafür vorgesehenen Bereichen hinterlegen.

Der HTML-Bereich enthält die eigentliche Struktur und die Inhalte der Flip-Cards. Das CSS übernimmt die Gestaltung, das responsive Grid sowie die Flip-Animation, während das JavaScript die Interaktion beim Anklicken beziehungsweise über die Tastatur steuert.

CSS und JavaScript müssen dabei nur einmal eingebunden werden. Weitere Flip-Cards können anschließend einfach durch zusätzliche HTML-Blöcke ergänzt werden.

Details

Fortinet

NSE 7

Secure Networking

Status –

Erworben –

Zurück

Fazit

Mit der neuen Darstellung sind alle Zertifizierungen direkt sichtbar, während zusätzliche Informationen erst bei Bedarf eingeblendet werden. Dadurch bleibt die Seite übersichtlich, ohne auf relevante Metadaten verzichten zu müssen.

Gleichzeitig zeigt die Umsetzung, dass für kleinere interaktive Funktionen nicht immer ein zusätzliches WordPress-Plugin notwendig ist. Mit etwas HTML, CSS und JavaScript lässt sich eine schlanke Lösung umsetzen, die sich gezielt an die eigenen Anforderungen anpassen lässt.

Für meinen Anwendungsfall ersetzen die Flip-Cards damit den bisherigen Slider und reduzieren gleichzeitig die Anzahl der eingesetzten Plugins.

Der Beitrag Flip-Cards mit HTML, CSS und JavaScript erstellen erschien zuerst auf Maximilian Krieg.

In einem früheren Beitrag habe ich bereits gezeigt, wie sich Bildunterschriften in WordPress mithilfe von CSS automatisch nummerieren lassen. Dadurch werden die Beschriftungen von Abbildungen automatisch um eine fortlaufende Nummerierung wie „Abbildung 1“, „Abbildung 2“ usw. ergänzt.

Da ich inzwischen auch Tabellen einheitlich beschriften und nummerieren möchte, habe ich die damalige CSS-Lösung entsprechend erweitert. Neben Abbildungen erhalten nun auch Tabellen einen eigenen, unabhängigen Zähler und werden automatisch als „Tabelle 1“, „Tabelle 2“ usw. nummeriert.

Die ursprüngliche Umsetzung und die Hintergründe zur automatischen Nummerierung von Bildunterschriften sind im damaligen Artikel beschrieben. Im Folgenden zeige ich die aktualisierte Variante, die Abbildungen und Tabellen gleichermaßen berücksichtigt.

Der für WordPress angepasste CSS-Code, der nun sowohl Abbildungen als auch Tabellen automatisch und unabhängig voneinander nummeriert, ist daher:

/* Counter-Init */
body {
	counter-reset: figCounter tabCounter;
}

/* 2. We tell each occurrence of this element to increment the counter */
.wp-block-image figcaption {
	counter-increment: figCounter;
	    margin-bottom: 1em;
    margin-top: .5em;
    font-style: italic;
    text-align:center;
}

/* 3. We display the value of the counter before the element */
.wp-block-image figcaption:before {
	content: 'Abbildung '  counter(figCounter) ': ';
}

/* 2. We tell each occurrence of this element to increment the counter */
.wp-block-table figcaption {
	counter-increment: tabCounter;
	margin-bottom: 1em;
	margin-top: .5em;
	font-style: italic;
	text-align:center;
}

/* 3. We display the value of the counter before the element */
.wp-block-table figcaption:before {
	content: 'Tabelle '  counter(tabCounter) ': ';
}

Der Beitrag CSS-Code zur automatischen Nummerierung von Abbildungen und Tabellen erschien zuerst auf Maximilian Krieg.

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.