Wikizone - Benutzerbeiträge [de]

CSS - Positionierung

2006-06-22T13:57:21Z

84.161.136.18: /* Float-Elemente */

== Die Eigenschaften position und float ==

In CSS Layouts kann man Elemente absolut oder relativ positionieren (Maße angeben) Außerdem kann man Elemente 'floaten'.

Positionierungsarten:

position: static;
position: absolute;
position: relative;
position: fixed;

Float Eigenschaft:

float: left;
float: right;
float: none;

===Absolute Positionierung===
* Die Maßangabe bezieht sich auf die obere linke Ecke des Browserfensters
* Wenn ein Elternelement ebenfalls relativ oder absolut positioniert ist bezieht sich die Maßangabe auf das Elternelement
* Wenn keine Maßangabe für top,left... verwendet wird bleibt die Box da stehen wo sie ohne positionierung gelandet wäre.

===Relative Positionierung===
Hier beziehen sich die Werte auf die 'normale' Position des Elements. Es ist also quasi eine Verschiebung.

=== Float-Elemente ===
* Ein gefloatetes Element wird aus dem Textfluss gehoben und rutscht nach links (float:left;) oder rechts-oben (float:right;) Bis es an das nächste Float-Element stößt.
* Text (oder Bilder) aus dem normalen Textfluss muß um die gefloateten Kästen fließen.
* floatende Elemente müssen immer eine Breite haben

===Beispiele===
#box1 {
position: absolute;
top: 70px;
left: 80px;
width: 570px;
padding: 15px;
}

CSS - Positionierung

2006-06-22T13:52:56Z

84.161.136.18:

== Die Eigenschaften position und float ==

In CSS Layouts kann man Elemente absolut oder relativ positionieren (Maße angeben) Außerdem kann man Elemente 'floaten'.

Positionierungsarten:

position: static;
position: absolute;
position: relative;
position: fixed;

Float Eigenschaft:

float: left;
float: right;
float: none;

===Absolute Positionierung===
* Die Maßangabe bezieht sich auf die obere linke Ecke des Browserfensters
* Wenn ein Elternelement ebenfalls relativ oder absolut positioniert ist bezieht sich die Maßangabe auf das Elternelement
* Wenn keine Maßangabe für top,left... verwendet wird bleibt die Box da stehen wo sie ohne positionierung gelandet wäre.

===Relative Positionierung===
Hier beziehen sich die Werte auf die 'normale' Position des Elements. Es ist also quasi eine Verschiebung.

=== Float-Elemente ===
* Ein gefloatetes Element wird aus dem Textfluss gehoben und rutscht nach links (float:left;) oder rechts-oben (float:right;) Bis es an das nächste Float-Element stößt.
* Text (oder Bilder) aus dem normalen Textfluss muß um die gefloateten Kästen fließen.

===Beispiele===
#box1 {
position: absolute;
top: 70px;
left: 80px;
width: 570px;
padding: 15px;
}

CSS

2006-06-22T13:10:09Z

84.161.136.18: /* Infos zu Stylesheets / CSS */

== Infos zu Stylesheets / CSS ==
[[CSS Navigation]]

[[CSS - Hacks]]

[[CSS - Positionierung]]

[[CSS - Float]]

ToDo...

CSS

2006-06-22T13:07:48Z

84.161.136.18: /* Infos zu Stylesheets / CSS */

== Infos zu Stylesheets / CSS ==
[[CSS Navigation]]

[[CSS - Hacks]]

[[CSS - Float]]

ToDo...