Auf dieser Seite erfahren Sie mehr über Aufbau, Funktionsweise und Verwendung des Mehrspalten-Layouts. Zunächst folgt ein anschauliches Beispiel, weiter unten finden Sie die dazugehörige Erläuterung.

Beispiel eines Mehrspalten-Layouts

  • Überschrift A

    Hier folgt eine Beschreibung zur Überschrift A.

  • Überschrift B

    Hier folgt eine Beschreibung zur Überschrift B.

  • Überschrift C

    Hier folgt eine Beschreibung zur Überschrift C.

  • Überschrift D

    Hier folgt eine Beschreibung zur Überschrift D.
     

  • Überschrift E

    Hier folgt eine Beschreibung zur Überschrift E.

  • Überschrift F

    Hier folgt eine Beschreibung zur Überschrift F.

  • Überschrift G

    Hier folgt eine Beschreibung zur Überschrift G.

  • Überschrift H

    Hier folgt eine Beschreibung zur Überschrift H.

Aufbau

Das Mehrspalten-Layout basiert auf einer ungeordneten Liste (ul = unordered list), deren Kindelemente Listenpunkte (li) sind. Jeder Listenpunkt bildet eine Spalte und beherbergt Überschrift, Bild und Beschreibung (h2, img, p). Wird eine Überschrift verlinkt, so muss der Link (a) in die Überschrift eingebettet sein.

Funktionsweise

Ein Listenpunkt ohne Angabe einer zusätzlichen Klasse erzeugt eine Spalte mit einer Breite von 168 Pixel. Wird die Klasse double vergeben, nimmt der Listenpunkt den Raum von zwei Spalten ein. Analog verhält es sich mit den Klassen triple und quadruple, wobei letztere nur für die Startseite relevant ist.

Verwendung

Das Mehrspalten-Layout wird auf vielen Musterseiten angewendet. Unter Menüpunkten wie Angebote oder Unser Ortsverein erscheint es als striktes 3-Spalten-Layout und dient als anschauliche Übersicht für Untermenüpunkte. Auf der Startseite wird es als gemischtes 4-Spalten-Layout angewandt und beherbergt sogar die Überschrift erster Ordnung (h1). Diese erhält automatisch einen roten Hintergrund und hebt sich damit von allen anderen Überschriften zweiter Ordnung ab.

Wichtig: Auf jeder Seite darf nur eine einzige Überschrift erster Ordnung existieren. Diese sollte also nur im Mehrspalten-Layout verwendet werden, wenn das System - wie auf der Startseite - keine eigene Überschrift erzeugt.

Quelltext

Veraltete Selektoren sind Klassen, IDs oder sonstige Selektoren, die nicht mehr aktiv eingesetzt werden und meistens durch neue Selektoren ersetzt wurden. Es wird angeraten, die eigenen Beiträge so schnell wie möglich auf diese neuen Strukturen umzustellen. Die alte Selektoren funktionieren nur noch bei eingeschaltetem Legacy-Modus (siehe Template-Einstellungen).

Übersicht

Veralteter SelektorNeuer Selektor
.cbUserListTable -
table#tabelle-mehrspaltig
table#tabelle-mehrspaltig-2
table#tabelle-mehrspaltig-3
ul.multicol
ul.drei-spalten ul.multicol

Auf dieser Seite erfahren Sie mehr über den Umgang mit Überschriften. In HTML gibt es sechs hierarchisch absteigende Überschriftordnungen (h1, h2, h3, h4, h5 und h6)

Beispielhafte Übersicht

Überschrift 1. Ordnung

Überschrift 2. Ordnung

Überschrift 3. Ordnung

Überschrift 4. Ordnung

Überschrift 5. Ordnung

 

Quelltext

Keine Termine gefunden

Kontakt

Deutsches Rotes Kreuz
Bereitschaft Heidelberg-Nord

Obere Kirchgasse 5
69121 Heidelberg

Tel.: +49 (0) 6221 436806
( di. ab 20:00 Uhr )

Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!

DRK Blutspendetermine

Abbild: Logo des DRK Blutspendedienstes

Suchen Sie den aktuellen Blutspendetermin in:

Folgen Sie uns auf

Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden.
Ok Ablehnen