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