Sie sind hier: Startseite -> CSS-Grundlagen -> Positionierung

CSS-Grundlagen: CSS-Positionierung

CSS-Positionierung: Aufteilung des Layouts

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.

Elemente können direkt an einen bestimmten Punkt der Seite angeordnet werden, wobei es auch die Möglichkeit gibt, eine absolute Positionierung durchzuführen. Elemente können aber auch in Relation zu anderen Elementen angebracht werden, wobei vor allem der float-Befehl zum Einsatz kommt.

Schließlich erfolgt die Positionierung auch durch die Bestimmung der Abgrenzungen. Nicht immer soll an allen vier Seiten eines Elementes der gleiche Abstand erfolgen und daher kann für jede Himmelsrichtung ein anderer Wert angeführt werden.

Die Positionierung ist neben der Textgestaltung der wohl wichtigste Bereich von CSS und sorgt für so manches Kopfweh bei Anfängern, ist aber ein dankbares Werkzeug. Alleine schon die Möglichkeit, die Ebenen ohne Berühren der eigentlichen Programmierung in der Breite für tausende Seiten auf Knopfdruck ändern zu können, ist bei großen Projekten Goldes wert.

Übersicht der Unterseiten

Positionsart

Informationen über die möglichen Arten der Positionierung auf einer Webseite mit CSS.

Abstandsangaben

Informationen über die möglichen Abstandsangaben für margin und padding bei der Formartierung mit CSS.

Breite-Höhe

Informationen über die möglichen Angaben von Breite und Höhe eines Elementes mit CSS.

Float

Informationen über den CSS-Befehl float, mit dem Elemente zueinander positioniert werden können.

Schichten

Informationen über die Positionierung in CSS mittels Schichten, wodurch Ebenen überlagert werden können.

Produktsuche

Was brauchen Sie?

Ein Vorteil von Amazon besteht darin, dass es Millionen Produkte gibt, die man auch sehr gut im Preis und Angebot überprüfen kann. Ob man nun Sport betreiben möchte oder ein Kochbuch sucht - man wird fast immer fündig. Mit der nachstehenden Suche können Sie sehr schnell das aktuelle Angebot durchsuchen. Einfach den gewünschten Suchbegriff eingeben und auf den Suche-Button klicken.


Soziale Medien

Wenn der Artikel gefallen und/oder geholfen hat, bitte teilen:

Themenliste:

Zurück zum Hauptthema

Übersicht CSS-Grundlagen