Positionierungen mit CSS realisieren

Von float über margin bis index

Eine wesentliche Aufgabe von Cascading Style Sheets (CSS) ist die Positionierung von Elementen auf einer Webseite. Sie sind zum Teil nervig und zum Teil genial anzuwenden. Nervig deshalb, weil die Browser, vor allem ältere Versionen, nicht immer das machen, was man eigentlich eingestellt hatte und genial, weil die Steuerung der einzelnen Spalten (Div-Container) oder Textbereite (p-Tag) sehr einfach umzusetzen sind.

Dabei gibt es verschiedene gedankliche Herangehensweisen. Unter der Positionierung von Elementen auf einer Webseite versteht man zum einen die direkte Positionierung beispielsweise einer Ebene (Div-Tag) auf der Seite oder aber auch ihr Abstand zu den anderen Elementen, um ein schlüssiges CSS-Layout erstellen zu können.

Gestaltungsmöglichkeiten mit CSS

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

In den ersten Jahren des Webdesign hat man mit HTML-Seiten gearbeitet und direkt bei den Elementen wie etwa der Mittelspalte einer dreispaltigen Seite eingetragen, wie diese auszusehen hat. Heute nutzt man CSS in Form der externen Datei und kann damit zentral die verschiedenen Einstellungen überprüfen und überarbeiten.

Bei der Positionierung war wesentlich, dass es mit CSS gelang, statt der Layouttabelle verschiedene Divs aneinander zu reihen. Das gelang durch die float-Technik, die einfach anzuwenden ist und mit drei Ebenen hat man auch schon eine wesentlich einfacher Lösung für die Seite gefunden. Damit ist es aber noch nicht getan, denn die Außenabstände mit margin und die Innenabstände mit padding sind auch wichtige Themen.

Der Innenabstand ist etwa vom Text zum Rand des Textbereiches oder bei einer Tabelle der Abstand zum nächsten Rahmen, der Außenabstand ist der Abstand zum nächsten Element - etwa zwischen zwei Bildern oder zwischen zwei Ebenen.

Man kann aber auch ganz anders agieren und ein Element fixieren, sodass die Seite zwar gescrollt werden kann, das Element bleibt aber an der vorgesehenen Stelle erhalten und weicht nicht von der Stelle. Die absolute Positionierung ist der nächste Fall der Möglichkeiten, es gibt aber auch die relative Einstellung.

Lesen Sie auch

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

Die Positionierung ist in CSS eine der Hauptaufgaben und am Anfang nicht immer schlüssig. Margin wird gerne mit Padding verwechselt und nicht jedes float ist richtig gesetzt. Aber wenn man sich eingearbeitet hat, hat man ein mächtiges Werkzeug zur Verfügung. Wichtig ist dabei das Verständnis der Positionsarten.

Ein ganz eigenes Thema ist float, das eigentlich als Textfluss umschrieben werden muss. Doch es regeln das Verhältnis von ganzen Textbereichen oder den Hauptspalten zueinander ebenso.

Ebenfalls sehr oft im Einsatz sind natürlich die Abstände - Abstand vor und nach der Überschrift, vor und nach dem Text sind nur ein paar der Situationen.

Weitere Möglichkeiten bestehen darin, die Breite zu begrenzen oder die Höhe fest anzugeben. Auch die Arbeit mit verschiedenen Schichten oder auch Ebenen mit Indexangabe ist eine Option bei der Positionierung.

Themenseiten

Startseite CSS-Grundlagen

Positionierungen mit CSS realisieren

Von float über margin bis index

Gestaltungsmöglichkeiten mit CSS

Lesen Sie auch

Diesen Artikel teilen

Infos zum Artikel

Kategorien

Interner Bereich