NAVIGATION
This is an old revision of the document!
Table of Contents
2 Spalten, feste Breite, var. Höhe
http://forum.phpwcms.org/viewtopic.php?p=111983#p111983
-(Autor: kukki)
Anforderung:
- Header soll am obersten Rand der Viewport stehen. (115px)
- Left und Main sollen nebeneinander stehen in einem Container.
- Der Scrollbalken soll dynamisch im Main erzeugt werden, falls notwendig.
- Footer soll untem im Viewport stehen. (20px)
- Bei F11-Taste soll die Konstruktion sich diesem Bildschirm automatisch anpassen.
- CSS-Code soll konform sein!
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 leftBloch einen eigenen Hintergrund ohne Trickereien verpassen */
#leftBlock { height: expression((document.body.clientHeight-157) + "px");}
</style>
<![endif]--></code>
<code css |h selbstzentrierende Seite 980px breit, 100% hoch|h>
/* selbstzentrierende Seite 984px breit, 100% hoch*/
html, body {
margin: 0;
padding: 0;
border: 0;
height: 100%;
min-width: 100%; }
/* der komplette Bildschirmbody */
body{
margin: 0;
padding: 0;
}
#container { position: absolute;
background: #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: #ffff99;
top: 117px;
bottom: 30px;
right: 0;
padding: 5px 15px 5px 5px;
margin-left: 220px;
overflow: auto; }
#leftBlock {
left: 25px;
width: 200px;
}
#footerBlock {
position: absolute;
bottom: 2px;
text-align: left;
color: #ffffff;
width: 980px;
height: 30px;
margin: 0;
padding: 0;
background: url(/picture/Fuss.jpg) repeat-x;
}
#footerBlock a{ color:#f2f2f2;}
Vorlage
