Responsive Webseiten-Vorlage

Spaltensatz wie in Magazinen und Zeitungen erleichtert das Lesen und schont die Augen, weil die Zeilenlänge auf die Hälfte verkürzt wird. Das gilt erst recht für die Lektüre am Bildschirm. Spaltensatz im CSS3-Mehrspalten-Layout ist für Absätze mit Fließtext und für Zwischenüberschriften gut geeignet. Mit einigen (browserspezifischen) Einschränkungen hinsichtlich der Darstellung können aber auch andere HTML-Elemente wie Bilder, Listen, kleine Tabellen und Zitatblöcke im Spaltensatz angeordnet werden.

Ein Spaltenumbruch erfolgt für Fließtext-Absätze (Elemente p), Listen (Elemente ul) und vorformatierte Textblöcke (Elemente pre), nicht jedoch für Tabellen und Bilder. Es wird also vermieden, daß eine Hälfte Ihres Bildes in der linken Spalte unten, und die andere Bildhälfte in der rechten Spalte oben angezeigt wird ;-)

Spaltensatz: so funktioniert's ...

Weisen Sie dem gewünschten div-Abschnitt die CSS-Klasse spalten zu. Hier nehmen Sie dann die von Ihnen gewünschten Elemente auf:

HTML-Quelltext:

<div class="spalten">
  <p>...</p>
  <h3>...</h3>
  <ul>...</ul>
  <table>...</table>
  <blockquote>...</blockquote>
</div>
  

CSS-Quelltext:

#article div.spalten {...}
  

Die spaltenweise Anzeige funktioniert nur bei erreichter Mindestbreite (hier von mir festgelegt: column-width: 18.6em;) im Browser-Fenster. Wenn Sie eine andere Schrift oder andere Schriftgröße verwenden, muß die Mindestbreite ggf. angepaßt werden.

Auf schmalen Endgeräten wie zB Smartphones werden alle enthaltenen Elemente in einer Spalte untereinander angezeigt.

Hinweise zum Spaltensatz

• Vermeiden Sie, daß Ihr Besucher ewig scrollen muß, um von der linken Spalte unten zur rechten Spalte oben zu gelangen. Der Spaltensatz eignet sich deswegen eher für kürzere Artikel.
• Abhilfe: Natürlich können Sie auf einer Seite zwei oder mehr Spaltensatz-Artikel untereinander platzieren (wie zB weiter unten den Abschnitt Weitere Elemente).
• Schönheitsfehler: Die Zeilengrundlinie zweier Spalten befindet sich nicht immer auf gleicher Höhe (oder typografisch formuliert: der Text ist nicht registerhaltig), vor allem, wenn Bilder eingefügt werden. Am Bildschirm stört das aber weniger als auf Papier.
• Großformatige Bilder in hoher Auflösung sind für den Spaltensatz nicht geeignet.

Auch Elemente wie Tabellen und kleine Bilder können im Spaltensatz verwendet werden. Die Anzeige-Fehler (Umbruch der Tabelle, fehlerhaft positionierter Tabellenkopf bei sticky) in Chromium-basierten Browsern zumindest bis Version 104 sollte man im Hinterkopf behalten. Der Firefox macht's besser.

(Beispiel-Tabelle:) Web-Techniken

Es gibt weitere Web-Techniken, die Tabelle erhebt keinen Anspruch auf Vollständigkeit.

Technik	Zweck
HTML	Auszeichnungssprache für Webseiten-Inhalte
CSS	Auszeichnungssprache für Webseiten-Darstellung
Javascript	client-seitige Scriptsprache
PHP	server-seitige Scriptsprache

(Beispieltext / -bild:) Pula, Kroatien

Pula, von den Illyrern als Stadt gegründet, wurde im Jahr 42 v.u.Z. römische Kolonie. In Pula wimmelt es von Bauten aus der römischen Zeit: Amphitheater, Herkulestor, Triumphbogen der Sergier, Zwillingstor, Augustus-Tempel ... Das abgebildete Restaurant in der Altstadt stammt aber nicht aus der Römerzeit.

(Beispiel-Zitatblock:) alte Weisheit

Einfachheit ist die höchste Form der Perfektion

- Leonardo da Vinci -