NAVIGATION
Table of Contents
2 col, fixed width, var. height
translate
http://forum.phpwcms.org/viewtopic.php?p=111983#p111983
- Autor: kukki (Update: 24.06.09)
Anforderung:
- Header soll am obersten Rand der Viewport stehen. (115px)
- Left und Main sollen optisch nebeneinander stehen
- Der Scrollbalken soll dynamisch im Main erzeugt werden, falls gewünscht, wie im Beispiel.
- Footer soll untem im Viewport stehen. (20px)
- Bei F11-Taste soll die Konstruktion sich diesem Bildschirm automatisch anpassen.
- CSS-Code soll konform sein! Live-Beispiel siehe hier
Gewählt habe ich eine feste Breite von 980px, so dass 1024 x YYY bedient werden kann.
CSS
Folgende Lösung hat bisher einem Test standgehalten und ist stabil und mit nachfolgenden Codezeilen CSS-konform:
–> diesen Codeschnipsel in den Header der Vorlage einstellen:
<!--[if lt IE 7]>
<style type="text/css">
#mainBlock { height: expression((document.body.clientHeight-157) + "px");}
/* wer auch den #leftBlock bis zum Footer fließen lassen will, sollte die nachfolgende Zeile auch benutzen!
-->Vorteil: Man kann dem #leftBlock ein eigenes Hintergrundbild ohne Trickereien verpassen */
#leftBlock { height: expression((document.body.clientHeight-157) + "px");}
</style>
<![endif]-->Soll #leftBlock ebenfalls mit height: expression angesteuert werden, damit dieser bis zum footer fließen kann, ist dieser Block mit position:absolute zu behandeln. Eine Empfehlung: Wenn jemand den IE6 ohne Probleme bedienen will, sollten CSS-Kurzschriften vermieden werden. Macht zwar Mühe, aber der IE6 läuft stabil!
selbstzentrierende Seite 980px breit, 100% hoch
/* selbstzentrierende Seite 980px breit, 100% hoch*/ html, body { margin: 0; padding: 0; border: 0; height: 100%; min-width: 100%; } /* der komplette Bildschirmbody */ body{ margin: 0; padding: 0; overflow:hidden; /*weg ist der Scrollbalken*/ } #container { position: absolute; background-color: #006400; margin: 0px 0px 0px -490px; left: 50%; width: 980px; /* Breite der gesamten Website */ height:100%; /* sichtbare Hoehe der Website */ } #headerBlock { height: 115px; margin: 0; background: #FF9F9F ; } #mainBlock { position: absolute; background-color: #ffff99; top: 115px; bottom: 30px; right: 0; padding: 5px 15px 5px 5px; margin-left: 220px; overflow: auto; /*Scrollbalken nur für den #mainBlock*/ } #leftBlock { position: absolute; top: 115px; width: 200px; bottom: 30px; } #footerBlock { position: absolute; bottom: 2px; text-align: left; color: #ffffff; width: 980px; height: 30px; margin: 0; padding: 0; background-image: url(/picture/Fuss.jpg); background-repeat: repeat-x; } #footerBlock a{ color:#f2f2f2;}
Vorlage
