http://jendryschik.de

Usability und Webstandards

Suche
SucheMenü

Ausrichtung und Elementfluss

Hinweis: Diese »Einführung in XHTML, CSS und Webdesign« ent­spricht der zwei­ten Auf­lage des gleich­na­mi­gen Buches, das im Dezem­ber 2008 im Ver­lag Addison-Wesley erschie­nen ist. Die Inhalte sind mittlerweile veraltet, fast alles hat sich weiterentwickelt. Seit einigen Jahren gibt es HTML5, von XHTML redet niemand mehr, und auch die Entwicklung und Unterstützung von CSS ist um Einiges weiter. Auch fast alle Grundlagentexte müsste man schon lange fortschreiben. Falls Sie die Texte dennoch lesen möchten, behalten Sie das bitte im Hinterkopf.

Zurück zur Startseite und zum Inhaltsverzeichnis des Buchs

Vertikale Ausrichtung: Die Eigenschaft vertical-align

Die Eigenschaft vertical-align bestimmt die vertikale Ausrichtung von Inline-Elementen innerhalb von Zeilenboxen oder Tabellenzellen.

Werte baseline, sub, super, top, text-top, middle, bottom, text-bottom, <Länge>, <Prozent>, inherit
Initialwert inherit
Vererbung nein
Anwendung Inline-Elemente, Tabellenzellen (Elemente td und th) sowie alle Elemente, deren display-Eigenschaft den Wert table-cell besitzt

Die Bedeutung der folgenden Werte ist abhängig davon, ob die Eigenschaft vertical-align auf Inline-Elemente oder Tabellenzellen angewendet wird.

Tabelle 7.4: Auswirkung der Werte der Element vertical-align auf Inline-Elemente und Tabellenzellen
Wert Inline-Elemente Tabellenzellen
baseline Ausrichtung an der Basislinie. Falls es keine Basislinie gibt, wird das Element bündig mit der Unterkante der Elternbox ausgerichtet. Ausrichtung an der Basislinie, wobei die Basislinie einer Zellenreihe die Basislinie der ersten Textzeile der ersten Zelle ist. Bei leeren Zellen entspricht baseline dem Wert bottom.
sub Tieferstellen des Elements ohne Veränderung der Schriftgröße. Keine Auswirkung.
super Höherstellen des Elements ohne Veränderung der Schriftgröße. Keine Auswirkung.
top Ausrichtung bündig mit der Oberkante der Zeilenbox. Dieser Wert hat nur eine Wirkung, wenn die Zeilenhöhe des Elternelements größer als normal eingestellt ist. Ausrichtung der letzten Textzeile bündig mit der Oberkante der Tabellenzelle.
text-top Ausrichtung am oberen Schriftrand. Dieser Wert hat nur dann eine sichtbare Wirkung, wenn der Schriftgrad des Elements vom Schriftgrad des Elternelements abweicht. Keine Auswirkung.
middle Richtet die vertikale Mitte der Textbox an einem Punkt aus, der etwa um 1/4 der Schriftgröße oberhalb der Basislinie des Elternelements liegt. Ausrichtung der vertikalen Mitte der Textzeilen an der vertikalen Mitte der Tabellenzelle.
bottom Ausrichtung bündig mit der Unterkante der Zeilenbox. Dieser Wert hat nur eine Wirkung, wenn die Zeilenhöhe des Elternelements größer als normal eingestellt ist. Ausrichtung der letzten Textzeile bündig mit der Unterkante der Tabellenzelle.
text-bottom Ausrichtung am unteren Schriftrand. Dieser Wert hat nur dann eine sichtbare Wirkung, wenn der Schriftgrad des Elements vom Schriftgrad des Elternelements abweicht. Keine Auswirkung.
<Länge> Neben den Schlüsselwörtern können Sie auch Längen oder Prozente angeben. Ein positiver Wert hebt die Basislinie des Texts an, ein negativer senkt sie ab. Die Werte 0 und 0% haben die gleiche Bedeutung wie baseline.
<Prozent>
inherit

Abbildung 7.15 zeigt, wie Werte sich bei Inlineboxen auswirken. Anhand dieser Referenzdarstellung können Sie vergleichen, ob Ihr Lieblingsbrowser alle Werte richtig interpretiert. Abbildung 7.16 zeigt die Auswirkung auf Tabellenzellen. Die Bezugslinie ist hierbei schwarz markiert. Besonders interessant ist, wie der Wert baseline interpretiert wird.


Abb. 7.15: Die Eigenschaft vertical-align bei Inline-Elementen


Abb. 7.16: Die Auswirkungen der Eigenschaft vertical-align bei Tabellenzellen

Browserunterstützung

Die Eigenschaft vertical-align wird von allen modernen Browsern unterstützt mit folgenden Einschränkungen:

Internet Explorer 6
IE bis Version 6 stellt die Werte top beziehungsweise bottom im Text genau so wie text-top beziehungsweise text-bottom dar.

Zum Seitenanfang

Floatierte Boxen: Die Eigenschaft float

Boxen können an bestimmten Stellen aus dem normalen Fluss herausgelöst und ganz links oder ganz rechts am Rand des umschließenden Blocks platziert werden. In diesem Zusammenhang spricht man auch von floatierter Positionierung.

Die Eigenschaft float gibt an, ob ein Element nach links oder rechts floatieren soll.

Werte none, left, right, inherit
Initialwert none
Vererbung nein
Anwendung nicht positionierte Elemente

Der Wert none ist der Initialwert, standardmäßig floatiert eine Box also nicht. Geben Sie hingegen left an, erzeugt das Element eine Blockbox, die nach links ausgerichtet wird. Nachfolgender Inhalt fließt an der rechten Seite der Box vorbei. Der Wert right erzeugt entsprechend eine Blockbox, die nach rechts ausgerichtet wird.

Wenn Sie eine Box floatieren lassen, sollten Sie stets auch eine Breite angeben (siehe die Eigenschaft width, Kapitel 7.8.1). Floatierte Boxen schrumpfen auf eine minimale Breite zusammen, das heißt, sie werden so breit, wie das größte nicht umbrechbare Inhaltselement (beispielsweise ein langes Wort) es erfordert. Eine Ausnahme bilden sogenannte ersetzte Inline-Elemente, das heißt inzeilige Elemente, deren Dimensionen nicht berechnet werden müssen, sondern bereits bekannt sind. Dazu gehören Bilder (img) oder Objekte (object); diese benötigen keine explizite Breitenzuweisung.


Abb. 7.17: Floatierte Positionierung


Abb. 7.18: Die Rechteckform nachfolgender Elemente wird nicht verändert, lediglich die Zeilenboxen werden gekürzt

Ein floatiertes Element ist nicht Teil des normalen Elementflusses, hat aber insofern Einfluss auf das Layout des weiteren Inhalts, als dass dieser sozusagen um das Element herumfließt. Dabei gibt es jedoch einiges zu beachten:

  • Damit Elementinhalte um floatierte Boxen herumfließen können, werden alle Zeilenboxen neben einem floatierten Element um den Betrag der Breite dieses Elements gekürzt.
  • Die tatsächliche Breite eines Elements, das einem floatierten Element nachfolgt, wird nicht verändert, um die Rechteckform des Blocks beizubehalten. Dadurch richtet sich ein Hintergrundbild an der tatsächlichen Breite des Elements aus und wird nicht seitlich verschoben. Es kann folglich von dem floatierten Element überdeckt werden. Dies ist gut in zu erkennen: Die floatierte Box erhält einen Margin-Bereich von 20 Pixeln und rückt vom Rand weg, sodass Sie den Rahmen und den Hintergrund des dahinterliegenden Elements sehen können – es ist rechteckig und vollständig.
  • Der Eigenschaft display floatierter Elemente wird stets die Eigenschaft block zugewiesen (es sei denn, display hat den Wert none), sodass diese immer den Status eines Blockelements erhalten.

Die Eigenschaft float kann nicht auf absolut oder fest positionierte Elemente und generierten Content angewendet werden. Zudem unterliegt eine floatierte Box nachfolgend erläuterten Regeln.

Regeln für floatierte Boxen

  • Bei der Platzierung einer floatierten Box werden nicht nur die Inhalte, sondern auch Padding-, Border- und Margin-Bereiche voll berücksichtigt; Randbereiche fallen nicht zusammen.
  • Eine floatierte Box wird so weit nach links oder rechts verschoben, bis sie entweder an die Kante des umschließenden Blocks oder eines anderen floatierten Elements stößt. Dadurch liegen floatierte Boxen so lange nebeneinander, bis nicht mehr ausreichend Platz vorhanden ist und das Element in die nächste Zeile verschoben wird.
  • Eine floatierte Box darf mit seiner Oberkante nicht höher platziert werden als ein anderes floatiertes Element oder Text, das beziehungsweise der im Dokument vor diesem notiert ist.

Floatierte Boxen werden aus dem Elementfluss herausgenommen. Was das bedeutet, zeigt Abbildung 7.108. Das Element, das die floatierte Box umschließt, enthält nun keinen Inhalt mehr. Die floatierte Box hat keinen Einfluss auf die Höhe des Elements, sodass dieses auf eine minimale Höhe, die sich aus Rahmen und Padding addiert, zusammenfällt. Um dieses Verhalten zu vermeiden, können Sie die Eigenschaft overflow einsetzen (siehe Kapitel 7.9.2).


Abb. 7.19: Floatierte Elemente werden aus dem Elementfluss herausgenommen

Browserunterstützung

Die Eigenschaft float wird von allen modernen Browsern unterstützt mit folgender Einschränkung:

Internet Explorer 6 und 7
Probleme treten häufig bei komplizierteren Layouts auf. Dort sollten Sie genau auf das Zusammenspiel mit geschachtelten oder absolut positionierten Boxen sowie der Eigenschaften float und clear achten. Vor allem das hasLayout-Konzept stellt eine besondere Herausforderung für Webautoren dar.

Zum Seitenanfang

Steuerung des Elementflusses um floatierte Boxen: Die Eigenschaft clear

In vielen Situationen soll der Elementfluss um floatierte Boxen unterbrochen werden, das heißt, ein nachfolgendes Element soll nicht neben floatierten Boxen stehen, sondern darunter: die Fußzeile einer Webseite beispielsweise, die diese abschließen und daher stets an ihrem Ende dargestellt werden soll, oder eine umrahmte Box, deren Rahmen nicht durch das floatierte Element unterbrochen beziehungsweise überdeckt werden soll. Um den Fluss um ein floatiertes Element zu unterbrechen, gibt es die Eigenschaft clear.

Die Eigenschaftclear gibt an, auf welchen Seiten eines Elements keine vorhergehenden floatierten Elemente dargestellt werden dürfen. Sie ist nur auf Blockelemente anwendbar.

Werte none, left, right, both, inherit
Initialwert none
Vererbung nein
Anwendung Blockelemente

Elemente, für die der Wert left angegeben ist, unterbrechen die Floatierung nach links, das heißt, sie stehen stets unterhalb von linksfloatierten Elementen. Entsprechend unterbrechen Elemente, für die clear auf right steht, die Floatierung nach rechts. Der Wert both unterbricht die Floatierung auf beiden Seiten.

Abbildung 7.20 zeigt die Anwendung der Eigenschaft clear auf einen Absatz. Der Absatz steht nicht neben, sondern unter der floatierten Box.


Abb. 7.20: Die Eigenschaft clear unterbricht die Floatierung

Zusammenspiel von clear und float

Die Eigenschaften float und clear lassen sich auch zusammen auf ein Element anwenden, wie in Listing 7.3 zu sehen. Für Box 3 wird der Elementfluss um linksfloatierte Elemente aufgehoben, daher steht das Element unterhalb der Boxen 1 und 2. Box 4 floatiert zwar rechts wie Box 3, steht aber unter dieser, da gleichzeitig der Elementfluss um rechtsfloatierte Elemente aufgehoben 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" lang="de" xml:lang="de">
  <head>
    <meta http-equiv="Content-Type"   content="text/html; charset=utf-8" />
    <title>Die Eigenschaft 'clear'</title>
    
    <style type="text/css">
      /* <![CDATA[ */
      div {
        padding: .5em;
        margin: .5em;
        border: 2px solid black;
        color: black;
        text-align: justify;
      }
      #box1 {
        background-color: #ff3;
        float: left;
      }
      #box2 {
        background-color: #ff9;
        float: left;
      }
      #box3 {
        background-color: #ffb;
        float: right;clear: left;
      }
      #box4 {
        background-color: #ffd;
        float: right;clear: right;
      }
      /* ]]> */
    </style>
  </head>
  
  <body>
    <div id="box1">Box 1</div>
    <div id="box2">Box 2</div>
    <div id="box3">Box 3</div>
    <div id="box4">Box 4</div>
  </body>
</html>
Listing 7.3: Zusammenspiel der Eigenschaften clear und float


Abb. 7.21: Zusammenspiel der Eigenschaften clear und float

Browserunterstützung

Die Eigenschaft clear wird von allen modernen Browsern unterstützt mit folgender Einschränkung:

Internet Explorer 6 und 7
Probleme treten häufig bei komplizierteren Layouts im Zusammenspiel der Eigenschaften clear und float auf (siehe oben).

Zum Seitenanfang

YAML

YAML ist ein (X)HTML/CSS-Framework zur Erstellung moderner und flexibler Layouts auf Grundlage von float-Umgebungen, konzipiert und entwickelt von Dirk Jesse. Dabei stehen ein möglichst hohes Maß an Flexibilität für den Webentwickler und Zugänglichkeit für die Nutzer im Vordergrund.

YAML wurde als Basis für die Entwicklung flexibler Layouts entworfen. Einer der Schwerpunkte liegt damit bei den Anforderungen, die sich aus der Arbeit mit variablen Größenangaben und der Verwendung unterschiedlicher Maßeinheiten ergeben. YAML bietet Ihnen folgende Vorteile:

  • auf Flexibilität und Barrierefreiheit ausgelegtes Layoutkonzept zur Erstellung von Spalten- und Grid-basierten CSS-Layouts,
  • umfassende Browserkompatibilität (ab IE 5.0/Win) für ein einheitliches und fehlerfreies Erscheinungsbild des Layouts in allen Situationen,
  • größtmögliche Gestaltungsfreiheit für den Webdesigner (fixe und flexible Layouts, variable Spaltenbreiten),
  • beliebige Anordnung der Inhalte im Quelltext bei spaltenbasierten Layouts,
  • effizientes Arbeiten durch funktional gegliederte Stylesheetvorlagen,
  • vielseitig einsetzbare, flexible und verschachtelbare Grid-Bausteine.

Mit der grundlegenden, spaltenbasierten Quelltextstruktur können Sie Designs mit ein bis drei Spalten (mit fixen oder flexiblen Breiten) innerhalb sehr kurzer Zeit entwickeln. Über Subtemplates (flexible Grid-Bausteine) können Sie das Spaltensystem nahezu beliebig erweitern oder alternativ zur Erstellung von Grid-Layouts verwenden. Das über den standardmäßig vorgegebenen Quelltext definierte Basislayout enthält ebenfalls Container, die die Festlegung der Layoutbreite vereinfachen und zum Beispiel grafische Umrandungen des Layouts ermöglichen.

Unter http://www.yaml.de können Sie sich das Framework genauer anschauen und herunterladen.


Abb. 7.22: YAML-Startseite

Nach der Lektüre dieses Buchs sollten Sie in der Lage sein, YAML im Rahmen eigener Projekte verwenden und auf Ihre eigenen Bedürfnisse anpassen zu können. Ich erwähne YAML an dieser Stelle, da ich kein anderes Framework kenne, das auf einem Layout aufbaut, das so intensiv Gebrauch von der Eigenschaft float macht und dabei browserübergreifend so stabil ist. Herausragend ist auch die Dokumentation: Vor allem den Artikel Die Funktionsweise von floats im Detail sollten Sie sich zur weiteren Vertiefung zu Gemüte führen.