4.5 Subtemplates

Mit dem blanken Layout ist die Webseite natürlich noch nicht fertig. Auch die Inhalte müssen entsprechend formatiert werden. Dabei besteht an vielen Stellen die Notwendigkeit, kurze Inhaltsabschnitte nebeneinander anzuordnen, wobei es sich nicht um Tabellendaten handelt. Ein Beispiel dafür ist der Teaser auf der Startseite von www.yaml.de.

Für diese Zwecke bietet YAML so genannte Subtemplates. Das sind XHTML-Codebausteine, welche eine horizontale Gliederung von Inhalten innerhalb einer Spalte ermöglichen. Diese Bausteine basieren auf ineinander floatende DIV-Boxen.

Hinweis: Alle erforderlichen CSS-Definitionen für die Subtemplates befinden sich in der Datei base.css. Die Anpassungen für das korrekte automatische Clearing im Internet Explorer befinden sich in der Datei iehacks.css. Subtemplates sind in die Grundbausteine des Frameworks integriert und stehen somit in allen Layoutvariationen zur Verfügung.

Subtemplates können ineinander geschachelt werden. Dadurch lässt sich die Raumaufteilung nahezu beliebig variieren.

Struktueller Aufbau

Der Aufbau eines solchen Codebausteins soll exemplarisch an einem einfachen Beispiel erläutert werden. Hier der erforderliche XHTML-Code für eine 50/50 Teilung, also eine Aufteilung in zwei gleich große, nebeneinander liegende Blöcke.

...

		<!-- Subtemplate: 2 Spalten mit 50/50 Teilung -->
          

			<div class="subcolumns">

			  <div class="c50l">

			    <div class="subcl">

			      <!-- Inhalt linker Block -->

			      ...

			    </div>

			  </div>

		  

			  <div class="c50r">

			    <div class="subcr">

			      <!-- Inhalt rechter Block -->

			      ...

			    </div>

			  </div>

			</div>

      ...

Soweit der Überblick. Nun der genaue Blick in die Details.

Der Container

Ein Subtemplate wird immer durch einen DIV-Container der Klasse .subcolumns umschlossen.

<!-- Subtemplate: 2 Spalten mit 50/50 Teilung --> 

		<div class="subcolumns">

		...

		</div>

In der Datei base.css erhält dieser Container folgende Basis-Eigenschaften, die nicht verändert werden sollten.

.subcolumns { 

		  width: 100%;

		  padding: 0 1px 0 1px;

		  margin: 0 -1px 0 -1px;

		  overflow: hidden;

		}

Die Breite des Containers beträgt immer 100 Prozent. Durch diese Vorgabe schließt der Internet Explorer die Inhalte automatisch ein. Alle anderen Browser benötigen dazu die Eigenschaft overflow:hidden (siehe Abschnitt 2.3: Markupfreies Clearing).

Der Kniff mit dem 1 Pixel breiten Padding und gleichzeitigem negativen Margin von 1 Pixel sorgt dafür, dass im Internet Explorer keine Rundungsfehler bei der Raumaufteilung auf Prozentbasis entstehen und zusammengehörige Blöcke immer nebeneinander platziert werden.

Hinweis: Der Netscape 7.x hat Probleme bei der Darstellung der Subtemplates. Allerdings wird dieser Browser aufgrund seiner vielen CSS-Bugs von YAML nicht offiziell unterstützt. Wenn Sie dennoch die Netscape7-Kompatibilität der Subtemplates in ihr Layout integrieren möchten, so finden Sie Im Abschnitt 5.3: Bekannte Probleme einen entsprechenden Workaround.

Die Raumaufteilung über DIV-Blöcke

Die Teilung erfolgt über die DIV-Blöcke mit den CSS-Klassen c50l und c50r. Das "c" steht dabei für column (Spalte), die Zahl 50 für 50 Prozent und die Buchstaben "l" und "r" für links- bzw. rechts-floatende Blöcke.

<!-- Subtemplate: 2 Spalten mit 50/50 Teilung
          --> 

		<div class="subcolumns">

		  <div class="c50l">

		  ...

		  </div>

		
		  <div class="c50r">

		  ...

		  </div>

		</div>

In der Regel bilden zwei Blöcke (ein linker und ein rechter) ein Paar. In der Summe sollte die Breite aller eingesetzten Blöcke innerhalb eines Subtemplates 100 Prozent betragen. Die folgenden Teilungsverhältnisse stehen als CSS-Klassen zur Verfügung:

50% / 50% Teilung (Klassen c50l und c50r)
33% / 66% Teilung (Klassen c33l und c66r sowie c66l und c33r )
25% / 75% Teilung (Klassen c25l und c75r sowie c75l und c25r )
Goldener Schnitt (Klassen c38l und c62r sowie c62l und c38r )

Die Klassendefinitionen finden sich in der Datei base.css.

.c50l, .c25l, .c33l, .c38l, .c66l, .c75l, .c62l {float: left; overflow:
        hidden; }

		.c50r, .c25r, .c33r, .c38r, .c66r, .c75r, .c62r {float: right; overflow: hidden;
		}

		

		.c25l, .c25r { width: 24.999%; }

		.c33l, .c33r { width: 33.333%; }

		.c50l, .c50r { width: 49.999%; }

		.c66l, .c66r { width: 66.666%; }

		.c75l, .c75r { width: 74.999%; }

		.c38l, .c38r { width: 38.196%; } /* Goldener Schnitt */

		.c62l, .c62r { width: 61.803%; } /* Goldener Schnitt */

Damit lassen sich - zunächst ohne Verschachtelung - folgende Raumaufteilungen bilden:

class="c75l"

class="c25r"

class="c66l"

class="c33r"

class="c62l"

class="c38r"

class="c50l"

class="c50r"

class="c38l"

class="c62r"

class="c33l"

class="c66r"

class="c25l"

class="c75r"

class="c33l"

class="c33r"

Die Blöcke können beliebig tief ineinander verschachtelt werden, um einzelne Blöcke wiederum in kleinere Abschnitte zu unterteilen.

Die Inhaltscontainer

Wie schon bei den Layoutspalten des YAML-Frameworks übernimmt der äußere Container (z.B. die DIV-Blöcke c50l und c50r) die Raumaufteilung, während über die inneren Container subc, subcl bzw. subcr die Randabstände der Inhalte (Randabstände, Rahmen usw.) geregelt werden.

 <div class="subcolumns">

			  <div class="c50l">

			    <div class="subcl">

			      <!-- Inhalt linker Block -->

			      ...

			    </div>

			  </div>

			

			  <div class="c50r">

			    <div class="subcr">

			      <!-- Inhalt rechter Block -->

			      ...

			    </div>

			  </div>

			</div>

.subc { padding: 0 0.5em 0 0.5em; overflow:
			hidden; }

			.subcl { padding: 0 1em 0 0; overflow: hidden; }

			.subcr { padding: 0 0 0 1em; overflow: hidden; }

Die Endbuchstaben "l" und "r" stehen wiederum für Inhaltsblöcke am linken oder rechte Rand des Subtemplates. Dies hat Einfluss auf die Innenabstände (padding). Für Inhaltsblöcke, die sich nicht in Randlage befinden (z.B. der mittlere Block einer 33/33/33 Teilung), steht der Container subc zur Verfügung, der ein beidseitiges Padding besitzt.

Damit die Spalten wirklich gleichgroß werden, muss bei der Festlegung der Paddins für die Inhaltscontainer subc, subcl und subcr darauf geachtet werden, dass die Summe der jeweils vergebenen Paddings gleich groß ist. Da subcl und subcr jeweils ein einseitiges Padding von 1em erhalten, muss das beideseitige Padding von subc in der Summe ebenfalls 1em ergeben. Also erhält subc ein linkes und reches Padding von jeweils 0.5 em.

Beispiele für die Anwendung von Subtemplates

Die nachfolgenden Beispiele zeigen exemplarisch die einfache Anwendung sowie die Möglichkeiten zur Verschachtelung von Subtemplates. Schauen Sie sich den Quelltext dieser Beispiele an, um sich mit der Vorgehensweise vertraut zu machen.

50 / 50 Teilung

Block 1: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. ...

Block 2: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. ...

33 / 33 / 33 Teilung

Block 3: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, ...

Teilung nach dem Goldenen Schnitt

Endlose Vielfalt durch Schachtelung

Subtemplates können beliebig ineinander geschachtelt werden, so dass sich beinahe beliebige Raumaufteilungen ergeben. Einzige Bedingung: Innerhalb einer Schachtelungsebene sollte die Summe der Blöcke immer 100 Prozent ergeben.

Das nachfolgende Beispiel zeigt exemplarische eine solche Schachtelung. Innerhalb des linken 50%-Blocks werden zwei weitere 50%-Blöcke platziert. Der rechte 50%-Block wird nach dem Goldenen Schnitt nochmals unterteilt.

Block 3: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, ...

Block 4: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein ...

Alternatives Layoutkonzept

Dem klassischen Mehrspaltenlayout mit Header und Footer sieht man seine Verwandtschaft - die Tabelle - auf den ersten Blick an. Das Spaltenkonzept ist bewährt und bietet mit der Umsetzung innerhalb des YAML-Frameworks eine hohe Flexibilität.

Doch das Konzept hat seine Grenzen und die globale Raumaufteilung in 2 oder 3 Spalten zusammen mit Kopf- und Fußzeile ist nicht überall praktikabel. In der YAML Version 2.4 wurden daher Subtemplates eingeführt. Doch genau genommen steckt dahinter weit mehr. Die Subtemplates lassen sich nicht nur innerhalb der Inhaltsspalten einsetzen.

Vielmehr stellen sie neben dem klassischen Mehrspaltenlayout ein extrem vielseitiges Werkzeug für eine viel freiere Layouterstellung dar. Durch die Möglichkeit der Schachtelung der Subtemplates lassen sich beinahe beliebige Raumaufteilungen realisieren.

»»» Abschnitt 4.6: Minimale & Maximale Breiten