WaBis

walter.bislins.ch

Layout-Klassen

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.

Klassen für Textformatierungen

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}}.

Klassen für die Platzierung mit umfliessendem 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}}

Klassen für Hinweis-Boxen

Die folgenden Klassen können zum Formatieren von speziellen Meldungen verwendet werden:

  • Error: Fehlermeldungen
  • Warning: Warnungen
  • Confirm: Bestätigungs-Aufforderungen
  • Status: Status-Hinweise
{{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}}

uns so siehts aus:

Fehlermeldung
Warnung
Bitte bestätige
Status
Hinweistext
Text in Box

Klasse für horizontal Scrollenden Inhalt

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}}

Klassen für Abstände oben und unten

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:

  • Paragraph: Verhält sich bezüglich Abständen zu anderen Elementen wie ein p-Tag
  • VMargin: Abstand unten und oben
  • TopMargin: Abstand oben
  • BottomMargin: Abstand unten
  • CancelBottomMargin: Abstand unten verringern
{{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:

$lbtn
Generische Klasse, die für alle Link-Button-Varianten verwendet werden muss. Die folgenden Klassen können zusätzlich verwendet werden, um das Layout eines Buttons zu modifizieren:
$lbtnBig
Erzeugt einen grösseren Button.
$lbtnSmall
Erzeugt einen kleineren Button.
lbtnBlock
Erzeugt einen Block-Button, der über die volle Breite des Eltern-Elementes geht.
lbtnDisabled
Zeichnet einen Button in einem inaktiven Zustand.

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}}

Ganze Buttonfläche anklickbar machen

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.

Klassen für Schatten

Beliebigen Elementen kann eine der folgenden Klassen zugewiesen werden, um einen Schatten zu erzeugen:

  • shadow: gleichmässiger Schatten rund um das Element
  • shadow-top: Schatten oben
  • shadow-bottom: Schatten unten
  • shadow-bottom-right: Schatten unten rechts
{{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.

Klassen für abgerundete Ecken

Block-Elementen kann ein Rahmen mit abgerundeten Ecken zugewiesen werden:

  • roundedBox5: Radius 5 Pixel
  • roundedBox10: Radius 10 Pixel

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!

Klassen für Menu-Bars

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...

Weitere Infos zur Seite
Erzeugt Samstag, 26. Mai 2012
von wabis
Zum Seitenanfang
Geändert Donnerstag, 6. September 2018
von wabis