Vertikale Ausrichtung: Die Eigenschaft vertical-align

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

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

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

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.

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

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.

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>

Abb. 7.21: Zusammenspiel der Eigenschaften clear und float

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.