KS Webdesign – Der Blog

Wir haben uns ein schönes Layout mit Kopf, zwei Spalten und Fuß gebastelt.

Die Spalten haben unterschiedliche Farben und eine unterschiedliche Textmenge bekommen.

Leider geht die Farbe der kürzeren Spalte nicht bis nach unten zum Fußbereich. Das wollen nun wir ändern.

Hier findest du die fauxcolumns_anfang.htm zum Quelltext rauskopieren.

Die benötigte Grafik kannst du dir hier holen: fauxcolumns_grafik.htm

Im Browser schaut es so aus:

Dieser oder ein ähnlicher Anblick ist euch bisher sicher nicht erspart geblieben. Euer Dokument ist valide, alle notwendigen CSS-Anweisungen sind definiert worden, aber die linke Spalte geht nicht bis nach unten.

Und watt nu??

Ganz einfach, die Lösung heißt Faux Columns Technik oder das Prinzip
der unechten Spalten.

Im vorliegenden Fall erstellt ihr mit dem Grafikprogramm eurer Wahl eine Grafik von 700px Breite (width von #umhang) und 12px Höhe (4px Höhe würden wohl auch reichen). Die Grafik bekommt im linken Teil (200px, entspricht width von #links) die Farbe der linken Spalte und im rechten Teil (500px, entspricht width von #rechts) die Farbe der rechten Spalte.

Die erstellte Grafik wird nun einem Element als Hintergrundgrafik zugewiesen, das die Webseite komplett umschließt: #umhang

CSS ergänzen:

Jetzt schaut es so aus:

Die gute Nachricht ist, das die Spalten jetzt optisch gleichlang sind, die Schlechte das #kopf gleich mit eingefärbt wurde.

Das ist aber kein wirkliches Problem. #kopf hat keine Hintergrundfarbe zugewiesen bekommen, was wir sofort nachholen.

CSS ergänzen

Das Ergebnis:

Die Faux Columns Technik ist weit verbreitet und relativ einfach anzuwenden. Es gibt noch andere Techniken um optisch gleichlange Spalten zu erzeugen, diese sind aber in der Anwendung aber deutlich komplizierter.