html Archive - Maximilian Krieg https://maximiliankrieg.de/tag/html/ Wissen, Technik & Erfahrungen Sat, 30 May 2026 20:14:41 +0000 de hourly 1 https://wordpress.org/?v=7.0 https://maximiliankrieg.de/wp-content/uploads/2026/05/cropped-20260524_logo_2_512-2-32x32.png html Archive - Maximilian Krieg https://maximiliankrieg.de/tag/html/ 32 32 Quellenangaben für das blockquote-Element https://maximiliankrieg.de/2026/04/quellenangaben-fuer-das-blockquote-element-2/ https://maximiliankrieg.de/2026/04/quellenangaben-fuer-das-blockquote-element-2/#respond Thu, 02 Apr 2026 18:14:05 +0000 https://maximiliankrieg.de/?p=1941 Vor einigen Jahren hatte ich den Artikel Quellenangaben für das blockquote-Element für mein Joomla-basiertes Blog geschrieben. Dabei hatte ich Zitat und Quelle direkt im HTML-Editor…

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

]]> Vor einigen Jahren hatte ich den Artikel Quellenangaben für das blockquote-Element für mein Joomla-basiertes Blog geschrieben. Dabei hatte ich Zitat und Quelle direkt im HTML-Editor in den jeweiligen Abschnitten definiert und bewusst auf den visuellen Editor verzichtet, da dieser damals stark proprietären und insbesondere DIV-lastigen HTML-Code erzeugte.

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.

]]> https://maximiliankrieg.de/2026/04/quellenangaben-fuer-das-blockquote-element-2/feed/ 0 Simple Stoppuhr mit JavaScript und HTML (V2) https://maximiliankrieg.de/2017/03/simple-stoppuhr-mit-javascript-und-html-v2/ https://maximiliankrieg.de/2017/03/simple-stoppuhr-mit-javascript-und-html-v2/#respond Sun, 19 Mar 2017 22:08:00 +0000 https://maximiliankrieg.de/?p=2419 Auf die Rückfrage hin, ob ich die zuvor beschriebene Variante meiner simplen Stoppuhr noch weiter vereinfachen könnte, habe ich mich nochmal an den Code gesetzt und ihn…

Der Beitrag Simple Stoppuhr mit JavaScript und HTML (V2) erschien zuerst auf Maximilian Krieg.

]]> Auf die Rückfrage hin, ob ich die zuvor beschriebene Variante meiner simplen Stoppuhr noch weiter vereinfachen könnte, habe ich mich nochmal an den Code gesetzt und ihn etwas modifiziert. Eine allgemeine und sinnvolle Änderung ist die Positionierung der Aktionsfelder über der eigentlichen Ausgabe. Anstatt die Knöpfe zu deaktivieren, werden sie nun ausgeblendet, wodurch der Mauszeiger auf seiner aktuellen Position verweilen kann. Weiterhin wird in der neuen Variante, wie angefragt, auf eine Restart-Funktion verzichtet. Der Code hierzu findet sich im Artikel.

Ansicht der Stoppuhr

Wie in der folgenden Abbildung zu sehen ist, habe ich auf die Ausgabe der exakten Uhrzeit verzichtet, da diese primär zur Überprüfung in der vorherigen Variante genutzt wurde.

Darstellung der Zustände Start- und Stopp in der Stoppuhr

In Version 2 wird lediglich die summierte Zeit angezeigt und je nach aktuellem Zustand der zur Verfügung stehende Button.

Programmcode

<!DOCTYPE html>
<html>
<title>Stoppuhr</title>
<style>
    .myWatch {
        border: 1px solid black;
        margin: 1rem;
        padding: 1rem;
        background-color: grey;
        width: 25rem
    }
</style>

<body>
    <script>
        var runTime = 0;
        var startTime = 0;

        function addItem(varText) {
            var entry = document.createElement('li');
            entry.appendChild(document.createTextNode(varText));
            document.getElementById('myLog').appendChild(entry);
        }

        function init() {
            document.getElementById("btn_pause").style.display = "none";
        }

        function startWatch() {
            startTime = new Date();
            document.getElementById("btn_pause").style.display = 'block';
            document.getElementById("btn_start").style.display = 'none';
        }

        function pause() {
            runTime = runTime + new Date().getTime() - startTime.getTime();
            addItem("Laufzeit: " + runTime / 1000 + "s");
            document.getElementById("btn_start").style.display = 'block';
            document.getElementById("btn_pause").style.display = 'none';
        }
    </script>
    <div class="myWatch">
        <h1>Stoppuhr</h1>
        <input name="btn_start" id="btn_start" onclick="startWatch();" type="button" value="Start" />
        <input name="btn_pause" id="btn_pause" onclick="pause();" type="button" value="Pause" />
        <ol id="myLog"></ol>
    </div>
    <script>
        init();
    </script>
</body>

</html>

Der Beitrag Simple Stoppuhr mit JavaScript und HTML (V2) erschien zuerst auf Maximilian Krieg.

]]> https://maximiliankrieg.de/2017/03/simple-stoppuhr-mit-javascript-und-html-v2/feed/ 0 CSS-Anpassungen und HTML-Vorlagen https://maximiliankrieg.de/2016/06/css-anpassungen-und-html-vorlagen/ https://maximiliankrieg.de/2016/06/css-anpassungen-und-html-vorlagen/#respond Sat, 18 Jun 2016 21:19:00 +0000 https://maximiliankrieg.de/?p=2433 Ich habe die letzten Wochen viel ausprobiert und schlussendlich einige Veränderungen an dem Layout meiner Seite und dem Layout der Artikelinhalte vorgenommen. Als eine Art Snapshot möchte…

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

]]> Ich habe die letzten Wochen viel ausprobiert und schlussendlich einige Veränderungen an dem Layout meiner Seite und dem Layout der Artikelinhalte vorgenommen. Als eine Art Snapshot möchte ich daher alle Anpassungen in diesem Beitrag zusammenfassen. Damit ich die Grundstruktur meiner Artikel nicht immer von Vorne schreiben muss, kopiere ich oftmals Code-Segmente aus älteren Beiträgen. Dieser Beitrag dient daher für mich selbst und meine künftige Beiträge als Referenz.

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>
QuelltextErgebnis
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

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>
Grauer Kasten
Grauer Kasten

Ü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.

]]> https://maximiliankrieg.de/2016/06/css-anpassungen-und-html-vorlagen/feed/ 0 Simple Stoppuhr mit JavaScript und HTML https://maximiliankrieg.de/2016/01/simple-stoppuhr-mit-javascript-und-html/ https://maximiliankrieg.de/2016/01/simple-stoppuhr-mit-javascript-und-html/#respond Wed, 13 Jan 2016 22:15:00 +0000 https://maximiliankrieg.de/?p=2427 Vor einigen Tagen habe ich ein kleines JavaScript für ein Formular geschrieben, das zur Erfassung von Tätigkeitsdauern genutzt wird. Das Design und die Funktionsweise ist…

Der Beitrag Simple Stoppuhr mit JavaScript und HTML erschien zuerst auf Maximilian Krieg.

]]> Vor einigen Tagen habe ich ein kleines JavaScript für ein Formular geschrieben, das zur Erfassung von Tätigkeitsdauern genutzt wird. Das Design und die Funktionsweise ist sehr rudimentär gehalten, da keine genauen Anforderungen diesbezüglich spezifiziert wurden.

Die folgende Abbildung zeigt die exemplarische Anwendung von Start, Pause, Start, Pause und Ende. Danach beschreibe ich die grundlegenden Ideen hinter meiner Implementierung und den vollständigen Code.

Exemplarische Ausführung der Stoppuhr von Start bis Ende

Im folgenden Listing ist der vereinfachte HTML-Code und das entsprechende JavaScript aufgeführt. Mit einer Start-Pause-Funktion ist es möglich Unterbrechungen abzubilden. Die Steuerelemente werden dynamisch aktiviert und deaktiviert. Dies geschieht in Abhängigkeit der jeweiligen Zustände. Da das vordefinierte Formular ein paar technische Herausforderungen beinhaltet, habe ich mich gegen eine visuelle Repräsentation mit automatischer Aktualisierung entschieden. Stattdessen werden Zeitstempel gespeichert und angezeigt, um zeitliche Differenzen abzubilden.

<!DOCTYPE html>
<html>
   <title>Stoppuhr</title>
   <body>
      <script>
         function addItem(varText) {
            var entry = document.createElement('li');
            entry.appendChild(document.createTextNode(varText));
            document.getElementById('myLog').appendChild(entry);
         }

         function disableButtons(bStart, bPause, bEnd, bRestart) {
            document.getElementById("btn_start").disabled = bStart;
            document.getElementById("btn_pause").disabled = bPause;
            document.getElementById("btn_end").disabled = bEnd;
            document.getElementById("btn_restart").disabled = bRestart;
         }

         function restart() {
            runTime = 0;
            start();
         }

         function start() {
            startTime = new Date();
            addItem("Start:" + new Date());
            disableButtons(true, false, false, true);
			runState = 0;
         }

         function pause() {
			
            runTime = runTime + new Date().getTime() - startTime.getTime();
            addItem("Pause: " + new Date());
            addItem("Laufzeit: " + runTime / 1000 + "s");
            disableButtons(false, true, false, true);
			runState = 1;
         }

         function end() {
		    if (runState==0){
               runTime = runTime + new Date().getTime() - startTime.getTime()};
			
			if (runState==1){
			   //
			}
			   
            addItem("Ende: " + new Date());
            addItem("Laufzeit: " + runTime / 1000 + "s bzw. " + runTime / 60000 + "m");
            addItem("Aufgerundet: " + Math.ceil(runTime / 60000) + "m");
            disableButtons(true, true, true, false);
			runState=2;
         }
      </script>
      <h1>Laufzeit</h1>
      <ol id="myLog"></ol>
      <input name="btn_start" id="btn_start" onclick="start();" type="button" value="Start" />
      <input name="btn_pause" id="btn_pause" onclick="pause();" type="button" value="Pause" />
      <input name="btn_end" id="btn_end" onclick="end();" type="button" value="Ende" />
      <input name="btn_restart" id="btn_restart" onclick="restart();" type="button" value="Restart" />
      <script>
         var runTime;
         var startTime;
         var runState;
         restart();
      </script>
   </body>
</html>

Die folgende Abbildung zeigt die definierten Zustände meiner Stoppuhr. An dieser Stelle ist zu sagen, dass die Implementierung der Funktionen sicherlich besser machbar ist, aber für die definierten Anforderungen ausreichend ist.

Zustandswechsel beschrieben anhand der JavaScript-Funktionen

Der Beitrag Simple Stoppuhr mit JavaScript und HTML erschien zuerst auf Maximilian Krieg.

]]> https://maximiliankrieg.de/2016/01/simple-stoppuhr-mit-javascript-und-html/feed/ 0 Quellenangaben für das blockquote-Element https://maximiliankrieg.de/2015/04/quellenangaben-fuer-das-blockquote-element/ https://maximiliankrieg.de/2015/04/quellenangaben-fuer-das-blockquote-element/#respond Fri, 03 Apr 2015 17:55:00 +0000 https://maximiliankrieg.de/?p=1928 Mit Hilfe des blockquote-Elements können Zitate von externen Quellen optisch hervorgehoben werden. Möchte man jedoch eine Quelle zu einem Zitat hinzufügen, beginnen sich die Geister zu…

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

]]> Mit Hilfe des blockquote-Elements können Zitate von externen Quellen optisch hervorgehoben werden. Möchte man jedoch eine Quelle zu einem Zitat hinzufügen, beginnen sich die Geister zu scheiden. Nach ausgiebiger Recherche habe ich mich für einen Weg entschieden, der nicht der ursprünglichen Empfehlungen des W3C entspricht. Ich orientiere mich an dem Verfahren des Bootstrap-Frameworks, das hierfür ein footer-Element verwendet. Diese Methode In diesem Artikel möchte ich aufzeigen, wie man Blockzitate mit einer Quellenangabe versehen kann.

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.

http://www.loremipsum.de

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.

]]> https://maximiliankrieg.de/2015/04/quellenangaben-fuer-das-blockquote-element/feed/ 0 Automatische Nummerierung mit CSS https://maximiliankrieg.de/2014/07/automatische-nummerierung-mit-css/ https://maximiliankrieg.de/2014/07/automatische-nummerierung-mit-css/#respond Tue, 08 Jul 2014 19:45:00 +0000 https://maximiliankrieg.de/?p=1207 In diesem Beitrag möchte ich aufzeigen, wie ich die automatische Nummerierung von Abschnitten mittels Cascading Style Sheets umsetze. Ich formatiere und strukturiere meine Beiträge mit…

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

]]> In diesem Beitrag möchte ich aufzeigen, wie ich die automatische Nummerierung von Abschnitten mittels Cascading Style Sheets umsetze. Ich formatiere und strukturiere meine Beiträge mit Überschriften der Ebene 3, Ebene 4 und Paragraphen. Die Nummerierung soll aber lediglich innerhalb bestimmter Abschnitte aktiviert sein, weswegen ich ein <div> als Container definiere.

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.

]]> https://maximiliankrieg.de/2014/07/automatische-nummerierung-mit-css/feed/ 0