Row "Contained"

Row "Full width"

Row "Full Bleed"

Tests für Blöcke und Boxen

Neue Boxen (noch ohne CSS)

Box Salmon

Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann a lso komplett ignoriert werden.

Box Orange (#ff8c00)

Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Box Sunflower (#ffd700)

Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Box Yellow (#ffff00)

Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Box Darkpink (#c71585)

Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Box Pastelpink (#db7093)

Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Box Pastelsalmon (#fa8072)

Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Box Rosa (#ffc0cb)

Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Box Pastell

Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Box Pastelgelb (#ffefd5)

Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Box Pastelrosa (#fff0f5)

Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Box Pastelgreen (#b1b839)

Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Box GreenBrown (#bdb76b)

Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Box Green

Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Box Gold (#daa520)

Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Box Border

Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Box grey

Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Box Midgrey (#a9a9a9)

Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Box darkgrey

Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Box Blue

Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Box Lightblue (#87cefa)

Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Tests mit manuellen Box-Formatierungen

Style-Test mit Boxen

Hier geht es darum gewisse vodefinierte Spezialboxen zu kreieren. Generell stehen foldende Möglichkeiten der Gestaltung zur Verfügung bzw. müssen auch definiert werden:

Blockrahmen ja/nein
Blockrahmen Stärke
Blockrahmen Farbe
Block-Hintergrundfarbe
Block-Schriftfarbe
Block Abstände

Dies ist ein Standard-Block ohne Formatierungen. Er dient als Vergleichsvorlage.

Box border

Box einfach nur mit einem Rahmen von 1px oder 2px in grau (#DDDDDD?). Hier müßte nur noch das Problem mit den Abständen gelöst werden, daß die Box nicht größer wird und aus dem grid fällt.
Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Box grey

Box einfach nur mit einem Hintergrund in grau (#DDDDDD?). Auch hier müßte nur noch das Problem mit den Abständen gelöst werden, daß die Box nicht größer wird und aus dem grid fällt.
Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Box darkgrey

Box mit einem Hintergrund in grau (#666666) und der Schrift in weiß. Auch hier müßte nur noch das Problem mit den Abständen gelöst werden, daß die Box nicht größer wird und aus dem grid fällt.
Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

box zitat

Box einfach nur mit einem Hintergrund in pastelton (#ffdab9?). Auch hier müßte nur noch das Problem mit den Abständen gelöst werden, daß die Box nicht größer wird und aus dem grid fällt.
Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

box farbig1

Box mit einem Hintergrund in kräftigerer Farbe (#4a88c2) und der Schrift in weiß. Auch hier müßte nur noch das Problem mit den Abständen gelöst werden, daß die Box nicht größer wird und aus dem grid fällt.
Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

box farbig2

Box mit einem Hintergrund in kräftigerer Farbe (#6b8e23) und der Schrift in weiß. Auch hier müßte nur noch das Problem mit den Abständen gelöst werden, daß die Box nicht größer wird und aus dem grid fällt.
Hier ist noch ein wenig Testtext, damit die Box ein wenig voller wird. Der hat nichts zu sagen, kann also komplett ignoriert werden.

Boxhöhe Festlegen

Die Boxhöhe kann man mit einem einfachen Style-Befehl im Div der Box festlegen. Hier wurde die Höhe auf 360px festgelegt.

Alles in Box zentrieren

Die Ausrichtung in der Box kann man mit einem einfachen Style-Befehl [style="text-align: center;"] festlegen.

Das Wichtigste in Kürze

INFOTEXT