Diese Seite ist noch nicht ganz fertig.

CSS-Layout

Viele moderne Seiten haben kein herkömmliches Tabellen-Layout mehr, sondern ein so genanntes CSS-Layout.
Bei dieser Methode beinhaltet die HTML-Seite nur noch reinen HTML-Code. Die gesamte Gestaltung wird durch CSS in einer eigenen Datei vorgenommen.

Um klar zu machen, wie das funktioniert, hier ein und dieselbe Homepage in zwei Erscheinungen:

Die Schulhomepage des Gymnasiums Scheinfeld mit CSS-Layout - so sieht man sie normalerweise:



Das ist dieselbe Seite in reinem HTML, ohne die Verknüpfung mit der CSS-Datei.

Du siehst also: Die vom Browser aufgerufene HTML-Datei enthält nur HTML-Tags, die den Elementen der Seite bestimmte Styles zuweisen. Die Definition der Styles findet in der CSS-Datei statt. Das betrifft auch die Positionierung von Textblöcken auf der Seite, also die Festlegung des Ortes, an dem z.B. die Navigation auf der Seite erscheinen soll.

Die DIV-Container

Eine solche Positionierung erreicht man über so genannte DIV-container. Sie werden in der CSS-Datei mit dem Zeichen # und einem Namen markiert:

#navi { style-Definitionen }

Im Quelltext der HTML-Datei wird auf diese DIV-Container mit dem Tag:

<div id="navi"></div>

Die verschiedenen Container der Homepage des Gymnasiums Scheinfeld siehst du hier:

Für das Layout könnte man auch Klassen (<class="">) verwenden, es habe sich aber ids eingebürgert, da diese normalerweise nur einmal pro Seite eingesetzt werden sollten, wohingegen Klassen häufiger vorkommen können.

Schauen wir uns die Positionierung des DIV-Containers für den Kopf der Seite einmal genauer an:

#kopf { position: relative; text-align:right; height:120px; padding:0px; margin:0px; width: 780px; background:#C4CEDC url(grafik/kopf_bg1.gif) top left no-repeat; }

#kopfnav { position:absolute; top:98px; right:20px; height:21px; text-align: right; padding:0px; margin:0px; }

Im Quelltext der HTML-Datei findet sich folgendes:

<div id="kopf"><h1 class="hidden">Gymnasium Scheinfeld</h1><div id="kopfnav"><a href="index.html">Home</a> | <a href="kontakt.html">Impressum</a></div></div>

Zurück zur Startseite