Zurück: Box-Modell
Weiter: Positionierung von Elementen

Ausrichtung von Elementen

Eine Inline-Box kann in unterschiedlichen Variationen auftreten:

  1. Als Inline-Box eines Inline-Elementes innerhalb eines Blocklevel-Elementes.
  2. Als innerhalb einer von einem Blocklevel-Element generierten Box (eine so genannte Anonyme Inline-Box).

    Als Beispiel:

    <p>Ein <em>betonter</em> Text.</p>

    Hier werden drei Inline-Boxen generiert, eine vom Element em generierte Box und jeweils eine anonyme Inline-Box für »Ein« und »Text«.

  3. Als Compact-Box, die je nach Situation als Inline- oder Block-Box dargestellt wird.

    Folgendes Beispiel erläutert das Verhalten von Compact-Boxen am besten, allerdings funktioniert es zur Zeit nur in aktuellen Opera-Browsern wie gewünscht:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
   <title>Die Compact-Box</title>

<style type="text/css">
dt { display: compact; }
dd { margin-left: 4em; }
</style>
</head>

<body>
   <dl>
      <dt>Eins</dt>
      <dd>Beschreibung des ersten Listenpunktes</dd>
      <dt>Zweiter, viel längerer Listenpunkt</dt>
      <dd>Beschreibung des zweiten Listenpunktes</dd>
   </dl>
</body>
</html>

    Beispieldokument ansehen

    Das Beispiel sollte wie folgt dargestellt werden:

    Eins       Beschreibung des ersten Listenpunktes
Zweiter, viel längerer Listenpunkt
           Beschreibung des zweiten Listenpunktes

    Falls der Elementinhalt von dt kürzer als der vorgegebene Abstand von dd ist, in diesem Fall also 4em, wird dt als Inline-Element gerendert, andernfalls als Blocklevel-Element.

  4. Als Marker-Box, die wir nicht näher behandeln wollen.
  5. Als Run-in-Box.

    Falls der Run-in-Box eine Block-Box folgt, wird die Run-in-Box als erste Inline-Box der Block-Box dargestellt, andernfalls als Block-Box. Auch hier ein Beispiel:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
   <title>Die Run-in-Box</title>

<style type="text/css">
.run-in { display: run-in; }
</style>
</head>

<body>
   <p class="run-in">Erster Absatz.</p>
   <p>Ein weiterer Absatz.</p>
</body>
</html>

    Beispieldokument ansehen

    Das Beispiel sollte wie folgt dargestellt werden:

    Erster Absatz. Ein weiterer Absatz.

    Auch hier machten es bisher nur aktuelle Opera-Browser (fast) richtig.

display

Mit der Eigenschaft display bestimmen Sie, von welcher Art das Element sein soll, mit welcher Art von Box es also dargestellt werden soll.

block
Das Element wird als Block-Element dargestellt, erzeugt also eine Block-Box.
inline
Das Element wird als Inline-Element dargestellt, erzeugt also eine oder mehrere Inline-Boxen.
list-item
Das Element wird als Listenpunkt dargestellt. Sehen Sie sich dazu folgendes Beispiel in einem der aktuellen Opera-Browser an: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
   <title>Die Eigenschaft 'display'</title>

<style type="text/css">
p {
   display: list-item;
   list-style-type: circle;
}
</style>
</head>

<body>
   <p>Erster Absatz.</p>
   <p>Ein weiterer Absatz.</p>
</body>
</html>

Beispieldokument ansehen

Die Absätze werden wie das HTML-Element li als Listenpunkte dargestellt. Die CSS-Eigenschaften für Listen können ebenfalls angewendet werden.

  • Die Deklaration display:list-item ersetzt keinesfalls die logische Auszeichnung von Listenpunkten in XHTML, sondern simuliert nur deren Darstellung.
marker
Erzeugt eine Marker-Box.
none
Erzeugt keine Box. Das Element verschwindet also aus der Darstellung der Seite, aber selbstverständlich nur dann, wenn der Browser die Eigenschaft interpretiert.
run-in und compact
Abhängig vom Kontext wird entweder eine Inline- oder eine Block-Box erzeugt.
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell und table-caption
Diese Werte dienen dazu, das Verhalten von Elementen als Element einer Tabelle zu simulieren. Die einzelnen Werte lassen sich wie folgt den XHTML-Tabellen-Elementen zuordnen: 
table    { display: table              }
tr       { display: table-row          }
thead    { display: table-header-group }
tbody    { display: table-row-group    }
tfoot    { display: table-footer-group }
col      { display: table-column       }
colgroup { display: table-column-group }
td, th   { display: table-cell         }
caption  { display: table-caption      }
  • Auch hier gilt zu sagen, dass dadurch keinesfalls die logische Auszeichnung von Text als Tabelle ersetzt werden kann.
vertical-align
  • Der rechteckige Bereich, der eine Zeile Inline-Elemente enthält, nennt sich Zeilen-Box (line box). Diese Zeilen-Box reicht für gewöhnlich genau vom linken Rand des umgebenden Blocks zum rechten Rand. Jede Zeile eines Textabsatzes zum Beispiel erzeugt eine eigene Zeilen-Box.

Mit der Eigenschaft vertical-align bestimmen Sie die vertikale Ausrichtung von Boxen innerhalb der Zeilen-Box. Diese Eigenschaft lässt sich nur auf Inline-Elemente oder Tabellenzellen (bzw. auf Elemente mit display:inline oder display:table-cell) anwenden.

baseline
An der Basislinie ausrichten. Falls es keine Basislinie gibt, wird das Element bündig mit der Unterkante der Elternbox ausgerichtet.
sub
Tieferstellen des Elementes ohne Veränderung der Schriftgröße.
super
Höherstellen des Elementes ohne Veränderung der Schriftgröße.
top
Bündig mit der Oberkante der Elternbox ausrichten.
text-top
Am oberen Schriftrand ausrichten.
middle
Zentriert das Element innerhalb der Elternbox.
bottom
Bündig mit der Unterkante der Elternbox ausrichten
text-bottom
Am unteren Schriftrand ausrichten
<Prozent>
<Länge>
inherit

An folgendem Beispiel können Sie überprüfen, wie Ihr Browser die einzelnen Werte dargestellt. Die Grafik zeigt die Referenzdarstellung im Mozilla 1.6. Vergleichen Sie, ob Ihr Browser alles richtig macht. ;-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
   <title>Vertikale Ausrichtung</title>

<style type="text/css">
p {
   border: 1px solid blue;
   font-size: 20px;
}
span {
   font-size: 40px;
   border: 1px solid green;
}
em {
   border: 1px solid red;
   font-size: 14px;
}
</style>
</head>

<body>

<p>Dieser <span>Absatz</span> enthält
<em style="vertical-align:baseline">auf die Basislinie ausgerichteten</em> Text.</p>

<p>Dieser <span>Absatz</span> enthält
<em style="vertical-align:sub">tiefergestellten</em> Text.</p>

<p>Dieser <span>Absatz</span> enthält
<em style="vertical-align:super">höhergestellten</em> Text.</p>

<p>Dieser <span>Absatz</span> enthält
<em style="vertical-align:top">mit der Oberkante bündigen</em> Text.</p>

<p>Dieser <span>Absatz</span> enthält
<em style="vertical-align:text-top">am Text oben ausgerichteten</em> Text.</p>

<p>Dieser <span>Absatz</span> enthält
<em style="vertical-align:middle">vertikal zentrierten</em> Text.</p>

<p>Dieser <span>Absatz</span> enthält
<em style="vertical-align:bottom">mit der Unterkante bündigen</em> Text.</p>

<p>Dieser <span>Absatz</span> enthält
<em style="vertical-align:text-bottom">am Text unten ausgerichteten</em> Text.</p>

</body>
</html>

Beispieldokument ansehen

Elementfluss

Der Fluss von Elementen ist abhängig davon, ob es sich um ein Block- oder ein Inline-Element handelt.

float

Mit der Eigenschaft float generieren Sie für ein Element eine Block-Box und richten es nach links oder rechts so aus, dass es aus dem gewöhnlichen Elementfluss herausgenommen und von den nachfolgenden Elementen »umflossen« wird.

none
Das Element wird nicht umflossen.
left
Das Element wird nach links ausgerichtet. Die nachfolgenden Elemente umfließen es rechts.
right
Das Element wird nach rechts ausgerichtet. Die nachfolgenden Elemente umfließen es links.
inherit

Da für ein Element, das umflossen werden soll, eine Block-Box generiert wird, die für gewöhnlich über die gesamte Breite des beinhaltenden Blocks reicht, muss explizit eine Breite angegeben werden.

Im folgenden Beispiel wird ein Textabsatz rechts ausgerichtet. Weitere Textabsätze umfließen es links. Schauen Sie sich das Beispiel an! Sie werden hier noch einmal sehen, dass der Margin-Bereich zum Element gehört und entsprechend mit umflossen wird.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
   <title>Umflossener Block</title>

<style type="text/css">
.umflossen {
   float: right;
   width: 200px;        /* notwendig */
   border: solid;
   margin: 0 0 1em 1em;
}
p {
   text-align: justify; /* zur Demonstration */
}
</style>
</head>

<body>

<p class="umflossen">Umflossener Absatz</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore
te feugait nulla facilisi.</p>

</body>
</html>

Beispieldokument ansehen

clear

Mit der Eigenschaft clear unterbrechen Sie den Fluss um ein mit float ausgerichtetes Element.

none
Gewöhnlicher Elementfluss.
left
Unterbricht den Fluss links um Elemente.
right
Unterbricht den Fluss rechts um Elemente.
both
Unterbricht den Fluss für beide Richtungen.
inherit

Folgendes Beispiel macht die Vorgehensweise deutlich:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
   <title>Umflossener Block</title>

<style type="text/css">
.umflossen {
   float: right;
   width: 75px;        /* notwendig */
   border: solid;
   margin: 0 0 1em 1em;
}
.clear {
   clear: right;
}
</style>
</head>

<body>

<p class="umflossen">Dieser Absatz wird von den anderen umflossen.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.</p>

<p class="clear">Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore
te feugait nulla facilisi.</p>

</body>
</html>

Beispieldokument ansehen

Zurück: Box-Modell
Weiter: Positionierung von Elementen
Zum Seitenanfang