Moderne Browser beherrschen die Style-Anweisung position: fixed;, leider nicht so die alten IE-Browser vor der Version 7. Damit man dennoch Elemente auf der Seite fixieren kann, unterteilt man das Fenster in eine skrollenden Bereich und eine fixierten Bereich. Der Quelltext im <body> sieht wie folgt aus:
<body><div id="box"><div id="wrapper"><div id="content"> ... </div><div id="navi"> ... </div></div></div><div id="header"> ... </div><div id="footer"> ... </div><div id="decor1"></div><div id="decor2"></div><div id="decor3"></div></body>Wie steht's im Leben des Webdesigners könnte alles so schön sein, wäre da nicht der eine Browser oder der andere der ein wenig zickt. In diesem Fall ist es der Opera-Browser, für den Opera ist die fixierte Box (<div id="box">) im fixierten <body>. Wieviele Deco-Elemente man benötigt hängt natürlich vom Design ab. Die einen benötigen keines, die anderen mehr als drei (<div id="decor[1-n]">). Kommen wir zum zweiten Schritt, den CSS-Anweisungen:
html, body, div, img {margin: 0; padding: 0; border: 0;}html {height: 100%; overflow: hidden;}body {height: 100%; overflow: hidden;}#box {width: 100%; height: 100%; overvlow: hidden;}#wrapper {height: 100%; width: 100%; position: absolute; top: 0; left: 0; padding: 0; margin: 0; overflow: auto; overflow-y: scroll; z-index: 10;}#content {... margin-top: 260px; padding-bottom: 36px;}#navi {...}#header {width: 100%; height: 230px; position: absolute; top: 0; right: 15px; padding-left: 30px; z-index: 15;}#footer {width: 100%; height: 18px; position: absolute; bottom: 0; right: 15px; padding-left: 30px; z-index: 16;}#decor1 {Width: ...; height: ...; position: absolute; top: ...; left: ...;}#decor2 {width: ...; height: ...; position: absolute; ...}#decor3 {width: ...; height: ...; position: absolute; ... etc.}html, body und #box füllen den gesamten Viewport und die Skrollbalken sind deaktiviert. Der Wrapper (<div id="wrapper">) ersetzt den <body>. Styleanweisungen von Elementen im Wrapper unterscheiden sich nicht von Styleanweisungen von Elementen die gewöhnlich im <body> stehen, wenn dieser nicht gnadenlos seiner Skrollbalken beraubt ist. Alles außerhalb des Wrapper wird nun absolute positioniert. Wobei Elemente wie Header und Footer (<div id="header">,<div id="footer">) die über die gesamte Breite des Viewports gehen und per z-index über dem Wrapper stehen und damit den Scrollbalken verdecken, für diesen Platz machen müssen. Daher richtet man diese Elemente rechts neben dem Skrollbalken aus und kompensiert die 15px, die das Element nun aus dem Viewport links rutscht, per padding. Elemente im Wrapper benötigen entsprechend Abstände, wenn Elemente außerhalb des Wrappers, Inhalte überlagern. Decor-Elemente kann man nun frei auf im Viewport positionieren.
Diese Methode erübrigt sich in ein, zwei Jahren, wenn der Internet Explorer 6 und kleiner aus den Statistiken verschwunden ist.
Übrigens arbeitet diese Site-Template mit dieser Technik für fixed position.
Vorsicht Unwegsamkeit!
Bei dieser Technik darf es im Falle einer Fußzeile am unteren Rand des Viewports zu keinem Querskrollen kommen. Die Fußzeile verdeckt jeden horizontalen Skrollbalken und blockiert damit dessen Gebrauch. Man kann dem Problem ausweichen, in dem man die Fußzeile 15px vom unteren Viewport abrückt und im Wrapper die letzten 15 Pixel wie die Fußzeile gestaltet.
Siehe auch Total proportional, in der Seite sind links und rechts jeweils zwei Elememte fixiert, hier wurde für Browser, die position: fixed; schon verstehen auf die Divs verzichtet. Diese werden über Conditional Comments ausgeblendet. Die Stilanweisungen sind separat. Solange die fixierten Elemente außerhalb des Wrappers untergebracht werden, kann man man sich die unbeeinträchtigte Skrollfunktion der Browsers erhalten.
PG4ME.DE