| |
| * Link führt ins Internet |
|
| |
Einsatz von absoluter Positionierung
|
|
Die wohl interessanteste CSS Eigenschaft stellt die Positionierung von Elementen, wie Text, Grafik, etc. dar. Diese können Sie genau innerhalb des Browserfenster platzieren. Hierfür setzt man in den meisten Fällen das <div>-Tag ein. Sie können beispielweise einen Text exakt 100 Pixel von oben und 100 Pixel von links ausrichten.
Beispiel
div {
position: absolute;
top: 100px;
left: 100px;
}
|
Im Dokument selbst müssen Sie anschliessend lediglich das <div>-Tag an die gewünschte Stelle platzieren.
Beispiel
<div>Dieser Inhalt wurde exakt auf 100x100 Pixel ausgerichtet.</div>
|
| Eigenschaft | Werte | Bedeutung |
| bottom | Längenangabe, Prozentangabe, auto | Position von unten |
| clear | left, right, both, none | Text umfließen beenden |
| clip | rect() | Ausschnitt |
| display | none, block, inline, list-item, compact, inline-table, marker,run-in, table, table-caption,table-cell, table-column, table-columns-group, table-footer-group, table-header-group, table-row, table-row-group | Anzeigeart |
| float | left, right, none | Text umfließen |
| height | Längenangabe, Prozentangabe, auto | Höhe |
| left | Längenangabe, Prozentangabe, auto | Position von links |
| max-height | Längenangabe, Prozentangabe | Maximale Höhe |
| max-width | Längenangabe, Prozentangabe | Maximale Breite |
| min-height | Längenangabe, Prozentangabe | Minimale Höhe |
| min-width | Längenangabe, Prozentangabe | Minimale Breite |
| overflow | auto, hidden, visible, scroll | Überlauf |
| position | absolute, relative, fixed, static | Positionsart |
| right | Längenangabe, Prozentangabe, auto | Position von rechts |
| top | Längenangabe, Prozentangabe, auto | Position von oben |
| visibility | visible, hidden, collapse | Unsichtbar |
| width | Längenangabe, Prozentangabe, auto | Breite |
| z-index | Zahl | Überlappung |
|
|
|
|
|
|
|
SELFPHP
SELFPHP - Damir Enseleit, info@selfphp.de, Impressum, Kontakt