Webdesign Grundlagen: Arten und Darstellung von Elementen

Um zu verstehen, wie Elemente auf einer Webseite dargestellt werden, solltest du wissen, dass man beim Webdesign grundsätzlich unter drei Arten von Elementen unterscheidet. Je nach Art des Elementes ist die Darstellung und das Verhalten des Elementes innerhalb einer Seite unterschiedlich.

Block-Element

Block-Elemente werden übereinander dargestellt und beginnen immer in einer neuen Zeile. Ebenso werden nachfolgende Elemente in einer neue Zeile dargestellt. Sie nehmen die volle Breite ihres übergeordneten Elements an, sofern keine benutzerdefinierte Breite festgelegt ist. Block-Elemente in Chimpify sind Bereich, Überschrift, Formular und alle Vorlagen-Elemente wie Autorenbox, Kommentare oder Seitenumbruch.

Inline-Block-Element

Inline-Block-Elemente werden solange nebeneinander in der gleichen Zeile dargestellt, bis die Breite des übergeordneten Elementes erreicht ist. Ist die Breite erreicht, wird - ähnlich wie bei Text - versucht, das Element automatisch umzubrechen. Es kann also über mehrere Zeilen dargestellt werden. Sie sind genauso breit, wie der Inhalt innerhalb des Elementes, sofern keine benutzerdefinierte Breite festgelegt ist. Vertikale Innen- und Außenabstände oder Rahmen können hierbei die Höhe der Zeile beeinflussen. Inline-Block-Elemente in Chimpify sind Bild, Text, Button und Icon.

Inline-Element

Inline-Elemente werden wie reiner Text behandelt und werden, ähnlich wie Inline-Block-Elemente, solange nebeneinander in der gleichen Zeile dargestellt, bis die Breite des übergeordneten Elementes erreicht ist. Ist die Breite erreicht, wird versucht, das Element automatisch umzubrechen. Es kann also über mehrere Zeilen dargestellt werden. Inline-Elemente sind genauso breit, wie der Inhalt innerhalb des Elementes. Eine Angabe von einer festen Breite und Höhe, sowie die Angabe von vertikalen Innen- und Außenabständen (oben und unten) ist bei Inline-Elementen nicht möglich. Aus diesem Grund verzichten wir in Chimpify auf Inline-Elemente. Es ist aber dennoch möglich, jedes Element in Chimpify als Inline darzustellen, wenn es notwendig sein sollte. Hierzu kannst du die Art des Elementes ganz einfach ändern:

Änderung der Art eines Elementes

Manchmal ist es notwendig, die Art eines Elementes zu ändern. Zum Beispiel kann man ein Text-Element, welches standardmässig ein Inline-Block-Element ist, in ein Block-Element ändern, wenn man möchte, dass der nachfolgende Inhalt immer in einer neuen Zeile beginnt. Um diese Einstellung zu ändern, kannst du in den Styles unter "Sonstiges" den Wert bei "Display" auf die jeweilige Darstellung anpassen. 

Zusätzlich zu den drei oben genannten Arten findest du hier ebenso die Arten "table", "table-row" und "table-cell" für die Darstellung von Tabellen. Der Wert "none" bewirkt, dass das Element nicht dargestellt, also ausgeblendet wird. 

© 2012-2018 by Chimpify UG (haftungsbeschränkt)