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:
Hinweis: Wenn Command = stack definiert ist, erhält der Container zusätzlich die Klasse Stack.
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.
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:
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 |
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.
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 | ||
Die diversen Html-Elemente, welche das Spaltenlayout ausmachen, erhalten Attribute, über welche per Style Sheet deren Aussehen beeinflusst werden kann. Dies sind:
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>