XHTML Struktur
2.1 Die Grundlage: floats
Wird
ein Objekt (z.B. ein Bild oder ein Tabelle) als Fließobjekt
deklariert, so wird es aus dem normalen Textfluss (inline) herausgelöst
und statt dessen vom nachfolgenden Text wie ein Hindernis in einem
Strom umflossen. Für diese Art der Positionierung von Objekten wird lediglich
die links- oder rechtsbündige
Lage im Text (float:left; oder float:right;)
vereinbart. Der Browser kümmert sich anschließend
selbstständig
um die korrekte Platzierung der Inhalte um das Fließobjekt herum.
Hinweis: Um die Funktionsweise von floats (Fließumgebungen) besser zu verstehen, sollten Sie sich mit der Theorie beschäftigen. Empfehlenswert ist hierfür der Artikel "Floats: Die Theorie". Bei diesem Artikel handelt es sich um die deutsche Übersetzung von Andreas Kalt und Jens Grochtdreis des englischen Originals "Float: The Theory" von von Big John.
Insbesondere bei flexiblen Spaltenbreiten erweisen sich in den Text eingebettete Fließobjekte als vorteilhaft, da der Browser den Textumbruch selbstständig festlegen und die Inhalte optimal innerhalb der Spalte anordnen kann.
Die Aufhebung des Textflusses erfolgt z.B. mit der CSS-Eigenschaft clear:Wert; (Beschreibung). Nachteilig dabei ist, dass entsprechend der Funktionsweise des Textflusses gemäß W3C Definition dieser nicht automatisch, z.B. bis zum Ende des laufenden Absatzes oder der nächsten Teilüberschrift, gestoppt werden kann.
Zur Aufhebung des Textflusses ist daher im Regelfall zusätzlicher und daher auch optisch sichtbarer HTML-Code erforderlich. Üblich ist der Einsatz leerer p- oder hr-Tags. Praktisch ist dies jedoch ganz sicher nicht.
<p style="clear:left;"> </p>
Für die Layoutgestaltung ist dies besonders nachteilig, da solcher, für das Layout "unnützer" HTML-Code vom Browser dargestellt wird und somit im Layout ungewollte vertikale Abstände erzeugt.
Durch den gezielten Einsatz von CSS lässt sich dieser Nachteil umgehen und macht Fließumgebungen für die Layoutgestaltung interessant. Im Frühjahr 2005 beschäftigten sich mehrere Webdesigner mit diesem Thema und veröffentlichten interessante Ideen.
Zwei dieser markupfreien Methoden zum Clearen von Fließumgebungen kommen in YAML zum Einsatz. Die beiden Methoden werden im Abschnitt 2.3: Markupfreies Clearing (siehe rechte Spalte) erläutert.
2.2 Vom <div> zum Layout
Wie aus dem einleitenden Kapitel bereits deutlich wird, stecken in YAML viele Vorüberlegungen, die sich anhand des Quellcodes einfacher erläutern lassen. Die Flexibilität von YAML erfordert jedoch auch eine gewisse Komplexität im Quelltext. Daher wird in den folgenden Abschnitten das Grundkonzept anhand der beispielhaften Erstellung des von YAML bereit gestellten Basis-Layouts (einem 3-Spalter) erläutert.
CSS-Layouts gibt es viele. Allerdings handelt es sich in der Regel um die Bereitstellung eines speziellen Screen-Layouts. Die wenigsten genügen den in der Einführung beschriebenen, umfangreichen Entwurfskiterien, denen YAML unterworfen wurde.
Dass es besser geht, dem werden Sie mir am Ende dieses Tutorials vielleicht zustimmen. Nacheinander werden die einzelnen Bestandteile von YAML vorgestellt und wichtige Details ausführlich besprochen. Viel Spaß dabei.
2.3 Markupfreies Clearing
Methode 1: Clearfix
Die Clearfix Methode entstammt Big Johns Artikel "How To Clear Floats Without Structural Markup", der die von Tony Aslett [csscreator.com] entwickelte clearing Methode in einem ausführlichen Tutorial erläutert. Eine deutsche Übersetzung dieses Tutorials gibt es hier.
/* Clearfix-Hack */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Der Hack wird ohne Änderungen übernommen. Näheres dazu im Abschnitt 2.6: Funktionsweise von floats.
Methode 2: Overflow
Eine weitere und vor allem sehr einfache Methode zeigt Paul O'Brien auf. Sie wird in dem Artikel Simple Clearing of Floats ausführlich erläutert.
Hierbei bekommt das kapselnde DIV die CSS-Eigenschaft overflow:auto; zugewiesen. Diese Methode hat sich insbesondere bei der Kapselung von Fließumgebungen innerhalb der Content-Spalten als robust erwiesen.
/* Overflow-Hack */
.floatbox { overflow: hidden; }
Ich setze in YAML overflow:hidden; ein, welches ebenso funktioniert. Näheres dazu im Abschnitt 2.6: Funktionsweise von floats.
Warum zwei verschiedene Clearing-Methoden?
Die Frage ist durchaus berechtigt und hat eine ebenso klare Antwort. Obwohl beide Methoden prinzipiell zum selben Ergebnis führen, dass das Elternelement die Fließumgebung einschließt, ist die technische Funktionsweise verschieden. Beide Varianten werden innerhalb von YAML an unterschiedlichen Stellen angewandt.
Wir befinden uns hier jedoch am Anfang des Tutorials. Eine detailliertere Antwort folgt im Abschnitt 2.7: Der Clou.
