Inhaltselement Box
Box – wozu brauch ich die? Wie kann diese aussehen?
Mit dem Boxenelement lässt sich Inhalt strukturiert mehrspaltig darstellen. Die Darstellungsweise kann dabei mittels Boxencode für verschiedene Bildschirmgrößen definiert werden.
Wie kann diese aussehen?
In diesem Dokument stehen einige Beispielen.
Beispiel einer Box
Hier steht eine Überschrift h3
Hallo. Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn.
Hier steht eine Überschrift h3
Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen.
Hier steht eine Überschrift h3
Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.
Der Boxencode
Das Boxenbeispiel verwendet den Boxencode md1-1-1. Das bedeutet, dass ab einer Bildschirmgröße von ≥768px, der Inhalt 3-spaltig ausgegeben wird. Bei kleineren Bildschirmen wird die Darstellung automatisch 1-spaltig.
Generell gibt es folgende Bildschirmgrößen:
- Extra small <576px
- Small ≥576px
- Medium ≥768px
- Large ≥992px
- Extra large ≥1200px
Weitere Beispiele und Infos lassen sich auch hier nachlesen.
Die Breaktpoints lassen sich bei Bedarf in den Konstanten individuell definieren.
Boxenabstände
Abstand der Box nach oben / unten
Die Abstände der Box lassen sich nach oben ("space before") und unten hin ("space after") definieren. Standardmäßig ist kein Abstand eingestellt, er kann aber manuell definiert werden als:
- extra small
- small
- medium
- large
- extra large
Abstand zwischen den Spalten in der Box
Die Abstände zwischen den einzelnen Spalten können im Boxencode definiert werden. Dabei sind Werte zwischen 1 und 5 möglich. Wird kein Wert definiert, verwendet Typo3 den Standardabstand = 15 px.
Schauen wir uns beispielhaft den Boxencode der gelb hinterlegten Box an. Er lautet: md(3)1(1)-(1)1(3)
Es handelt sich also um eine 2-spaltige Box. Die Zahlen in Klammern beschreiben den Abstand zwischen den entsprechenden Spalten. Links und rechts ist der Abstand also jeweils 3 und in der Mitte 2x1.
Wird kein Innenabstand (Abstand zwischen den einzelnen Spalten) gewünscht, bei den Abstandsoptionen einfach "kein Abstand" auswählen und den Haken unten setzen (s. Screenshot).
Hintergrundbild und Verlinkung einer Box
Eine Box bietet noch weitere Optionen zur Gestaltung. Sie kann:
- ein Hintergrundbild erhalten
- mit einem Link versehen werden
