15.05.2008
Faux Columns bei flüssigem Layout
In dieser Anleitung wurde beschrieben, wie man bei einem fixen Layout mit Hilfe von "Faux Columns" die Spalten auf gleiche Länge bringt.
Was jedoch, wenn wir ein flüssiges Layout mit prozentualen (relativen) Spaltenbreiten haben? Hier können wir keine pixelgenauen Grafiken gebrauchen. Dennoch lassen sich auch bei einem flüssigen oder flexiblen Layout falsche Spalten erzeugen.
Das vorweggenommene Ergebnis könnt ihr auf der Demo-Seite sehen und ausprobieren, indem ihr die Fensterbreite variiert.
Einzige Prämisse: Wir müssen eine maximale Bildschirmbreite unterstellen. Im Beispiel gehe ich von 2.000px aus, was bei den gängigen Bildschirmbreiten ausreichen sollte. Ihr könnt zur Sicherheit aber auch noch größere Werte verwenden.
Im Beispiel soll die Seite so aufgeteilt werden, dass die linke und rechte Spalte jeweils 25% der Bildschirmbreite einnehmen. Für den mittleren Contentbereich verbleiben folglich 50%.
Den body als Bezugselement setzen wir auf 100% Breite und Höhe; außerdem die Außen- und Innenabstände auf "0":
body
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
Für jede Spalte wird nun eine Grafik von 2.000px Breite benötigt. Für die Höhe reichen 5px aus. Die Grafiken müssen einen transparenten Hintergrund haben und deshalb im GIF-Format abgespeichert werden.
Fertigt euch nun mit einem Grafikprogramm wie z.B. Ulead Photo Impact X3
Da die linke Spalte 25% breit sein soll, ergibt dies bei 2.000px Gesamtbreite einen Bereich von 500px (25% aus 2.000px Gesamtbreite = 500px). Diesen Bereich füllt ihr mit einer Hintergrundfarbe eurer Wahl. Ich habe die Grafik mit "links.gif" bezeichnet.
Nun weisen wir diese Grafik als Hintergrund einem #wrapper1 zu, der die Hülle für die linke Spalte bilden soll. Die Position dieser Hintergrundgrafik soll sich in der oberen linken Ecke befinden und sie soll sich nur vertikal kacheln.
Dies führt zu folgenden CSS-Angaben:
#wrapper1
{
background-image: url(links.gif);
background-position: 0 0;
background-repeat: repeat-y;
}
Entsprechend verfahren wir für den mittleren Contentbereich. Auch hier ist die Grafik wieder 2.000px breit. Hier füllen wir den mittleren Teil auf 1.000px Breite (50%) mit der gewünschten Hintergrundfarbe. Links und rechts bleibt folglich ein freier, transparenter Bereich von je 500px. Speichert diese Grafik als "mitte.gif" ab.
Wir ordnen sie einem #wrapper2 als Hintergrundgrafik zu. Ihre Position soll jedoch zum linken Bildschirmrand einen Abstand von 25% (entsprechend der Breite der linken Spalte) haben:
#wrapper2
{
background-image: url(mitte.gif);
background-position: 25% 0;
background-repeat: repeat-y;
}
Schließlich wird noch eine dritte Hintergrundgrafik für die rechte Spalte benötigt. Der linke Bereich dieser Grafik ist zu 1.500px transparent, der rechte enthält auf eine Breite von 500px die gewünschte Hintergrundfarbe. Diese Grafik ist nun 75% vom linken Bildschirmrand entfernt:
#wrapper3
{
background-image: url(rechts.gif);
background-position: 75% 0;
background-repeat: repeat-y;
}
Die im Beispiel verwendeten Grafiken könnt ihr euch downloaden:
Linksgrafik
Mittegrafik
Rechtsgrafik
Die einzelnen Inhaltsboxen ordnen wir nun mit "float: left;" nebeneinander an. Ihre Breiten sind um den doppelten (links und rechts) Paddingwert kleiner als die des entsprechenden Wrappers:
#linksbox
{
float: left;
width: 23%;
padding: 1%;
}
#content
{
float: left;
width: 48%;
padding: 1%;
}
#rechtsbox
{
float: left;
width: 23%;
padding: 1%;
}
Im HTML-Teil wird das Ganze so eingebunden:
<div id="wrapper1">
<div id="wrapper2">
<div id="wrapper3">
<div id="linksbox">...</div><!--Ende #linksbox-->
<div id="content">...</div><!--Ende #content-->
<div id="rechtsbox">...</div><!--Ende #rechtsbox-->
<div style="clear: left;"></div>
</div><!--Ende #wrapper3-->
</div><!--Ende #wrapper2-->
</div><!--Ende #wrapper1-->
Abschließend nun noch mal das Endergebnis unserer "falschen Spalten bei flexiblem Layout".