Angestachelt durch die kleine Ideendiskussion bei meiner neueren Website habe ich mir dazu Gedanken gemacht, wie man das meinige dort sichtbare Layout (980x580) für größere Monitore/ Auflösungen flexibler macht.
Heute habe ich eine basic_Lösung dafür entwickelt, die man noch verfeinern kann, aber den Grundstock für ein Website-Layout mit fester Breite und variabler Höhe legt, wo der Header fest am oberen Bildschirmrand klebt, der Footer am unteren Bildschirmrand und der mainBlock (und leftBlock) mit fester Breite und varibaler Höhe sich dem Bildschirm automatisch anpasst.
[EDIT03.12.08; 13:30 - headerBlock ergänzt mir position: relative; dadurch können Elemente im Header absolute psotioniert werden ...
Mit einer sinnvollen Verknüpfung von SwitchCSS kann man dann das übliche Layout mit diesem kombinieren und erhält somit eine vom User einstellbare Lösung:
Code: Select all
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0px none;
background:rgb(209,205,193);
font-size:76%;
font-family:verdana, arial, georgia, times new roman, serif;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden
}
body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0px none;
background-color: #006400;
}
..........
#container {
width: 980px;
height:100%;
background-color: #cccccc;
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px; }
#headerBlock { position: relative;
width:980px;
min-width:980px;
height:150px;
font-size:1em;
background-color: #c0c0c0;
}
* html #head { top:2px; width:978px; height:148px; }
/* ************************* HauptBlock ************** */
#mainBlock { display:block;
overflow:auto;
position:absolute;
z-index:3;
top:150px;
bottom:30px;
width:785px;
margin-left: 190px;
padding: 5px 0 5px 5px;
border-left:1px solid #000;
border-right:1px solid #000;
background:#fff;
}
* html #mainBlock{
top:0;
bottom:0;
height:100%;
width:980px;
border-top:154px solid #fff;
border-bottom:50px solid #fff; }
#footerBlock { clear: both;
color: #ffffff;
text-align:center;
position:absolute;
bottom:0;
width:980px;
min-width:980px;
height:30px;
background:#006400 url('heading.jpg') 0 100px; font-size:1em;
z-index:5;
border:1px solid #000;
font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
font-weight:bold;
}
* html #footerBlock {
bottom:2px; width:980px; height:30px;
}