Position und Ausrichtung
Mit Hilfe der folgenden Befehle werden in css die Position von Elementen und deren Rahmen und Ränder definiert. Jedes Element besteht aus der Elementgröße (~ flächenmäßige Ausdehnung) und dem Inhalt (z.B. Text).Beispiel - CSS Ausrichtung: margin, padding
Elementgröße
Die Elementgröße wird in CSS durch width und height definiert.Beispiel - Elementbreite – Block-level
width: Längenangabe| Prozentwert | auto
Beispiel - Elementhöhe – Block-level
height: Längenangabe| Prozentwert | auto
Bei width und height kann auch ein minimaler bzw. maximaler Wert definiert werden,
so dass man unabhängig von der Schriftgröße, Bildgrößen oder des Inhalts ein Grundlayout
definieren kann: min-width, max-width, min-height, max-height
Elementposition
Mit Hilfe von margin (Abstand eines Elementes von einem anderen Element) und padding (Abstand des Inhaltes innerhalb eines Elements von dem Elementrand) kann in CSS die Position eines Elementes festgelegt werden.Beispiel - Abstand eines Elementes von einem anderen Element
margin: Längenangabe | Prozentwert | auto
Beispiel - Abstand des Inhaltes innerhalb eines Elements von dem Elementrand
padding: Längenangabe | Prozentwert | auto
Bei padding und margin können die Abstände von dem oberen, rechten, unteren und/oder linken Rand
definiert werden. Zusätzlich können die Abstände nach oben, rechts, unten und links über das direkte
Ansprechen der Position definiert werden:
padding/margin-top,
padding/margin-right,
padding/margin-bottom,
padding/margin-left
Hierbei sind sowohl positive als auch negative Werte möglich.
Beispiel - Größen- und Positionsdefinition eines Elementes
p {
width: 300px;
margin: 15px 20px 25px 30px;
padding-top: 20pt;
}
Die Werte können auch nur für einzelne Abstände definiert werden, z.B.:
width: 300px;
margin: 15px 20px 25px 30px;
padding-top: 20pt;
}
Beispiel - Größen- und Positionsdefinition eines Elementes
p {
margin-top: 15px;
marign-bottom: 25px;
}
margin-top: 15px;
marign-bottom: 25px;
}
Ausgangspunkt bei der Elementpositionierung
Mit Hilfe von position: xxx wird in CSS festgelegt, was den Ausgangspunkt für die Positionierung eines Elementes darstellt.Wertebereich von position
static: Standardwert, bei dem die Box nach dem gewöhnlichen Fluss ausgerichtet wird.
relative: Das Element wird zu Ihrem Bezugspunkt (vorher stehendes Element) verschoben. Das nachfolgende Element wird so positioniert, als ob dieses Element nicht verschoben wird.
absolute: Das Element wird relativ zu dem umschließenden Element verschoben.
fixed: Das Element wird absolut positioniert und feststehend (d.h. auch beim Scrollen bleibt das Element auf der definierten Position).
Inherit: Die Definition des Elternelements wird übernommen.
Bei den Positionswerten relative, absolute und fixed kann die Position eines Elementes
verändert werden. relative: Das Element wird zu Ihrem Bezugspunkt (vorher stehendes Element) verschoben. Das nachfolgende Element wird so positioniert, als ob dieses Element nicht verschoben wird.
absolute: Das Element wird relativ zu dem umschließenden Element verschoben.
fixed: Das Element wird absolut positioniert und feststehend (d.h. auch beim Scrollen bleibt das Element auf der definierten Position).
Inherit: Die Definition des Elternelements wird übernommen.
Dies erfolgt durch top, right, bottom, left:
Mit Hilfe von static position behält das Element die Position, an der das übergeordnete Element ist.