by kukki on Mon Nov 24, 2008 18:46 
schwer eine Lösung für alle gängigen Browser (FF, OP, SF und IE5.5, 6 und 7) konform auf die Reihe zu kriegen.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;
}
) oder nur dern wichtigen mainBlock ( 
) .... letzteres gefällt mir besser, weil damit das Banner, das Menü, das Impressum etc. IMMER sichtbar sind, die Seite nicht so zappelt und damit auch Ruhe bringt. Es ist (psycologisch erwiesen!) beruhigender und weniger stressig für Auge und Kopf und die Verweilzeiten lassen sich damit erhöhen. Jeder Besucher sieht sofort Wo bin ich, WOHIN kann ich gehen, WEM gehört die Seite, Wo ist ein Kontakt möglich ... Was jeder dann daraus macht, ist jedem seine Sache.
