26.09.2010
Layout-Varianten
Der Vorteil von CSS besteht ja (unter anderem) darin, dass man für ein und den selben HTML-Quelltext verschiedene Layouts gestalten kann.
Aus diesem Grund sollte der Quelltext vorher sinnvoll durchdacht, strukturiert und aufgebaut sein.
Alles Weitere wie Farben, Anordnung oder Positionierung wird dann per CSS-Styleangaben vorgenommen.
Im Nachfolgenden soll demonstriert werden, wie das funktioniert, bzw. wie sich die Wirkungsweise einiger weniger CSS-Änderungen auf die Seitendarstellung auswirkt.
Ich verwende zu diesem Zweck immer den vollkommen identischen HTML-Code, der recht spartanisch aufgebaut ist:
<div id="wrapper">
<h1>Homepage-Titel</h1>
<ul id="menu">
<li class="first"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
<div id="content">
<h2>Seitentitel</h2>
<p>
Hier steht der Inhaltstext für unsere erste Seite.
</p>
</div><!-- Ende #content-->
<p class="impress">
<a href="#">Impressum</a> | <a href="#">Kontakt</a>
</p>
</div><!--Ende #wrapper-->
Lediglich die CSS-Angaben werden an verschiedenen Stellen nur geringfügig verändert. Daraus resultieren die nachfolgenden vier Layout-Varianten:
Demo 1: Zweispaltiges Layout mit vertikaler Navi linksDemo 2: Zweispaltiges Layout mit vertikaler Navi rechts
Demo 3: Einspaltiges Layout mit horizontaler Navi
Demo 4: Einspaltiges Layout mit manuell zentrierter horizontaler Navi
Erläuterungen zum CSS-Code möchte ich mir an dieser Stelle sparen; ihr könnt ja über die Quelltextansicht eures Browsers selbst nachsehen und erforschen, an welchen Stellen sich die vier Layoutbeispiele unterschieden.
Experimentiert also auch mal selbst und probiert unterschiedliche Layouts mit ein und dem selben HTML-Quelltext aus. Verwendet hierzu auch unterschiedliche Schrift- oder Hintergrundfarben. Aber treibt es nicht zu bunt, sonst lenken die Farben vom eigentlichen Inhalt ab.