2.1 Ganzheitliches Konzept
Wie aus dem einleitenden Kapitel bereits deutlich wird, stecken in YAML viele Vorüberlegungen, die sich anhand des Quellcodes einfacher erläutern lassen. Die hohe Flexibilität von YAML bedingt jedoch auch ein gewisses Maß an Komplexität. Daher wird in den Kapiteln das Grundkonzept von YAML unter Verwendung vieler Beispiele erläutert.
CSS zu erlernen bzw. es effektiv und fehlerfrei einzusetzen ist nur möglich, wenn man die Fallstricke kennt, die an den Wegrändern lauern. Wie im richtigen Leben ist auch bei der Arbeit mit CSS nicht immer Eitel Sonnenschein.
Der Internet Explorer sticht hier besonders heraus und bereitet Anfängern wie Profis immer wieder Kopfzerbrechen durch seine Vielzahl an CSS-Bugs. Aber Angst machen gilt nicht. Trotz dieser Bugs werden Sie sehen, dass sich auch der Internet Explorer problemlos zur fehlerfreien Darstellung moderner barrierearmer CSS-Layouts bewegt werden kann.
Im Rahmen der Dokumentation werde ich meine Erläuterungen daher nicht nur auf standardkonforme Browser stützen, sondern an entsprechender Stelle auf Probleme im Internet Explorer und mögliche Lösungswege aufzeigen. Das verstehe ich unter einem ganzheitlichen Konzept.
Lassen Sie uns beginnen ...
2.2 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 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 folgenden Abschnitt (rechte Spalte) erläutert.
2.3 Markupfreies Clearing
Der Umgang mit floats war lange Zeit sehr aufwendig, da zum Beenden des Textflusses zusätzlicher Code (Markup) benötigt wurde. Ein effektiver Einsatz von floats für Layoutzwecke war somit sehr umständlich weil man kaum um Inline-CSS herum kam. Demzufolge wurden floats in der Vergangenheit oft nur für einfachste Layoutaufgaben, wie der Ausrichtung von Bildern, herangezogen.
Mit den erweiterten Möglichkeiten von CSS 2 bzw. CSS 2.1 und der mittlerweile guten Browserunterstützung sind die Einsatzgebiete für floats nahezu grenzenlos. Der Schlüssel dazu ist das markupfreie Clearing der Fließumgebungen über CSS.
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 IE7 verlangt nach einer geringfügigen Anpassung, welche im Artikel "New clearing method needed for IE7?" erläutert wird.
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.
Der Wert auto erzeugt jedoch in einigen Browsern zu unerwünschte Scrollbalken an den Rändern des umschließenden Containers. Innerhalb des YAML Frameworks wird daher overflow:hidden; verwendet. Das Scrollbalkenproblem tritt hierbei nicht auf.
/* Clearing mit overflow */
.floatbox { overflow: hidden; }
Näheres dazu im Abschnitt 2.6: Funktionsweise von floats.
Warum zwei 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.
In Abhängigkeit davon, an welcher Stelle innerhalb des Layouts die CSS-Eigenschaft clear eingesetzt wird, kann diese global auf das gesamte Layout oder nur lokal innerhalb des Elterncontainers wirken. Eine genaue Erläuterung dazu finden Sie im Abschnitt 2.6: Die Funktionsweise von floats.
Die Overflow-Variante kommt an solchen Stellen zum Einsatz, an denen ein Clearing mit Clearfix nicht erwünscht ist (Stichwort: Globale Wirkung der Eigenschaft clear).
