WaBis

walter.bislins.ch

Makro: LayoutCol

Das Standard-Layout mit zwei Spalten (Haupttext und Sidebar) lässt sich per Makros anpassen. Es kann zum Beispiel die Breite der Spalten geändert werden oder es kann der Sidebar ausgeblendet werden, sodass zum Beispiel für eine Hauptseite die ganze Seitenbreite zur Verfügung steht.

Um das Layout selbst zu erstellen, muss die Seite mit dem Makro: Fullscreen in den Fullscreen-Mode geschaltet werden. Danach kann mit dem Makro LayoutCol das Layout wie gewünscht erzeugt werden:

{{LayoutCol|Width|Command|id=ID|ColAttr|row=RowAttr}}

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

Width (optional) : 75 66 33 25
Breite der Spalte in %. Width muss nur für die erste Spalte angegeben werden, die zweite Spalte ergänzt die Breite auf 100%.
Command (optional)
Mit end wird das Layout abgeschlossen.
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 LayoutCol-, wobei eine fortlaufende Nummer beginnend bei 1 ist. Siehe Html-Attribute für weitere Informationen.
ColAttr (optional)
Klassen oder Styles für die folgende Spalte. 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 LayoutCol-Column und Cell-<n> erhält, wobei <n> eine fortlaufende Nummer beginnend bei 1 ist. Diese Nummer beginnt bei jedem neuen LayoutRow-Element wieder bei 1. Siehe Html-Attribute für weitere Informationen.
RowAttr (optional)
Klassen oder Styles für den Container aller Spalten vom ersten {{LayoutCol}} bis zum {{LayoutCol|end}}. 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 LayoutCol-Row erhält. Siehe Html-Attribute für weitere Informationen.

Anwendung

Das Makro ColLayout wird verwendet, um ein Seiten-Layout mit 2 Spalten zu beginnen, um die Spalten voneinander zu trennen und um die Reihe abzuschliessen:

{{LayoutCol|75}}
  Hauptspalte mit 75% Breite
{{LayoutCol}}
  Sidebar mit 25% Breite
{{LayoutCol|end}}

Für ein regelmässiges mehrspaltiges Layout innerhalb der Hauptspalte einer Seite verwende das Makro: col. Das Makro LayoutCol ist nur für das Seiten-Layout (Hauptbereich, Sidebar) zuständig.

Dynamisches Anordnen der Spalten

Mit dem Makro LayoutCol erstellte Spalten werden dynamisch neu angeordnet, wenn der Platz zu Eng wird. Hauptbereich und Sidebar werden dabei untereinander und auf die volle Seitebreite gesetzt.

Wenn im Sidebar zum Beispiel einer Startseite eines Wikis nur ein unwichtiges Bild zum optischen Ausfüllen des Platzes enthalten ist, so kann durch Zuweisen der Klasse $layoutHideCol erreicht werden, dass der Sidebar ausgeblendet wird, statt unterhalb des Hauptbereiches platziert zu werden:

{{LayoutCol|75}}
  Hauptbereich
{{LayoutCol|$layoutHideCol}}
  Ausblendbarer Sidebar
{{LayoutCol|end}}

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 jedes LayoutCol-Element: LayoutCol-<n>, wobei <n> eine fortlaufende Nummer von 1 an ist
  • Klasse für jedes LayoutCol-Element: LayoutCol-Row
  • Klasse für jede Spalte: LayoutCol-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 jedem LayoutCol-Element neu bei 1.

Ein LayoutCol-Element erzeugt folgenden Html-Code:

<div id="LayoutCol-1" class="pageRow100 LayoutCol-Row">
<div class="layoutCol75 LayoutCol-Column Cell1">

Hauptbereich

</div><div class="layoutCol25 LayoutCol-Column Cell2">

Sidebar

</div></div>

Weitere Infos zur Seite
Erzeugt Sonntag, 27. Mai 2012
von wabis
Zum Seitenanfang
Geändert Donnerstag, 19. Juni 2014
von wabis