Fließende Positionierung mit CSS


Während man früher als Webdesigner häufig schon beim Codieren dran denken musste, wo welches Element auf der fertigen Seite hin soll, kann man sich durch die Verwendung von Cascading Style Sheets (CSS) viel Zeit und Nerven sparen und Dinge dynamisch positionieren.

Betrachtet man die Elemente einer Internet-Seite so stellt man fest, dass die Informationen darauf in verschiedene Themenbereiche gegliedert sind. Dies hat sich durch die Zeit so eingebürgert und so erwartet es der moderne Internet-Nutzer auch. Gedanklich kann man diese Themenkreise auch als für sich allein stehende Blöcke verstehen: der obere Bereich einer Seite mit dem Logo und dem Namen der Website (oder dem Firmennamen) wäre ein Block, die Navigation ein weiterer. Der Bereich einer Seite, der den Content aufnehmen soll, wäre der Dritte, der untere Raum, mit Verknüpfungen zu Kontakt, Impressum und Disclaimer etc. wäre ebenfalls ein Bereich. Darüber hinaus kann man die Struktur einer Seite natürlich noch verfeinern, was aber an dieser Stelle zu weit führen würde.

Bevor die Verwendung von CSS allgemein verbreitet war, wurde häufig auf Tabelle zurückgegriffen, um diese Bereiche zu definieren, allerdings lief man dann Gefahr, bei späteren Änderungen großflächig Code-Blöcke verschieben zu müssen – was widerum bereits sehr oft der Ausgangspunkt einer langwierigen Fehlersuche war, wenn man beim hin- und herschieben einzelne Codezeilen übersehen hat.

Hier bieten die DIV-Container eine Abhilfe. Legt man um jeden der vorher bezeichneten Bereiche ein div-Tag und gibt diesem auch eine aussagekräftige ID, dann kann man das Element als Ganzes per CSS positionieren und erspart sich damit einen Haufen Ärger.

<div id=“head“>
<h1>Name der Seite</h1>
</div>

<div id=“navi“>
<h2>Navi</h2>
</div>

<div id=“content“>
<h2>Content</h2>
</div>

<div id=“footer“>
<h2>Footer</h2>
</div>

Das Positionieren erfolgt nun im (zumeist) ausgelagerten Stylesheet, welches man mit der Zeile <link rel=”stylesheet” type=”text/css” media=”all” href=”pfad_zum_stylesheet/style.css” /> innerhalb der <head>…</head> anbindet.

Durch Angabe von Container-Breite, Container-Höhe, Position horizontal, Position vertikal etc. lassen sich nun die DIV-Blöcke auf der Seite unterbringen. Hier ein Beispiel wie das Stylesheet aussehen könnte:

#head {width:90%; border:3px dotted #999; clear:all;}
#navi {width:30%; float:left; clear:right; border:3px dotted #999; }
#content {width:57%; float:left; clear:right; border:3px dotted #999; }
#footer {width:90%; clear:all; border:3px dotted #999; }

Das fertige Template

Das fertige Template

897 mal gelesen seit 14. Oktober 2011