- Hinweise zu den Tutorials:
- Bitte aus dem kopierten Quelltext:
<p class="bitte_loeschen">.....</p>und die Gestaltungsanweisungen dazu entfernen.
Faux Columns Technik
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:
#umhang {background:blue url(fauxcolumns.png) repeat-y left top;}
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
#kopf { background-color:#a99108; }
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.
- Kategorien:
- XHTML/CSS
- Tags:
- Faux Columns, gleichlange Spalten
- Kommentare:
- Kommentare verfolgen oder Kommentar abgeben
[...] Faux Columns Technik für feste Layouts hatte ich schon in einem Artikel [...]
[...] [...]
[...] [...]
[...] [...]
[...] [...]
[...] brauchst du wohl die Faux Columns Technik. Kleiner Tip am Rande: Stell ein Beispiel immer so ein, das es den Fehler zeigt, sonst verwirrt [...]
[...] [...]
[...] Faux Columns Technik __________________ MfG Jens [...]
[...] [...]
[...] Thielo hat dir schon den richtigen Tip gegeben. Mit Faux Columns macht man so etwas. Hier mal ein Tutorial zum Durcharbeiten. Vielleicht kommst du damit besser zurecht. Ach ja, Faux Columns Liquid gibt es auch noch. [...]