Die Faux Columns Technik für feste Layouts hatte ich schon in einem Artikel erklärt.
Aber wie erzeugen wir gleichlange Spalten für flüssige Layouts, d.h. wo die Spaltenbreiten
Prozentwerte sind (rechts 25%, mitte 50%, links 25% z.B.) ?
Das ist nicht viel schwieriger als die normale Faux Columns Technik.
Hier findest du die fauxcolumns_liquid_anfang.htm zum Quelltext rauskopieren.
Die benötigten Grafiken kannst du dir hier holen: fauxcolumns_liquid_grafik.htm
Achtung!! Die zweite Grafik seht ihr erst, wenn ihr nach rechts scrollt
Im Browser schaut es noch so aus:
Die XHTM-Struktur ist folgende:
<div id="umhang"><div id="kopf"><h1>Liquid Faux Columns</h1></div><div id="zentral"><div id="links"><p>........</p></div><div id="textbereich"><p>.............</p></div><div id="rechts"><p>..............</p></div><hr class="clear" /></div><-- Ende div#zentral --></div><-- Ende div#umhang -->
div#umhang umschließt alle Bereiche innerhalb von body.
Die drei Spalten #links,#textbereich und #links werden vom div#zentral umschlossen.
Unmittelbar vor dem Ende von div#zentral werden die später floatenden Spalten mit der
<hr class="clear" /> gecleart.
Lange Rede, kurzer Sinn. Jetzt wird gestaltet!
Bitte CSS ergänzen:
#links {float:left;width:25%;}
#textbereich {float:left;width:46%;margin-left:2%;}
#rechts {float:right;width:25%;}
Die drei Spalten sind schon mal nebeneinander, aber das Ganze ist noch ziemlich grau.
Habt ihr euch nicht gewundert, das die mittlere Spalte (div#textbereich) nur 46% Breite und ein margin-left von 2% hat?
Prozentwerte für Spaltenbreiten können so manchen Browser ins Trudeln bringen. Wenn alles auf Kante genäht ist kann es leicht zu Rundungsfehlern kommen und die Floats brechen dann eventuell um.
Deshalb lasse ich da immer etwas Luft. Die margin-left:2%; brauche ich damit der Inhalt dann auch wirklich mittig sitzt.
Laßt uns jetzt mal die Grafiken einbauen.
Bitte CSS ergänzen:
body {background:#dedede url(linke_seite.png) repeat-y 25% 0;}
#umhang {background: url(rechte_seite.png) repeat-y 75% 0;}
Da pro Element nur eine Hintergrundgrafik erlaubt ist und wir aber zwei Grafiken einbauen müssen hat body die linke Spaltengrafik und div#umhang die rechte Spaltengrafik bekommen.
Zwischenstand im Browser:
Interessant!
Die rechte Spaltengrafik, die ja div#umhang zugewiesen wurde, geht nicht bis nach unten.
div#umhang braucht min-height:100%;. Damit das auch klappt brauchen body und html eine Höhe von 100%. Warum habe ich in diesem Artikel ausführlich erklärt.
Es muss auch noch etwas padding vergeben werden, damit der Text nicht in die Schatten hineinragt.
Bitte CSS ergänzen:
html,body {height:100%;}
#umhangheight:100%;}
#links p {padding:1em 1.5em 0 1em;}
#textbereich p {padding:1em;}
#rechts p {padding:1em 1em 0 2em;}
Ergebnis im Browser:
Schaut doch schon recht ordentlich aus.
Der IE 6 kennt min-height leider nicht, deshalb braucht er per Conditional Comment height, das er fälschlicherweise wie min-height behandelt.
Der IE 7 hat einen Fehler beim Seitenzoom. Um das zu beheben bekommt html die linke Spaltengrafik noch einmal zugewiesen.
Bitte den Conditional Comment ergänzen:
<!--[if lte IE 8]><style type="text/css">* html #umhang {height: 100%;}*+html {background:#dedede url(linke_seite.png) 25% 0 repeat-y;}</style><![endif]-->
Bei den Grafiken ist der Bereich, der nicht zum Einfärben der Spalte benötigt wird transparent.
Da hier das div#umhang über die gesamte Breite des sichtbaren Bereichs geht, wird die Transparenz benötigt, damit der Hintergrund von body (linke Spalte!!) nicht verdeckt wird.
Das wäre es normalerweise, aber fragt ihr euch nicht auch warum z.B. die HG-Grafik für die linke Seite ganz links anfängt und nicht nach 25% von links aus gesehen?
Wenn ihr Hintergrundbilder mit Prozentwerten positionieren wollt, wird der diesem Prozentwert entsprechende Punkt des Bildes am entsprechenden Punkt des Elementes befestigt.
Das Ganze funktioniert bei Prozentwerten für die Positionierung des HG-Bildes also anders wie wir es normalerweise gewohnt sind.
Eine kleine Beispielzeichnung zur Veranschaulichung:
body geht über die ganze Breite des Viewports und hat die untere Grafik der Beispielzeichnung zugewiesen bekommen.
Wir haben für die Positionierung des HG-Bildes background-position:25% 0; notiert, also 25% von links.
Nun wird aber nicht die linke obere Ecke des HG-Bildes an diesen Punkt genagelt, sondern wir gehen mit dem Finger im HG-Bild 25% (650px) nach rechts und nageln genau diesen Punkt im Viewport 25% vom linken Rand aus gesehen fest.
div#umhang geht auch über die ganze Breite des Viewports und hat die obere Grafik der Beispielzeichnung zugewiesen bekommen.
Wir haben für die Positionierung des HG-Bildes background-position:75% 0; notiert, also 75% von links.
Nun wird aber nicht die linke obere Ecke des HG-Bildes an diesen Punkt genagelt, sondern wir gehen mit dem Finger im HG-Bild 75% (1950px) nach rechts und nageln genau diesen Punkt im Viewport 75% vom linken Rand aus gesehen fest.
Inspiriert von:Fortgeschrittene CSS-Techniken
Pingback: Anonymous