Zugabe: Faux Columns

Ihr wisst mittlerweile, dass Blockelemente immer die Höhe ihres Inhalts annehmen, sofern ihre Höhe nicht definiert ist.
Deshalb haben auch Menue und Inhalt unterschiedliche Höhen, was bei unterschiedlichen Hintergründen nicht immer schön aussieht. Ihr könntet ihnen nun jeweils die gleiche Höhe zuweisen um dieses Problem zu beheben.
Aber ein solcher Wert ist nicht von großem Nutzen, wenn ihr den Inhalt ausweitet oder verkürzt, die Schriftgröße ändert, später eventuell noch Grafiken einfügt, oder die Besucher andere Bildschirmauflösungen haben, als bei eurer Seitenentwicklung verwendet.
Wir lösen das Problem mit "faux-columns"
Weil ihr bisher alle so fleißig wart, hab ich euch diese Arbeit mal ausnahmsweise abgenommen, ihr könnt das aber gerne auch selbst probieren:

Zu diesem Zeck habe ich euch die Hintergrundgrafik fauxclumn.gif gebastelt.

fauxcolumn.gif

Sie ist wie unser wrapper insgesamt 750 px breit. Für die Höhe habe ich 20px gewählt; selbst ein Wert von 1px würde seinen Zweck erfüllen, da die Grafik ja gekachelt wird.

Ich habe als Hintergrund eine Grafik mit 150px von grün nach weiß verlaufend (entspricht der Menue-Breite 140px + 10px margin) und eine weitere mit 600px von weiß nach gelb verlaufend (entspricht der Rest-Breite) eingefügt. Mit einem geschickten Farbverlauf kann man hier dank PI (PhotoImpact) oder einem anderen Bildbearbeitungsprogramm sehr gute Effekte erzielen, so dass die Trennung zwischen Navi und Content nicht auffällt.

Löscht jetzt einmal aus #menue und #inhalt jeweils die background-color.
Löscht aus dem wrapper noch den blöden Text "Ich bin der Wrapper".
Fügt in den #wrapper die Grafik "fauxcolumn.gif" als Hintergrundgrafik ein.

Die Wirkungsweise dieser "Zaubergrafik" ist folgende: Weil der "wrapper" die jeweils größte Höhe eines seiner Inhaltselemente annimmt (das kann sowohl "#menue" als auch "#inhalt" sein) dehnt er sich über beide Container entsprechend aus. Mit ihm auch die gekachelte Hintergrundgrafik.

Abschlussarbeit
Fertig und alles richtig? Glückwunsch!
Dann sollten wir jetzt mal unsere Seiten vergleichen.
Wenn jeder nach Anleitung gearbeitet hat, sollten die Ergebnisse auch gleich aus sehen.
Meine Seite sieht so aus wie links abgebildet. Wer sich den HTML- und CSS-Code noch einmal anschauen möchte, wird hier fündig.

Kommen wir aber nun endgültig zum Schluss unseres CSS-Einsteigerkurses.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: