Boxen
Definitionsbox
Um Definitionen von Objekten u.a. zu erstellen, kannst du die Definitionsbox verwenden. Du erhälst sie mit folgendem Code:
<div class="def">
...
</div>
Diese Definitionsboxen kommen vor allem auf den Fachkonzept-Seiten zum Einsatz.
Weitere Boxen
div.achtung
div.frage
div.information
div.aufgabenstellung
Box für Zitate
Mithilfe des folgenden Codes lassen sich Zitat-Boxen einbinden:
<div class="zitat">
Mehr als die Vergangenheit interessiert mich die Zukunft, denn in ihr gedenke ich zu leben.
<div class="autor">
Albert Einstein <span class="quelleneintrag" lizenzcode="zitat" title="Poeteus Zitate Albert Einsteins" autor="Albert Einstein" original="http://www.poeteus.de/zitat/Mehr-als-die-Vergangenheit-interessiert-mich-die-Zukunft-denn-in-ihr-gedenke-ich-zu-leben/8" letzterzugriff="24.11.2023"></span>
</div>
</div>
Boxen aufklappen
Alle Klasen für Boxen können aufklappbar gemacht werden. Dazu nutzen wir die HTML-Tags <details></details>
und <summary></summary>
.
<details class="information">
<summary>Aufklappbutton</summary>
<p>Inhalt der eigentlichen Box.</p>
</details>
Es entsteht die folgende Ansicht:
Aufklappbutton
Inhalt der eigentlichen Box.
Werden mehrere Boxen hintereinander im Quelltext entdeckt, die zudem die gleiche CSS-Klasse haben, dann entfällt bei den weiteren Boxen die Markierung (hier der gelbe Kreis mit dem i). Außerdem wird der Abstand zwischen den Boxen entfernt.
<details class="frage">
<summary>Aufklappbutton 1</summary>
<p>Inhalt der eigentlichen Box.</p>
</details>
<details class="frage">
<summary>Aufklappbutton 2</summary>
<p>Inhalt der eigentlichen Box.</p>
</details>
<details class="frage">
<summary>Aufklappbutton 3</summary>
<p>Inhalt der eigentlichen Box.</p>
</details>
Es entsteht die folgende Ansicht:
Aufklappbutton 1
Inhalt der eigentlichen Box.
Aufklappbutton 2
Inhalt der eigentlichen Box.
Aufklappbutton 3
Inhalt der eigentlichen Box.
Boxen lassen sich außerdem auch schachteln:
<details class="def">
<summary>Aufklappbutton 1</summary>
<p>Inhalt der eigentlichen Box.</p>
<details class="def">
<summary>Aufklappbutton 2</summary>
<p>Inhalt der eigentlichen Box.</p>
<details class="def">
<summary>Aufklappbutton 3</summary>
<p>Inhalt der eigentlichen Box.</p>
</details>
</details>
</details>
Aufklappbutton 1
Inhalt der eigentlichen Box.
Aufklappbutton 2
Inhalt der eigentlichen Box.
Aufklappbutton 3
Inhalt der eigentlichen Box.
Damit lassen sich zum Beispiel mehrere Tipps in Stufen realisieren.
In beiden Fällen (untereinander und geschachtelt) werden nur gleiche Boxen zusammengefasst:
Aufklappbutton 1
Inhalt der eigentlichen Box.
Aufklappbutton 2
Inhalt der eigentlichen Box.
Aufklappbutton 3
Inhalt der eigentlichen Box.
sowie
Aufklappbutton 1
Inhalt der eigentlichen Box.
Aufklappbutton 2
Inhalt der eigentlichen Box.
Aufklappbutton 3
Inhalt der eigentlichen Box.
Quellen
- [1]: Poeteus Zitate Albert Einsteins(letzter Zugriff: 24.11.2023) - Urheber: Albert Einstein