Hausboot Törns Mecklenburg und Berlin
Hausboot Törns Berlin 2005 und Mecklenburger Seenplatte 2008
Dieses Template ist speziell für die Anzeige von grossen Foto- und Bildergalerien und Tabellen entwickelt worden. Sie sehen eine Fotogalerie, erstellt mit dem CMSimple Plugin FotoPro. Klicken Sie auf eines der Vorschaubilder. Auf Android Geräten, iPad und iPhone können Sie die Bilder auch durch "wischen" nach links oder rechts wechseln. Auch mit der Maus (linke Maustaste) und den Pfeiltasten kann die ShutterMobile Lightbox bedient werden.
Hausboot Törns Berlin 2005 und Mecklenburger Seenplatte 2008
Bei so einem Template mit einem derart flexiblen Inhaltsbereich bietet sich ein mehrspaltiges Layout des Inhaltes an. Ein mehrspaltiges Layout mit Absätzen in einem mehrspaltigen Bereich ist heutzutage ganz einfach mit CSS umsetzbar. Allerdings muss man dazu schon in der Lage sein, Quelltext zu lesen, zu verstehen und ein wenig im Quelltext zu arbeiten. Für einen dreispaltigen Bereich mit Absätzen sieht der Code so aus:
<div style="columns: 3; column-width: 360px; column-gap: 2em;">
<p>1. Absatz</p>
<p>2. Absatz</p>
...
</div>
Der Vorteil: Alles ist flexibel und responsiv, die Anzahl der Spalten, die Breite der Spalten und der Abstand zwischen den Spalten, alles regelt sich automatisch.
Der Nachteil: Man gibt die Kontrolle ab. Es geschehen seltsame Dinge: Eine lange Überschrift wird zweizeilig, wenn die Spalte schmaler wird. Da kann es dann durchaus mal vorkommen, dass die erste Zeile noch am Ende der 1. Spalte steht, und die zweite Zeile am Anfang der 2. Spalte. Oder die Überschrift steht am Ende der einen Spalte, der dazugehörige Text in der nächsten Spalte. Auch Absätze werden bei der Aufteilung auf die Spalten ignoriert. Da kommt es schonmal vor, dass eine Spalte mit dem letzten Wort eines Absatzes der vorigen Spalte beginnt.
Ich behalte lieber die Kontrolle, und deshalb gibt es in diesem Template 2 CSS Klassen, mit denen man responsive Zweispaltigkeit umsetzen kann: eine für die linke Spalte und eine für die rechte. Sie heissen div.tplge_2colsL für die linke Spalte und div.tplge_2colsR für die rechte.
Bei dieser Methode fliessen die Inhalte nicht von einer Spalte in die andere, sie bleiben wo sie sind. Das hat aber wieder andere Nachteile.
<div class="tplge_2colsL">
<p>1. Absatz linke Spalte</p>
<p>2. Absatz linke Spalte</p>
...
</div>
<div class="tplge_2colsR">
<p>1. Absatz rechte Spalte</p>
<p>2. Absatz rechte Spalte</p>
...
</div>
Innerhalb der Spalten kann man ganz normal mit dem Editor arbeiten, Absätze erzeugen, Bilder einfügen und formatieren usw.
Man sollte aber daran denken, dass Bilder ihre Höhe anders ändern als fliessender Text, so dass eine Spalte mit Bild grösser oder kleiner werden kann als eine Textspalte, wenn sich die horizontale Auflösung des Viewports ändert. Befindet sich in einer Spalte nur Text, und in der anderen mehrere Bilder, dann können die Unterschiede durchaus beträchtlich sein.
Auch hier ist man also vor Überraschungen nicht sicher. Man kommt als Autor nicht umhin, das Ergebnis seiner Arbeit unter verschiedenen Bildschirmauflösungen bzw. Fenstergrössen zu testen.
Zur Demo ein Bild in einer Spalte. Unter Full HD Auflösung, also 1920px horizontal, sollten beide Spalten ungefähr gleich hoch sein, die rechte mit dem Bild vielleicht etwas höher. Ziehen Sie nun das Fenster langsam schmaler, und beobachten Sie die Höhe der Spalten.
Einen Absatz kann man mit der CSS Klasse p.tplge_3cols per Editor dreispaltig machen. Man schreibt einfach einen Absatz hintereinander weg, bis er wenigstens 3-zeilig ist, sonst lohnt sich das nicht oder es sieht seltsam aus. Dann klickt man in diesen Absatz und geht in der Editor Toolbar auf den Button Formate => Blockformate und aktiviert die Klasse p.tplge_3cols. Ab ca. 1600px horizontale Auflösung wird der Absatz dreispaltig angezeigt. Wird das Fenster kleiner, wird der Absatz erst zweispaltig, dann einspaltig.
