WaBis

walter.bislins.ch

Seite in Spalten aufteilen

Im Standard-Style-Sheet des Wikis sind Klassen definiert, mit Hilfe derer sich der Seiteninhalt in gleichmässige Spalten einteilen lässt. Die Spalten ordnen sich dabei je nach zur Verfügung stehendem Platz automatisch neu an. Durch Auswahl bestimmter Klassen kann die Art der Annordnung gesteuert werden. Die Handhabung dieser Klassen wurde in einem einzigen Makro col zusammengefasst.

Das Makro col erzeugt ein Spaltenlayout:

{{col|Width|Fullscreen|Variant|Command|id=ID|ColAttr|row=RowAttr}}

Die folgenden Parameter des Makros col dürfen in beliebiger Reihenfolge stehen:

Width (optional ausser bei der ersten Spalte)
Breite der Spalte in %. Je nach Variant sind nur einige wenige Werte erlaubt. Siehe Dynamisches Anordnen der Spalten für weitere Informationen. Width muss nur für die erste Spalte angegeben werden, alle weiteren Spalten übernehmen diese Breite.
Fullscreen (optional)
Wenn die Wiki-Seite ohne Sidebar ist, so muss Fullscreen angegeben werden, damit die Abstände zwischen den Spalten korrekt gezeichnet werden.
Variant (optional, default = float)
Mit Variant wird gesteuert, wie sich die Spalten bei Platzmangel neu anordnen. Variant kann die Werte float, full und fix annehmen. Siehe Dynamisches Anordnen der Spalten für weitere Informationen.
Command (optional)
kann die beiden Werte end, stack oder new annehmen. Mit end wird eine Reihe von Spalten abgeschlossen. Mit new wird ebenfalls eine Reihe abgeschlossen aber gleichzeitig eine neue Reihe eröffnet. Mit stack werden die Spalten ohne Abstand übereinandergesetzt; nützlich, wenn in den Spalten nur Listen enthalten sind.
ID (optional)
Html-ID für die folgende Spalte. ID's sind nützlich, wenn per Style-Sheet oder JavaScript eine Spalte referenziert werden soll. Das die Spalten umschliessende Zeilen-Element bekommt automatisch die ID PageCol-<n>, wobei <n> eine fortlaufende Nummer beginnend bei 1 ist. Siehe Html-Attribute für weitere Informationen.
ColAttr (optional)
Klassen oder Styles für diese und alle folgenden Spalten. Klassennamen muss ein $ vorangestellt werden. Mehrere Styles werden durch ; voneinander getrennt. Dieser Parameter darf wiederholt werden, wenn mehrere Klassen und/oder Styles definiert werden sollen. Beachte, dass jede Spalte zusätzlich die Klassen PageCol-Column und Cell-<n> erhält, wobei <n> eine fortlaufende Nummer beginnend bei 1 ist. Diese Nummer beginnt nach jeder neuen Zeile wieder bei 1. Siehe Html-Attribute für weitere Informationen.
RowAttr (optional)
Klassen oder Styles für den Container aller Spalten vom ersten {{col}} bis zum {{col|end}} oder {{col|new}}. Klassennamen muss ein $ vorangestellt werden. Mehrere Styles werden durch ; voneinander getrennt. Dieser Parameter darf wiederholt werden, wenn mehrere Klassen und/oder Styles definiert werden sollen. Beachte, dass jede Zeile zusätzlich die Klasse PageCol-Row erhält. Siehe Html-Attribute für weitere Informationen.

Hinweis: Wenn Command = stack definiert ist, erhält der Container zusätzlich die Klasse Stack.

Anwendung

Das Makro col wird verwendet, um eine Reihe von Spalten zu beginnen, um Spalten voneinander zu trennen und um die Reihe von Spalten abzuschliessen. Das folgende Beispiel zeigt ein 2-spaltiges Layout mit genau zwei Spalten:

{{col|50}}
  Spalte 1
{{col}}
  Spalte 2
{{col|end}}

Es können beliebig viele Spalten der gleichen Breite erzeugt werden. Bei einer Reihe mit {{col|50}} werden maximal zwei Spalten pro Reihe gesetzt, weitere Spalten werden darunter platziert. Wenn der Platz zu eng wird, werden alle Spalten untereinander angeordnet.

Wenn die Spalten nicht exakt dieselbe Höhe haben und mehr Spalten definiert werden als das Layout maximal zur Verfügung stellt (z.B. maximal 4 Spalten bei {{col|25}}), so kann es zu unschönen Anordnungen kommen, wenn Spalten neu angeordnet werden. Dies kann verhindert werden, indem immer nur soviele Spalten zu einer Reihe gegeben werden, wie diese maximal fassen kann.

Beispiel:

Es sollen 4 Bilder in einem 2-spaltigen Layout ausgegeben werden. Die Bilder haben verschiedene Höhen. Damit das Layout aufgrund der verschiedenen Höhen nicht durcheinander gerät, wird immer nach 2 Spalten eine neue Reihe definiert:

{{col|50}}
  Bild 1
{{col}}
  Bild 2
{{col|new}}
  Bild 3
{{col}}
  Bild 4
{{col|end}}

Durch {{col|new}} wird an dieser Stelle eine neue Reihe von Spalten begonnen, anstatt die folgenden Spalten in die erste Reihe aufzunehmen.

Dynamisches Anordnen der Spalten

Mit dem Makro col erstellte Spalten werden dynamisch neu angeordnet, wenn der Platz zu eng wird. Es gibt verschiedene Varianten, wie die Spalten neu angeordnet werden können:

  • float (Standard): Die Anzahl Spalten wird mit abnehmendem Platz schrittweise verringert, von 5 auf 4 Spalten, dann auf 3, 2 und schliesslich auf eine Spalte. Die Spalten, die dabei nicht mehr in der ersten Zeile Platz haben, werden auf die nächste Zeile verschoben. Es können damit Zeilen entstehen, die nicht mit Spalten aufgefüllt sind.
  • full: Bei der Variante full wird die Spaltenzahl immer so verkleinert, dass jede Zeile voll ist mit Spalten: Aus 4 Spalten werden 2 und dann eine Spalte. Aus 3 oder 2 Spalten wird eine Spalte.
  • fix: Bei der Variante fix bleibt die Anzahl der Spalten konstant. Die Spalten werden einfach nur gestaucht, wenn das Fenster verschmälert wird.

Welche Variante angewandt werden soll, gibt man mit dem Parameter variant an. Je nach Variante können für den Parameter Width nur bestimmte Werte verwendet werden:

Es wird eine Fehlermeldung auf der Seite ausgegeben, wenn eine falsche Width für eine gewählte Variant gewählt wird.

Variant Gültige Werte für Width
float 50, 33, 25, 20
full 33, 25
fix 80, 75, 66, 60, 50, 40, 33, 25, 20

Minimale garantierte Spaltenbreiten

Das Wiki-Layout ist so programmiert, dass sich das Spalten-Layout dynamisch dem zur Verfügung stehenden Platz anpasst. Man spricht von Responsive Webdesign. In den Varianten float und full garantieren die Spalten eine Mindestbreite. Wird diese aufgrund eines zu kleinen Browser-Fensters unterschritten, werden die Spalten neu angeordnet, sodass wieder mehr Platz für deren Inhalt bereit steht. Dies wird solange wiederholt, bis nur noch eine einzige Spalte auf der Seite steht. Die Mindestbreite entspricht dann der Seitenbreite.

Die Tabelle zeigt die garantierten Mindestbreiten der Spalten für die Varianten float und full.

Width Mit Sidebar Fullscreen
50 300px 300px
33 190px 265px
25 138px 190px
20 ? ?

Bei der Variante fix bleibt die Spaltenzahl pro Reihe konstant. Die Spaltenbreite ist daher nur von der Fensterbreite abhängig. Es wird keine Mindestbreite garantiert.

Tipp

Gib bei Bildern in Spalten die Breite in Prozent an oder verwende das Flag fluid. Damit passt sich die Bildgrösse dynamisch der Spaltenbreite an.

Die folgende Tabelle gibt die Bereiche für die Spaltenbreiten in Abhängigkeit der Grösse des Browserfensters an, wobei die Spalten auch neu angeordnet werden, wenn der Platz nebeneinander nicht ausreicht:

col50 (Min=300px) pageCol50 (Min=300px)
+Sidebar 400-321
-Sidebar 428-307 2-spalt 597-308
1-spalt 612-... 1-spalt 613-...
col33 (Min=190px) pageCol33 (Min=265px)
+Sidebar 285-208
-Sidebar 284-190 3-spalt 389-265
2-spalt 290-190 2-spalt 398-265
1-spalt 387-... 1-spalt 540-...
col25 (Min=138px) pageCol25 (Min=190px)
+Sidebar 207-151
-Sidebar 208-139 4-spalt 285-193
3-spalt 188-138 3-spalt 262-190
2-spalt 201-138 2-spalt 298-190
1-spalt 281-... 1-spalt 386-...
col20 (Min=px) pageCol20 (Min=px)
+Sidebar
-Sidebar 5-spalt
4-spalt 4-spalt
3-spalt 3-spalt
2-spalt 2-spalt
1-spalt 1-spalt

Html-Attribute

Die diversen Html-Elemente, welche das Spaltenlayout ausmachen, erhalten Attribute, über welche per Style Sheet deren Aussehen beeinflusst werden kann. Dies sind:

  • Eine Html-ID für jede Zeile: PageCol-<n>, wobei <n> eine fortlaufende Nummer von 1 an ist
  • Klasse für jede Zeile: PageCol-Row
  • Klasse für jede Spalte: PageCol-Column und Cell<n>, wobei <n<> eine fortlaufende Nummer von 1 an ist

Die fortlaufende Nummer für die Html-ID beginnt auf jeder Seite neu von 1. Die fortlaufende Nummer für die Klasse Cell<n>beginnt bei jeder Zeile neu von 1.

Ein einfaches 2-spaltiges Layout erzeugt folgenden Html-Code:

<div id="PageCol-1" class="row100 PageCol-Row"><div class="col50 PageCol-Column Cell1">

Spalte 1

</div><div class="col50 PageCol-Column Cell2">

Spalte 2

</div></div>

Weitere Infos zur Seite
Erzeugt Samstag, 12. Mai 2012
von wabis
Zum Seitenanfang
Geändert Mittwoch, 15. Oktober 2014
von wabis