Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken - CSS

Tabellenloses Basislayout
mit fixierten und separat scrollbaren Blöcken

Inhalt:

Ziel
Planung/ Vorbereitung
Realisierung
- HTML Quelltext
- Stylesheets (außer IE)
- Stylesheets (nur IE)
  - Workaround mit JavaScript
  - Workaround mit IE im Quirksmode
Anhang
- Beispiel 1 (Quelltext)
- Beispiel 2 (Quelltext)

Ziel

Beispiel-Layout
... ist ein aus mehreren Blöcken bestehendes tabellenloses Layout, wobei die einzelnen Blöcke im Bildschirmfenster auf festen Positionen fixiert und ggf. separat scrollbar sein sollen. Den meisten Anforderungen genügt es, wenn das Layout entsprechend nebenstehender Abbildung aus einem zentralen Content-Block in der Mitte, einer horizontalen Header- und Footer-Leiste (oben/unten) und einem vertikalen linken und rechten Seitenblock besteht.

Falls einer der Randblöcke nicht benötigt wird, dann kann er problemlos ausgeblendet werden, indem die Breite bzw. Höhe des betreffenden Blockes auf Null gesetzt wird. Ebenso sind natürlich auch andere Blockstrukturen realisierbar.

Planung/Vorbereitung

Im folgenden Beispiel gehen wir davon aus,

dass einfachheitshalber das Gesamtlayout die gesamte Fenstergröße (100% Breite × 100% Höhe) einnehmen und dass alle Blöcke lückenlos aneinander liegen sollen,
dass der obere und untere Randblock (Header/Footer) ein absolutes Höhenmaß (z.B. 150px bzw. 50px) und der linke und rechte Seitenblock ein absolutes Breitenmaß (z.B. 200px bzw. 100px) haben sollen.

Damit können auch die Koordinaten der Blockgrenzen angegeben werden:

Zu beachten ist, dass die Werte in obenstehender Tabelle Blockgrenzen sein sollen sollen und dass entsprechend dem Boxmodell des W3C die padding-Werte nicht zum Blockinhalt gehören. Wenn man nun einen Abstand des Blockinhalts zum Rand über die padding-Eigenschaft realisieren will, dann müsste man die festgelegte Blockgröße bzw. die -grenzen ändern. Wir umgehen das, indem in den nachfolgenden Beispielen in jeden Block noch einen "Inhalts-DIV" eingesetzt wird ("Box-in-a-box"), der problemlos mit margin-, border- und padding-Eigenschaften versehen werden kann, wenn sich die Größe des inneren Containers automatisch an den äußeren anpasst. In den folgenden Beispielen wird so der Abstand zwischen Inhalt und äußeren Blockgrenzen durch entsprechende margin-Werte erreicht (vgl. HTML-Quelltext im nächsten Abschnitt und in den Beispielen).

Realisierung

HTML-Quelltext

Unter Berücksichtigung der oben gemachten Festlegungen erhält man für diese Blockstruktur folgenden schlichten HTML-Quelltext:

...
<body>

<div id="mitte"><div class="inhaltDiv">
Blockinhalt #mitte
</div></div>

<div id="oben"><div class="inhaltDiv">
Blockinhalt #oben
</div></div>

<div id="links"><div class="inhaltDiv">
Blockinhalt #links
</div></div>

<div id="unten"><div class="inhaltDiv">
Blockinhalt #unten
</div></div>

<div id="rechts"><div class="inhaltDiv">
Blockinhalt #rechts
</div></div>

</body>
...
Stylesheets (außer Internet-Explorer)

Zunächst ist naheliegend, dass die Positionierung der fixierten Blöcke mit der CSS-Eigenschaft position:fixed; vorgenommen wird. Das hat jedoch folgende Nachteile:

Der Internet-Explorer kennt die CSS-Eigenschaft position:fixed; nicht.
Opera hat Probleme bei der Darstellung von absolut positionierten Blöcken innerhalb eines Blockes mit der Eigenschaft position:fixed;.

Es ist jedoch möglich, alle Blöcke absolut zu positionieren und die Scrollmöglichkeit im Fenster mit Hilfe der CSS-Eigenschaft overflow:hidden; im BODY-Selektor zu unterbinden. Damit sind ebenfalls alle Blöcke im Fenster fixiert und den einzelnen Blöcken kann bei Bedarf die Möglichkeit zum Scrollen separat zugewiesen werden.
Im Beispiel sind nur der mittlere und der linke Block scrollbar, bei allen anderen Blöcken werden überlange Blockinhalte definitiv abgeschnitten.

Mit Hilfe obenstehender Tabelle kann man nun die entsprechenden ID-Selektoren der Stylesheets für alle Browser (außer Internet-Explorer, wie im nächsten Abschnitt gezeigt wird) formulieren:

            
            
              
                
                  
                    Code:
                  
                

                  
                   	...
          body {
              ...
              overflow: hidden;  /* Scrollbalken im Fenster unterbinden */
          }
          #mitte {
              position: absolute;
              top: 150px;        /* Abstand zum oberen Fensterrand */
              left: 200px;        /* Abstand zum linken Fensterrand */
              bottom: 50px;        /* Abstand zum unteren Fensterrand */
              right: 100px;        /* Abstand zum rechten Fensterrand */
              overflow: auto;        /* Scrollbalken, falls notwendig */
              ...
          }
          #oben {
              position: absolute;
              top: 0;            /* Abstand zum oberen Fensterrand */
              left: 0;        /* Abstand zum linken Fensterrand */
              right: 0;        /* Abstand zum rechten Fensterrand */
              height: 150px;        /* Blockhöhe */
              padding: 0;        /* Interpretation Boxmodell! */
              overflow: hidden;    /* Scrollbalken unterbinden */
              ...
          }
          #links {
              position: absolute;
              top: 150px;        /* Abstand zum oberen Fensterrand */
              left: 0;        /* Abstand zum linken Fensterrand */
              bottom: 0;        /* Abstand zum unteren Fensterrand */
              width: 200px;        /* Blockbreite */
              padding: 0;        /* Interpretation Boxmodell! */
              overflow: auto;        /* Scrollbalken, falls notwendig */
              ...
          }
          #unten {
              position: absolute;
              left: 200px;        /* Abstand zum linken Fensterrand */
              bottom: 0;        /* Abstand zum unteren Fensterrand */
              right: 0;        /* Abstand zum rechten Fensterrand */
              height: 50px;        /* Blockhöhe */
              padding: 0;        /* Interpretation Boxmodell! */
              overflow: hidden;    /* Scrollbalken unterbinden */
              ...
          }
          #rechts {
              position: absolute;
              top: 150px;        /* Abstand zum oberen Fensterrand */
              bottom: 50px;        /* Abstand zum unteren Fensterrand */
              right: 0;        /* Abstand zum rechten Fensterrand */
              width: 100px;        /* Blockbreite */
              padding: 0;        /* Interpretation Boxmodell! */
              overflow: hidden;    /* Scrollbalken unterbinden */
              ...
          }
          ...
                  
                

              
            
          

Stylesheets (nur Internet-Explorer)

Wenn es den Internet-Explorer nicht gäbe, dann wäre man mit der Layouterstellung jetzt fertig. Aber es gibt noch ein weiteres schwerwiegendes Problem:
Der Internet-Explorer braucht expressive Angaben für die Blockgröße, d.h. aus den Koordinatenpaaren top-bottom und/oder left-right wird die Blockhöhe bzw. -breite vom IE nicht berechnet.

Dieser Mangel kann auf verschiedenen Wegen umgangen werden, im folgenden sollen zwei davon gezeigt werden.

Workaround mit JavaScript

Im IE gibt es die Möglichkeit mit JavaScript in den Stylesheets Werte zu berechnen. Damit können unter Berücksichtigung aller Nachteile, die JavaScript mit sich bringt, die fehlenden Größenwerte aus der BODY-Breite bzw. -höhe ermittelt werden.

Mit dem Ausdruck document.body.clientWidth wird der Breitenwert des BODY ermittelt, wovon dann noch der entsprechende left- und right-Wert des Blockes subtrahiert werden muss um die Blockbreite zu erhalten. Dementspechend erhält man analog mit dem Ausdruck document.body.clientHeight die Höhe des BODY und nach Subtraktion des top- und bottom-Wertes die Blockhöhe.

            
            
              
                
                  
                    Code:
                  
                

                  
                   	...
          #mitte {
              ...
              width: expression((document.body.clientWidth - 300) + "px");
                          /* left-Wert + right-Wert = 300 */
              height: expression((document.body.clientHeight - 200) + "px");
                          /* top-Wert + bottom-Wert = 200 */
          }
          #oben {
              ...
              width: expression(document.body.clientWidth + "px");
                          /* left-Wert + right-Wert = 0 */
          }
          #links {
              ...
              height: expression((document.body.clientHeight - 150) + "px");
                          /* top-Wert + bottom-Wert = 150 */
          }
          #unten {
              ...
              width: expression((document.body.clientWidth - 200) + "px");
                          /* left-Wert + right-Wert = 200 */
          }
          #rechts {
              ...
              height: expression((document.body.clientHeight - 200) + "px");
                          /* top-Wert + bottom-Wert = 200 */
          }
          ...
                  
                

              
            
          

Diese Ausdrücke werden in die entsprechenden Selektoren der Stylesheets für alle anderen Browser eingefügt, komplett ist alles in Beispiel 1 zu finden.

Noch mal: Diese Realisierungsmöglichkeit benutzt JavaScript als Darstellungshilfe für den Internet-Explorer, der solche Seiten also nur in einer Sicherheitszone mit aktiviertem Scripting fehlerfrei darstellen kann. Sicherlich keine uneingeschränkt nutzbare Lösung, aber immerhin für interne Anwendungen und für solche Seiten, bei denen aktives JavaScript ohnehin Voraussetzung für die Darstellung der Seite ist, ein einfacher Realisierungsweg.

Workaround mit IE im Quirksmode

Eine weitere Realisierungsmöglichkeit bezieht sich auf eine Vorlage von Nicholls, die davon ausgeht, dass der Internet-Explorer durch geeignete Wahl der Dokumenttyp-Deklaration (vgl. DOCTYPE-Beispiele am Ende dieses Abschnittes) in den Quirksmode gesetzt wird. Damit interpretiert der IE das Boxmodell nicht nach den Empfehlungen des W3C, sondern rechnet die padding- und die border-Werte mit zur Blockgröße (vgl. Bild in der MSDN-Library).

Blockstruktur des Layouts mit IE im Quirksmode
Wenn man diesen Umstand ausnutzt und den mittleren Block auf volle Fenstergröße bringt, dann kann sein Rahmen genau so groß wie die Randblöcke gemacht werden. Damit hat der mittlere Block eine definierte Breite und Höhe von jeweils 100%, kann so vom IE dargestellt werden und die ihn umgebenden Randblöcke können in einer darüberliegenden z-Ebene auf seinem Rahmen abgelegt werden.

Mit den Randblöcken, die von anderen Randblöcken teilweise überdeckt werden, wird ebenso verfahren.

Da man hier mit einer anderen Blockstruktur arbeitet, können die ID-Selektoren für die IE-Stylesheets gleich neu formuliert werden. Für diese Selektoren wird die kontextsensitive Konstruktion * html [Selektorbezeichnung] {...} verwendet, die nur vom Internet-Explorer ausgewertet wird (Star-Html-Hack) und eine problemlose spätere Einarbeitung in die Stylesheets für die anderen Browser ermöglicht: