inf-schule | Textbereich

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>

Mehr als die Vergangenheit interessiert mich die Zukunft, denn in ihr gedenke ich zu leben.

Albert Einstein [1]

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

Boxen

Definitionsbox

Weitere Boxen

Box für Zitate

Boxen aufklappen

Quellen

Suche

Rückmeldung geben