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

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.

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;}

2spalten_feste-breite_var-hoehe_01.jpg

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.

deutsch/templates/2-spalten-feste-breite-variable-hoehe.txt · Last modified: 2013/06/22 11:11 by Burkhard Otto
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0