skip to content

Regional Computing Centre (RRZK)TYPO3 at University of Cologne

Divider

Der "Divider" (oder auch "Trenner") ist ein spezielles Inhaltselement, das Ihnen mehr Kontrolle über das Erscheinungsbild der Seite gibt. Der Divider selbst ist unsichtbar, erzwingt aber einen Umbruch.

Anwendungsfälle

Ein häufiger Anwendungsfall sind Bilder, welche oft nicht 100 Prozent der Breite des übergeordneten Inhaltselements einnehmen sollen. Sofern genug Platz verfügbar ist, umfließt ein nachfolgendes Text-Element dann das Bild.

expand:
Textumfluss um ein Bildelement, welches nicht 100 Prozent der Spaltenbreite einnimmt. Hier wurde kein Divider gesetzt.

Ob das Bild tatsächlich von Text umflossen wird, hängt der von den Einstellungen des Grid für die verfügbare Bildschirmbreite ab. Sie können sich nicht darauf verlassen und sollten deshalb Formulierungen wie "Im Bild links sehen Sie ..." vermeiden. Allerdings können Sie mit dem Divider-Element diesen Umbruch zuverlässig verhindern.

expand:
Der Divider (unsichtbar, hier symbolisiert durch die grüne Linie) erzwingt einen Umbruch.

Wichtig ist der Divider auch, wenn Sie mehrere Elemente mit variierender Höhe nebeneinander setzen. Ihr Browser platziert ein Element auf der Webseite indem er am rechten Rand des übergeordneten Inhaltselement ermittelt wie weit oben das Element platziert werden kann und es dann nach links verschiebt, bis ein anderes Element diesen Weg versperrt oder der linke Rand erreicht ist.

Wenn Sie zum Beispiel 4 Textelemente mit jeweils 33 Prozent Breite definieren, dann werden die ersten drei (sofern genug Platz vorhanden ist) nebeneinander dargestellt. Ist nun das mittlere Textelement länger als das rechte, wird das vierte Textelement unterhalb des rechten Elements dargestellt. Ihr Browser hat zunächst die maximale Höhe anhand des rechten Elements ermittelt und konnte dann die Textbox nicht nach links verschieben, weil das mittlere Element dies blockiert. Wäre das rechte Element länger als das mittlere und das linke, würde die vierte Textbox erwartungsgemäß links platziert.

expand:
Die vierte Box wird nicht wie erwartet links platziert (symbolisiert durch die gelbe Box), sondern ermittelt die Höhe zunächst am rechten Rand und kann dann wegen der längeren Box in der Mitte nicht nach links verschoben werden. Sie bleibt somit rechts "hängen".
expand:
Wenn in der Mobilansicht der Platz nicht reicht, bewirkt das Responsive Design, dass maximal zwei Elemente der Breite 33 Prozent nebeneinander dargestellt werden. Das dritte Element wird nicht links angefügt, weil die Höhe anhand des zweiten Elements bestimmt wurde, aber das längere erste Element verhindert, dass es in dieser Höhe links platziert wird. Das dritte Element verbleibt deshalb rechts und das vierte Element muss darunter statt daneben dargestellt werden.

Wenn Sie in diesem Szenario nach dem dritten Textelement einen Divider einfügen, erzwingen Sie einen Umbruch unterhalb des längsten Textelements. Jetzt limitiert der Divider wie weit oben das folgende Element  platziert werden kann und es rutscht unterhalb des längsten Elements ganz nach links.

expand:
Nachdem ein Divider (unsichtbar, hier durch die grüne Linie symbolisiert) eingefügt wurde, definiert dieser den unteren Rand und das Element rutscht ganz nach links.

Einen Divider setzen Sie also immer dann ein, wenn Sie sicherstellen möchten, dass an dieser Stelle immer ein Umbruch erfolgt.

Einen Divider einfügen

Einen Divider fügen Sie wie jedes andere Inhaltselement hinzu. Achten Sie darauf, dass Sie ihn zwischen den beiden Inhaltselementen platzieren zwischen denen Sie einen Umbruch erzwingen möchten.

Sie finden den "Divider" im Tab "Special Elements". Sie müssen lediglich einen (völlig beliebigen) Namen vergeben, der Ihnen im Backend angezeigt wird, aber im Frontend automatisch nicht sichtbar wird.

Contact
If you have any questions or problems, please contact the RRZK-Helpdesk