Komplexere Layouts werden mit Hilfe von Div-Elementen erzeugt. Abstände zwischen Div-Elementen und anderen Elementen wie Paragraphen, Listen, Überschriften usw. werden intern mittels Klassen festgelegt. Klassen sind vordefinierte Layout-Elemente. Mittels <style>-Tags können auch eigene Klassen definiert werden.
Die folgenden Klassen können mit den Makros div und span oder bei Tabellen verwendet werden.
| Klasse | Beschreibung | Beispiel |
|---|---|---|
| $uline | Unterstrichen | Unterstrichen |
| $del | Durchgestrichen | Durchgestrichen |
| $small | Kleiner Text | Kleiner Text |
Für Unterstreichung und Durchstreichung gibt es zudem die Makros {{uline|Text}} und {{del|Text}}.
Wenn Elemente wie Div's oder Zabellen links oder rechtsbündig auf der Seite platziert werden sollen, so dass Text in einem gewissen Abstand drumherum fliesst, kann man diesen Elementen die Klasse FloatLeft bzw. FloatRight zuweisen:
{| $FloatRight
: Tabelle rechtsbündig
|}
{{div|$FloatRight}}
: Elemente rechtsbünding
{{end div}}
Die folgenden Klassen können zum Formatieren von speziellen Meldungen verwendet werden:
{{div|$Error}} Fehlermeldung {{end div}}
{{div|$Warning}} Warnung {{end div}}
{{div|$Confirm}} Bitte bestätige {{end div}}
{{div|$Status}} Status {{end div}}
{{div|$Note}} Hinweistext {{end div}}
{{div|$Border}} Text in Box{{end div}}
und so siehts aus:
Wenn einem Element die Klasse Scroller zugewiesen wird, so erscheint ein horizontaler Scrollbar, wenn das Element breiter als die zur Verfügung stehende Breite des Containers ist. Dies ist vor allem praktisch, wenn das Element eine feste Breite hat oder nicht beliebig gestaucht werden kann.
Hinweis: Nicht verschachtelte Tabellen, Code-Bereiche und Formeln sind automatisch Scroller.
Siehe auch Makro: scroll.
{{div|$Scroller}}
Wiki-Text (Tabellen, Grafik, usw.)
{{end div}}
Die Standardelemente wie Paragraphen, Listen und Tabellen haben unten ein sog. Margin (Abstand zum nächsten Element). Div-Elemente haben standardmässig keinen solchen Abstand definiert. Soll ein Element Unten oder Oben einen Abstand bekommen, kann ihm eine der folgenden Klassen zugewiesen werden:
{{div|$VMargin}}
:
{{end div}}
Klassen-Namen muss ein $ Zeichen vorangesetzt werden (siehe Makro: div).
Durch Verschachteln von Div-Elementen kann es geschehen, dass der untere Abstand zum nächsten Element zu gross wird. In diesem Fall kann mit der Klasse CancelBottomMargin der untere Abstand um eine Einheit verringert werden:
{{col|50|$BottomMargin|row=$CancelBottomMargin}}
:
{{col|end}}
Weiterer Text...
Im obigen Beispiel wird jedem Spalten-Element unten ein Abtand per Klasse BottomMargin gegeben. Da jedes Spalten-Element unten ein Abstand hat und jeder Paragraph oben ebenfalls einen Abstand hat, addieren sich die Abstände zwischen dem Spalten-Element und dem folgenden Text zu zwei Einheiten, was nicht sehr schön aussieht. Indem der Zeile (row) des col-Elements zusätzlich die Klasse CancelBottomMargin zugewiesen wird, wird einer dieser Abstände aufgehoben.
Hinweis: Das Makro col mit dem optionalen Argument stack händelt die Abstände in der Regel korrekt. Das Beispiel oben dient lediglich der Veranschaulichung.
Hinweis: Die nachfolgend beschriebenen Buttons kannst du mit den Makros ButtonText, ButtonLink einfacher erzeugen.
Die folgenden Klassen sind definiert um Links das Aussehen von Buttons zu geben:
Die Klassen können bei den Makros div und span verwendet werden.
| {{div|$lbtn|$lbtnBig}}[[Button]]{{end div}} | |
|
{{div|$lbtn}}[[Button]]{{end div}} | |
|
{{div|$lbtn|$lbtnSmall}}[[Button]]{{end div}} {{div|$lbtn|$lbtnSmall|$lbtnDisabled}}[[Button]]{{end div}} | |
|
{{div|$lbtn|$lbtnBlock}}[[Button]]{{end div}} {{div|$lbtn|$lbtnBlock|$lbtnBig}}[[Button]]{{end div}} |
In den obigen Beispielen ist der Link-Text innerhalb des Button-Divs. Es muss also der Text genau angeklickt werden, um den Link auszulösen. Man kann aber auch einen Button definieren, sodass die ganze Fläche als Link funktioniert. Dazu muss das Button-Div innerhalb des Links stehen:
| [[Button|{{span|Button|$lbtn|$lbtnBig}}]] | Button |
|
[[Button|{{span|Button|$lbtn|$lbtnBlock|$lbtnBig}}]] | Button |
|
[[Button|{{span|Button /// {{span|kleiner Text|$small}}|$lbtn|$lbtnBlock|$lbtnBig}}]] | Button kleiner Text |
Die Buttons können mit Schatten versehen werden, indem die Klassen für Schatten zusätzlich verwendet werden.
Beliebigen Elementen kann eine der folgenden Klassen zugewiesen werden, um einen Schatten zu erzeugen:
{{div|$shadow-bottom-right|border:1px solid black}}
Dieser Absatz hat einen schwarzen Rand und einen Schatten unten rechts.
{{end div}}
Dieser Absatz hat einen schwarzen Rand und einen Schatten unten rechts.
Block-Elementen kann ein Rahmen mit abgerundeten Ecken zugewiesen werden:
Damit die Runden Ecken sichtbar werden, muss dem Element ein sichtbarer Rahmen zugewiesen werden.
{{div|$roundedBox5|border:1px solid black}}
Dieser Absatz hat einen schwarzen Rand mit abgerundeten Ecken mit Radius 5 Pixel.
{{end div}}
Dieser Absatz hat einen schwarzen Rand mit abgerundeten Ecken mit Radius 5 Pixel.
Rahmen und Schatten dürfen auch kombiniert werden!
Es kann auf sehr einfache Art ein Menu-Bar wie er oben auf der Website verwendet wird auch innerhalb einer Wiki-Seite verwendet werden. Dazu muss lediglich eine verschachtelte Liste mit Links in ein div Element verpackt werden:
{{div|$menubar}}
* [[WaBis-Wiki Dokumentation|Doku]]
* [[Layout-Klassen|Layout]]
** [[Layout-Klassen#Klassen für Link-Buttons|Link-Buttons]]
** [[Layout-Klassen#Klassen für Schatten|Schatten]]
** [[Layout-Klassen#Klassen für Menu-Bars|Menu-Bars]]
* [[Makros]]
{{end div}}
Un so sieht es aus:
Ende dieser Seite...