Positionierung
(Auszug aus "E-Books mit ePUB ─ Von Word zum E-Book mit XML" von Dr. Victor Wang)
In der folgenden Tabelle sind die wichtigesten CSS-Eigenschaften für die Positionierung von Elementen aufgeführt sowie deren mögliche Werte mit jeweils einem Beispiel.
left | Abstand zum linken Rand Definiert einen Abstand zum linken Rand. Nur in Kombination mit position. |
Werte | <Länge> | <Prozent> | auto | inherit |
Beispiel | position: absolute; right: 10pt; |
top | Abstand zum oberen Rand Gibt einen Abstand zum oberen Rand an |
Werte | <Länge> | <Prozent> | auto | inherit |
Beispiel | position: absolute; top: 2cm; |
right | Abstand zum rechten Rand Gibt einen Abstand zum rechten Rand an |
Werte | <Länge> | <Prozent> | auto | inherit |
Beispiel | position: absolute; right: 50px; |
bottom | Abstand zum unteren Rand der Webseite Nur in Kombination mit position. Gibt einen Abstand zum unteren Rand an. |
Werte | <Länge> | <Prozent> | auto | inherit |
Beispiel | position: absolute; bottom: 45mm; |
clear | Beendet float-Effekte Die Eigenschaft clear hebt ein vorher gesetztes float (Umfließen) wieder auf. Werte: 1) left: kein Umfließen von links 2) right: kein Umfließen von rechts 3) both: weder von links noch von rechts umfließen |
Werte | none | left | right | both | inherit |
Beispiel | clear: right; |
max-width | Maximalbreite Definiert die maximal erlaubte Breite für ein Element |
Werte | <Länge> | <Prozent> | none | inherit |
Beispiel | max-width: 90%; |
max-height | Maximalhöhe Definiert die maximal erlaubte Höhe für ein Element |
Werte | <Länge> | <Prozent> | none | inherit |
Beispiel | max-height: 200px; |
min-width | Mindestbreite Definiert die Mindestbreite eines Elements |
Werte | <Länge> | <Prozent> | inherit |
Beispiel | min-width: 11cm; |
min-height | Mindesthöhe Definiert die Mindesthöhe eines Elements |
Werte | <Länge> | <Prozent> | inherit |
Beispiel | min-height: 20pt; |
position | Positionierung Festlegung einer Positionierung von Elementen. Wichtige Werte: 1) absolute: absolute Positionierung 2) fixed: verändert seine Position auch beim Scrollen nicht 3) relative: Maßeinheiten |
Werte | static | relative | absolute | fixed | inherit |
Beispiel | position: absolute; top: 50px; right: 20px; |
float | Umfließen von Elementen Definition von umflossenen Elementen. Der Wert left positioniert das Element links und lässt den Text rechts herum fließen. Entsprechend für den Wert right. Das Umfließen kann über die Eigenschaft clear beendet werden. |
Werte | left | right | none | inherit |
Beispiel | float: right; |
vertical-align | Vertikale Ausrichtung Richtet den Text entsprechend der Angabe aus. Erlaubte Werte sind: 1) top: oberer Rand 2) text-top: oberer Schriftrand (OPS-Hinweis: Reader dürfen diesen Wert wie top behandeln) 3) super: höhergestellt 4) middle: mittig 5) sub: tiefergestellt 6) baseline: Text-Grundlinie 7) text-bottom: unterer Schriftrand (OPS-Hinweis: Reader dürfen diesen Wert wie bottom behandeln) 8) bottom: unterer Rand |
Werte | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <Prozent> | <Länge> | inherit |
Beispiel | vertical-align: top; |
<< zurück | vor >> |
Tipp der data2type-Redaktion: Zum Thema ePub bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © mitp 2011
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "E-Books mit ePUB" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
Verlagsgruppe Hüthig Jehle Rehm GmbH, Im Weiher 10, 69121 Heidelberg, kundenbetreuung(at)hjr-verlag.de