Um die Seiten in Typo3 zu strukturieren, benötigt man ein Seitenraster. Dieses grundlegende Seitenraster ist voreingestellt: Es legt die Anordnung der Elemente wie Navigation, Footer etc. fest, und es definiert weiterhin eine maximale Breite des Contentbereiches von 1320 Pixeln. Diese Begrenzung stellt sicher, dass breit laufende Texte ihre Lesbarkeit behalten. Auf hochauflösenden Bildschirmen führt dies dazu, dass rechts und links vom Contentbereich Freiräume entstehen können.
Die bei anderen Systemen verwendete Seitenstrukturierung durch sogenannte Sections ist bei Typo3 durch die Anlage des genannten Seitenrasters nicht erforderlich, sodass ein Arbeitsschritt erspart bleibt.
Die Inhalte können im Prinzip beliebig auf den Seiten angeordnet werden. Bei Bedarf können für die weitere Strukturierung der Inhalte sogenannte Container verwendet werden, bei denen einstellbar ist, ob die Inhalte in 2 oder3 oder 4 Spalten angeordnet werden und wie die Anteile zwischen diesen Spalten verteilt werden. Basis ist dabei immer ein Grundraster von 12 Spalten, die dann im Verhältnis 6:6 oder 2:8:2 oder 3:3:3:3 usw. aufgeteilt werden können.
Element mit Begrenzung durch Content-Rahmen
Standardobjekt (ohne Containernutzung) misst 100% Breite des Contentbereichs, wie hier mit grauem Hintergrund dargestellt.
Element ohne Begrenzung durch Content-Rahmen
Das Objekt nutzt 100% der Bildschirmbreite.
Achtung: Diese Ansicht ist für Videos, Bilder und einzelne Teaser eher ungeeignet, da diese hier zu groß dargestellt werden.
Container 2* | 8 | 2*
Diese Ansicht verwenden wir für alle Komponenten, die einspaltig dargestellt werden sollen, wie Texte, Videos, einzelne Bilder, Linklisten uvm. Hierbei wird nur die mittlere Spalte (8) befüllt - die Spalten rechts und links (2*) bleiben frei.
Achtung: Der graue Hintergrund gibt genau die Breite der mittleren Spalte wieder. Wichtig ist die Einstellung “justify-content-center” auf Ebene des 3-Column-Elements, um sicherzustellen, dass auch leere Spalte rechts und links dargestellt werden.
Container 6 | 6 - Position 1
Container 6 | 6 - Position 2
An dieser Stelle können Texte, Bilder, Videos, Teaser oder Verlinkungen stehen.
Container 4 | 4 | 4 - Position 1
Teaser können auch durch Bilder, Texte, Linklisten o.ä. ersetzt werden.
Container 4 | 4 | 4 - Position 2
Container 4 | 4 | 4 - Position 3
Container 3 | 3 | 3 | 3 - Position 1
Teaser können auch durch Bilder, Texte, Linklisten o.ä. ersetzt werden.
Container 3 | 3 | 3 | 3 - Position 2
Container 3 | 3 | 3 | 3 - Position 3
Container 3 | 3 | 3 | 3 - Position 4
Spalten ohne Weißraum (links-rechts)
Elemente können auch ohne Abstand zueinander dargestellt werden - sowohl horizontal als auch vertikal.
Die Elemente können die selbe Höhe haben, aber auch in ihrer individuellen Höhe verbleiben.
Beispiel 6 | 6 - Position 1
Bild- und Textkombination mit "voller Höhe"
- Containerbaustein braucht CSS-Klasse “full-height” -
Spalten ohne Weißraum (links-rechts & oben-unten)
Beispiel 6 | 6 - Position 1
Teaser kann auch z.B. durch ein Bild ersetzt werden
Beispiel 6 | 6 - Position 2
Teaser kann auch z.B. durch ein Bild ersetzt werden
Beispiel 6 | 6 - Position 3
Teaser kann auch z.B. durch ein Bild ersetzt werden
Beispiel 6 | 6 - Position 4
Teaser kann auch z.B. durch ein Bild ersetzt werden