kukkis: 2 Spalten, feste Breite, var. Höhe
- Anforderung:
  - CSS
    - Vorlage

kukkis: 2 Spalten, feste Breite, var. Höhe

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:

header/ Vorlage

<!--[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 einen eigen spaltengerechten Hintergrund ohne Tricksereien mit Faux Columns 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

Im Seitenlayout wird unter Seitenaufbau: die Einstellung [x] CSS DIV gewählt.

Dann greifen automatisch die folgenden CSS-Klassen aus der frontend.css:

#container
#headerBlock
#mainBlock
#leftBlock
#rightBlock
#footerBlock

In der Vorlage werden folgende Bereiche verwendet:

Kopfzeile
Haupt
Fußzeile
links
rechts

In diesen Bereichen werden die Content-Platzhalter

{HEADER}
{CONTENT}
{FOOTER}
{LEFT}
{RIGHT}

verwendet.