Zwei Spalten Layout - mittiges 1024er Design mit CSS - Grundaufbau

In diesem Design-Tutorial wollen wir uns ein sehr einfaches Template mittels CSS bauen. Dabei soll es mittig ausgerichtet werden, also der Abstand von links und rechts soll gleich sein, und auf 1024er Bildschirmauflösungen angewendet werden können.

ACHTUNG: Der Inhalt ist über 4 Jahre alt und gilt damit als veraltet. Bitte suche lieber nach responsiven Templates. Ebenso solltest du HTML5 nutzen!

Als Besonderheit legen wir das Menü "Sidebar" rechts an. Dies hat den Vorteil für Leute, die noch mit 800x600 Auflösung durchs Netz geistern, aber den Content-Bereich in vollem Umfang sehen und nur zur Navigation nach rechts scrollen müssen.

Des Weiteren besitzt unser Webdesign einen Header und einen Footer.
Hier Template-Beispiel ansehen.

Schritt 1 - das HTML Grundgerüst

Dieses definieren wir zwischen < body > und < /body > in unserer HTML Seite!
<div id="tplTemplate"> <div id="tplHeader">Header</div><div id="tplContent">Unser Content Bereich..</div><div id="tplSidebar">Sidebar</div><div id="tplFooter">Footer</div></div>

Erläuterungen

tpl nutze ich als Abkürzung vor jedem Name des DIV-Elements. Dies hat den Vorteil, optisch zwischen Template und den eigentlichen Inhalt zu unterscheiden. tpl = Template.

tplTemplate
Dieses DIV-Element umfasst all unsere anderen DIV-Elemente. Dies wird zum mittigen ausrichten, sowie für die Maximalbreite benötigt.

tplHeader
Unser Kopfbereich des Templates. Darin kann dann ein Logo oder die Webseitenbeschreibung eingefügt werden.

tplContent
In diesem Element wird später der eigentliche Inhalt platziert. Content = Inhalt.

tplSidebar
Unsere rechte Navigationsleiste / Menü.

tplFooter
Das Ende der Seite, welches auch für CSS benötigt wird.. Darin können weitere wichtige Links gesetzt werden, welche so nicht ganz so offensichtlich auf der Webseite auftauchen sollen. Beispielsweise das Impressum.

Schritt 2 - alle CSS Eigenschaften und Werte

Als nächstes folgt die CSS. Darin definieren wir ein paar Farben, Größen und die Eigenschaften, wie die Elemente platziert werden sollen. Dafür nutzen wir die float-Eigenschaft. Im Footer wird das float wieder mittels clear-Eigenschaft aufgehoben.

Die Hintergrundfarben (background-color) sind kein Muss, empfehle ich zur besseren optischen Positionierung bei dem Design Aufbau allerdings sehr.

Den CSS-Teil kann man wie im Beispiel zwischen und definieren, oder auch in eine externe .css-Style Datei auslagern.
<style type="text/css"><!--html,body{padding: 0;}#tplTemplate{width: 990px;margin: 10px auto;background-color: #C0C0C0; <!-- grau -->}#tplHeader{background-color: #FF4040; <!-- rot -->}#tplContent{width: 730px;float: left;margin: 5px 0;background-color: #40FFFF; <!-- aqua -->}#tplSidebar{width: 250px;float: right;margin: 5px 0;background-color: #FFFF40; <!-- gelb -->}#tplFooter{clear: both;background-color: #4040FF; <!-- blau -->}--></style>

Erläuterung der CSS Werte

tplTemplate
Wird mit 990 Pixel breite deklariert. Dies ist dafür da, um problemlos für eine 1024er Auflösung dargestellt zu werden, ohne horizontal scrollen zu müssen. Dies sollte nicht größer als 990 Pixel breite gemacht werden, da der vertikale Scrollbalken auch noch etwas Platz benötigt.

html, body
Wir definieren einen Padding von 0, also 0 Pixel. Normal hat der body-Bereich im Browser einen eigenen Innenabstand, der allerdings unsere Templatebreite beeinflussen würde.

tplContent
Unser Content-DIV wird links mittels float ausgerichtet. Möchte man das Menü nicht links, sondern rechts haben, welchselt man float:left und float:right einfach, ebenso bei dem tplSidebar-DIV.

tplFooter
Unser Footer bekommt clear:both, da diese Eigenschaft das float:left und float:right aufhebt.

Beispiel ansehen

Alles verstanden? Hier kannst du dir das Beispiel nocheinmal ansehen. Darin sind die Farben ebenso aufgebaut, aber noch etwas mehr Textmaterial zum besseren Verständnis eingefügt worden. Hier Template-Beispiel ansehen.

Info: Dieses Beispiel wurde ersetzt durch ein modernes, responsives HTML5 Template, welches du hier live ansehen kannst.