NAVIGATION
translate
http://forum.phpwcms.org/viewtopic.php?p=111983#p111983
- Autor: kukki (Update: 24.06.09)
Gewählt habe ich eine feste Breite von 980px, so dass 1024 x YYY bedient werden kann.
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;}