In diesem Tutorial soll Ihnen eine Möglichkeit gezeigt werden, wie man mit Div Tags drei gleiche lange Spalten hinbekommt. Das eigentlich unmögliche lässt sich mit einem einem simple Trick namens Faux Columns möglich machen.

Benötigt werden dafür Grafiken, die man mit einem Bildbearbeitungsprogramm wie Gimp erstellen kann.

Schritt 1

Erstellen Sie eine HTML Datei mit dem HTML Grundgerüst. Was in etwa so aussehen müsste:

Der Doctype kann variieren, der gezeigte wäre eine gute Lösung, da man mit ihm kaum Fehler macht und gut HTML lernen kann. Auch wurde der Link zur CSS Datei gemacht, auch hier kann der Pfad, in diesem Fall css/style.css, unterschiedlich sein und muss angepasst werden.

Der Meta-Tag sagt welche Zeichen erlaubt sind, mit diesem sind alle Zeichen aus dem Deutschsprachigem Raum erlaubt. Nun kommt der Header dran.

Schritt 2

Den Header kann man am besten leicht mit einem Div Tag erstellen. Es macht Sinn den Div’s id’s oder Klassen (class) zuzuweisen, damit man diese leicht in der CSS Datei definieren kann und es zu keine Verwechselungen kommt. Sie können den Header jetzt mit CSS designen:

Der Stern (*) ist ein Universal Selektor. Mit dem sagen Sie das alle Tags ohne eine margin oder padding Angabe immer margin: 0; und padding: 0; sind. HTML und Body bekommen height: 100%; damit der Footer, der später kommt, immer am unterem Rand bleibt, dann definieren Sie den p Tag, dass kann man ohne bedenken ganz individuell machen.

Ich habe die gut zu lesende Arial Schrift und die Schriftgröße 1em gewählt. 1em entspricht 16px hat, aber denn Vorteil, dass der Webseiten Besucher im Browser die Schriftgröße verändern kann. Für Sehbehinderte Menschen ist das ein Segen und sie sorgen dafür, dass das Web etwas barrierefreier wird. Auch wurde der Header definiert. Der Code sollte selbsterklärend seien.

Mit width: 100%; nimmt Header die volle Breite eine, mit background-color: #040404; wird der Header grau und mit height: 100px; wird der Header 100px hoch

Schritt 3

Erstellen Sie nun Grafiken für die 3 Spalten oder nehmen Sie die unten aufgeführten. Ich erstelle nur zwei, eine für die Navigation und eine für die Sidebar. Der Content (Der Content ist der Hauptbereich einer Webseite) bleibt weiß damit die Schrift gut zu lesen ist. Die jetzt folgenden Grafiken dürfen sie gerne auch für Ihre Webseite verwenden.

Grafiken:

Navigation

Navigation

200×5

Sidebar

Sidebar

200×5

Schritt 4

Jetzt können Sie die Navigation erstellen und gestallten, dafür sollten Sie ein Div Tag erstellen mit der id=navi. Umhüllen sie dieses Div wiederum mit einem weiterem Div mit der id wrapper. Der HTML Code müsste folgendermaßen aussehen:

Gestalten Sie nun die Navigation mit Css, damit der Trick mit den Spalten aufgeht, müssen sie body das Hintergrundbild für die Navigation zuweisen und mit repeat-y dafür sorgen, dass sich das Hintergrundbild vertikal wiederholt, was für die Faux Columns erforderlich ist.

Der Pfad zu dem Bild ist bei jedem unterschiedlich und kann nicht einfach übernommen werden. Die Navigation wird 200px breit, 100% hoch und mit float : left am linken Browserrand platziert. Jetzt müssten sie diesen Code zu ihrer Css Datei hinzugefügt haben:

Die rechte Spalte wird genau so wie die linke erstellt.

Die HTML Datei:

Das wird zur CSS Datei hinzugefügt

Schritt 5

Der Content Bereich ist leicht zu erstellen, einfach ein div id=content nach der sidebar hinzufügen, mit margin für die richtigen Außenabstände sorgen ( die Reihenfolge bei den Zahlen ist oben, rechts, unten, links ) und die Höhe auf 100% setzen

Der jetzige HTML Code:

Das wird zur CSS Datei hinzugefügt:

Schritt 6

Zum Schluss kommt der leicht zu erstellende Footer dran außerdem erstellen wir ein neues <div> vor dem Ende des Wrappers und clearen es auf beiden Seiten, dass sorgt dafür, dass das Layout in allen Browsern korrekt angezeigt wird.

Das Div id=footer wird vor dem schließenden Body Tag hinzugefügt und ihm folgende CSS Eigenschaften geben: width: auto; für die maximale Breite, height: 2em; für die richtige Höhe und background-color: #404040; für ein schönes Grau.

Der fertige HTML Code