Positionierung und Ausrichtung von Elementen

Damit du weisst, wie man ein Element auf einer Webseite ausrichten kann, solltest du zuerst wissen, um welche Art von Element es sich handelt. Generell gibt es im Webdesign mehrere Arten von Elementen, die eine Auswirkung auf die Darstellung und Ausrichtung haben.

Keine Abstände für die Ausrichtung und Positionierung nutzen

Um Elemente zu positionieren, sollte man immer die dafür vorgesehenen Möglichkeiten nutzen und nicht mit Tricks wie zum Beispiel Innen- oder Außenabständen arbeiten. Dies ist deshalb so wichtig, da eine Webseite auf verschiedenen Geräten und Bildschirmgrößen in einer anderen Breite und Höhe dargestellt wird.

Versucht man beispielsweisse ein Bild mit einem Außenabstand links von 350 Pixeln zu zentrieren, mag dies auf einem Desktop-Gerät gut aussehen, aber schon auf einem Tablet oder Smartphone wäre das Element eher rechts ausgerichtet oder gar nicht mehr sichtbar. Die richtige Variante wäre hier, das Bild über die Ausrichtung der Schrift des übergeordneten Elementes (zum Beispiel eines Bereiches) zu zentrieren.

Ein weiterer Grund dafür, dass man Abstände nicht zur Positionierung verwenden sollte ist, dass man bei exzessiver Nutzung sehr schnell den Überblick verliert und später nicht mehr weiss, warum ein Element an einer Position dargestellt wird. Wir sprechen hier aus Erfahrung ;-)

Möglichkeiten zur Positionierung und Ausrichtung von Elementen

Horizontale Ausrichtung von Bildern, Text-Elementen, Buttons und Icons (Inline-Block-Elemente)

Da Inline-Block-Elemente wie Text behandelt werden, ist es auch möglich diese Elemente hierüber auszurichten. Um ein solches Element auszurichten, wähle im übergeordneten Element unter "Schrift > Ausrichtung" die gewünschte Ausrichtung Links, Rechts oder Mitte aus. Hierbei ist zu beachten, das dabei der gesamte Inhalt des übergeordneten Elementes ausgerichtet wird. Möchtest du Elemente innerhalb eines Bereiches untereinander unterschiedlich ausrichten, kannst du das jeweilige Element in einen eigenen Bereich ziehen und hier die Ausrichtung ändern.

Um verschiedene Elemente in der gleichen Zeile unterschiedlich auszurichten, kannst du dafür die Eigenschaft "Float", wie im nächsten Absatz beschrieben, nutzen.

Horizontale Ausrichtung in einer Zeile

Eine weitere Möglichkeit, Elemente auszurichten und zu positionieren, bietet die Eigenschaft "Float", die du unter "Sonstiges" findest. Hiermit können Elemente links oder rechts innerhalb einer Zeile verschoben bzw. ausgerichtet werden. Dabei werden die Außenabstände des Elementes berücksichtigt. Mehrere Elemente werden dabei so lange in einer Zeile dargestellt, bis die Breite des übergeordneten Elementes erreicht ist und dann umgebrochen.

Mehrere Elemente können auch mit unterschiedlichen Ausrichtungen (Floats) in einer Zeile dargestellt werden. So kannst du zum Beispiel ein Text links anzeigen und rechts ein Bild. Möchtest du mehrere Elemente nebeneinander darstellen, achte darauf, das die einzelnen Elemente genügend Platz haben und nicht zu breit sind. Einen Abstand zwischen mehreren Elementen mit gleicher Ausrichtung oder zum Rand kannst du ganz normal über den Außenabstand realisieren, welcher in die Breite der Zeile mit einberechnet wird.

Bei der Verwendung von "Float" ist wichtig, dass bei dem übergeordneten Element des Bereiches die "Position" unter "Sonstiges" auf "relative" steht, damit sich das Element nicht mit den benachbarten Elementen "überlappt". Sollte es dennoch zu Problemen kommen, setze zusätzlich die Option "Overflow" auf "hidden".

Möchtest du ein nachfolgendes Element zwingend in einer neuen Zeile ohne Float darstellen, setze "Clear" unter "Sonstiges" auf "both".

Absolute Positionierung von Elementen

Alle Elemente können generell absolut an einer festen X- und Y-Achse positioniert werden. Sie werden dabei aus dem aktuellen Fluss des Dokumentes entfernt und relativ zum übergeordneten Element bzw. des kompletten Dokumentes ("absolute") oder relativ zum Browser-Fenster ("fixed") positioniert. 

Um ein Element zu positionieren, wähle unter "Sonstiges > Position" den entsprechenden Wert "absolute" oder "fixed" und gebe bei Top, Right, Bottom und Left die gewünschten Werte für die Position in Pixeln oder Prozent ein. Ein leerer Wert bedeutet dabei immer "auto", wird also automatisch je nach Höhe oder Breite des Elementes berechnet. 

Möchtest du ein Element vom oberen und linken Rand aus positionieren, gebe die entsprechenden Werte bei Top und Left ein und lasse Bottom und Right leer. Für eine Positionierung am rechten unteren Rand, gebe die Werte für Right und Bottom ein und lasse die anderen beiden leer usw.

Sind für eine Achse (X: Left und Right, Y: Top und Bottom) beide Werte angegeben, wird die Größe des Elementes automatisch angepasst, sofern keine feste Breite oder Höhe im Element angegeben ist. Du kannst mit der Positionierung also auch Bereiche fest "überdecken". Für eine vollständige Überdeckung kannst du beispielsweisse den Wert "0" bei allen 4 Eigenschaften angeben.

Wenn du ein Element innerhalb eines anderen mit "absolute" positionieren möchtest, achte darauf, dass dieses übergeordnete Element einen Wert (mindestens "relative") bei "Position" gewählt hat, da das Element ansonsten relativ zum kompletten Dokument oder eines anderen übergeordneten Elementes mit einem Wert bei "Position" positioniert wird. 

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