Mehrspalten-Layout

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

<ul class="multicol">
	<li>
		<h2>Überschrift A</h2>
		<p>Hier folgt eine Beschreibung zur Überschrift A.</p></li>
	<li>
		<h2>Überschrift B</h2>
		<p>Hier folgt eine Beschreibung zur Überschrift B.</p></li>
	<li>
		<h2>Überschrift C</h2>
		<p>Hier folgt eine Beschreibung zur Überschrift C.</p></li>
	<li class="double">
		<h2>Überschrift D</h2>
		<p>Hier folgt eine Beschreibung zur Überschrift D.<br /> </p></li>
	<li>
		<h2>Überschrift E</h2>
		<p>Hier folgt eine Beschreibung zur Überschrift E.</p></li>
	<li>
		<h2>Überschrift F</h2>
		<p>Hier folgt eine Beschreibung zur Überschrift F.</p></li>
	<li class="double">
		<h2>Überschrift G</h2>
		<p>Hier folgt eine Beschreibung zur Überschrift G.</p></li>
	<li class="triple">
		<h2>Überschrift H</h2>
		<p>Hier folgt eine Beschreibung zur Überschrift H.</p></li>
</ul>