[x]Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken

***hela*** · 13.01.05 01:37

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:

**Markus Kolletzky** · 21.03.05 15:32

Code :

...
  * html #mitte {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top-width: 150px;    /* = Kopfzeilenhöhe */
    border-left-width: 200px;   /* = Spaltenbreite links */
    border-bottom-width: 50px;  /* = Fußzeilenhöhe */
    border-right-width: 100px;  /* = Spaltenbreite rechts */
    border-style: solid;
    ...             /* tiefste z-Ebene! */
  }
  ...
  * html #oben {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    z-index: 4;         /* höchste z-Ebene */
  }
  ...
  * html #links {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    border-top-width: 150px;    /* = Kopfzeilenhöhe */
    border-left-width: 0;
    border-bottom-width: 0;
    border-right-width: 0;
    border-style: solid;
    z-index: 3;
  }
  ...
  * html #unten {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    border-top-width: 0;
    border-left-width: 200px;   /* = Spaltenbreite links */
    border-bottom-width: 0;
    border-right-width: 0;
    border-style: solid;
    z-index: 2;
  }
  ...
  * html #rechts {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    border-top-width: 150px;    /* = Kopfzeilenhöhe */
    border-left-width: 0;
    border-bottom-width: 50px;  /* = Fußzeilenhöhe */
    border-right-width: 0;
    border-style: solid;
    z-index: 1;
  }
  ...

Die Reihenfolge des Index für die z-Ebenen ist vom Layout abhängig und aus dem obenstehenden Bild ersichtlich. Die Werte des z-Index wurden im Beispiel zwischen 1 und 4 gewählt und können bei Einhaltung der Reihenfolge beliebig geändert werden.

Die IE-spezifischen Selektoren werden in die Stylesheets für alle anderen Browser nach den entsprechenden Selektoren eingefügt und anschließend können alle doppelt vorkommenden Eigenschaften mit gleichen Werten in den IE-spezifischen Selektoren gelöscht werden. Ebenso ist es sinnvoll, die z-Index-Eigenschaften in die für alle Browser gültigen Selektoren zu verlegen.
Komplett ist alles in Beispiel 2 zu finden.

Noch mal: Diese Realisierungsmöglichkeit funktioniert im Internet-Explorer nur dann, wenn der IE über die Dokumenttyp-Deklaration in den Quirksmode gesetzt wird. Derzeit also bei beispielsweise folgenden DOCTYPE-Angaben:

ohne DOCTYPE-Angaben
HTML 4.01 Transitionlal ohne URI: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
XML + XHTML 1.0 Transitional: <?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
XML + XHTML 1.0 Transitional + URI: <?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XML + XHTML 1.0 Strict: <?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
XML + XHTML 1.0 Strict + URI: <?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Eine umfassende Übersicht zum Zusammenhang zwischen Dokumenttyp-Deklaration und Darstellungsmodus verschiedener Browser ist in iX 3/2004 zu finden.

Letztendlich soll noch ein Nachteil dieser Methode nicht verschwiegen werden:
Da einerseits der mittlere Block eine Gesamtbreite und -höhe von 100% hat und somit den gesamten Bildschirm abdeckt und andererseits der Internet-Explorer keine transparenten Rahmen unterstützt, ist hier die Darstellung einer zusammenhängenden Hintergrundgrafik im BODY für alle Blöcke nicht möglich. Mit etwas Aufwand kann man das umgehen, indem das Hintergrundbild entsprechend der sichtbaren Größe der einzelnen Blöcke geteilt und die Teilbilder den entsprechenden Blöcken als separates Hintergrundbild zugewiesen wird.

Anhang

Beispiel 1 (Quelltext)

HTML-Code:

<?xml version="1.0" encoding="iso-8859-1"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html>
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>CSS-Beispiel 1: position_fixed</title>
  
  <style type="text/css">
  <!--
  html, body {
  	width: 100%;
  	height: 100%;
  	margin: 0;
  	border: 0;
  	padding: 0;
  }
  body {
  	background-color: #fff;
  	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 */
  /* nur für IE: */
  	width: expression((document.body.clientWidth - 300) + "px");
 				/* left-Wert + right-Wert = 300 */
  	height: expression((document.body.clientHeight - 200) + "px");
 				/* top-Wert + bottom-Wert = 200 */
  }
  #mitte .inhaltDiv {
  	margin: 20px;		/* Abstand des Inhalts zum Blockrand */
  }
  #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! */
  	background-color: #cfc;
  	overflow: hidden;	/* Scrollbalken unterbinden */
  /* nur für IE: */
  	width: expression(document.body.clientWidth + "px");
 				/* left-Wert + right-Wert = 0 */
  }
  #oben .inhaltDiv {
  	margin: 10px;		/* Abstand des Inhalts zum Blockrand */
  }
  #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! */
  	background-color: #ffc;
  	overflow: auto;		/* Scrollbalken, falls notwendig */
  /* nur für IE: */
  	height: expression((document.body.clientHeight - 150) + "px");
 				/* top-Wert + bottom-Wert = 150 */
  }
  #links .inhaltDiv {
  	margin: 10px;		/* Abstand des Inhalts zum Blockrand */
  }
  #unten {
  	position: absolute;
  	left: 200px;		/* Abstand zum linken Fensterrand */
  	bottom: 0 !important;	/* Abstand zum unteren Fensterrand */
  	bottom: -1px;		/* nur für IE */
  	right: 0;		/* Abstand zum rechten Fensterrand */
  	height: 50px;		/* Blockhöhe */
  	padding: 0;		/* Interpretation Boxmodell! */
  	background-color: #fcf;
  	overflow: hidden;	/* Scrollbalken unterbinden */
  /* nur für IE: */
  	width: expression((document.body.clientWidth - 200) + "px");
 				/* left-Wert + right-Wert = 200 */
  }
  #unten .inhaltDiv {
  	margin: 10px;		/* Abstand des Inhalts zum Blockrand */
  }
  #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! */
  	background-color: #ccf;
  	overflow: hidden;	/* Scrollbalken unterbinden */
  /* nur für IE: */
  	height: expression((document.body.clientHeight - 200) + "px");
 				/* top-Wert + bottom-Wert = 200 */
  }
  #rechts .inhaltDiv {
  	margin: 10px;		/* Abstand des Inhalts zum Blockrand */
  }
  -->
  </style>
  </head>
  
  <body>
  
  <div id="mitte"><div class="inhaltDiv">
  <h1>#mitte:</h1>
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
  </p>
  </div></div>
  
  <div id="oben"><div class="inhaltDiv">
  <h2>#oben</h2>
  </div></div>
  
  <div id="links"><div class="inhaltDiv">
  <h2>#links:</h2>
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
  </p>
  </div></div>
  
  <div id="rechts"><div class="inhaltDiv">
  <h2>#rechts:</h2>
  <p>
  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcor ...
  </p>
  </div></div>
  
  <div id="unten"><div class="inhaltDiv">
  <h2>#unten</h2>
  </div></div>
  
  </body>
  </html>

Beispiel 2 (Quelltext)

HTML-Code:

<?xml version="1.0" encoding="iso-8859-1"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>CSS-Beispiel 2: position_fixed</title>
  
  <style type="text/css">
  <!--
  html, body {
  	width: 100%;
  	height: 100%;
  	margin: 0;
  	border: 0;
  	padding: 0;
  }
  body {
  	background-color: #fff;
  	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 */
  }
  * html #mitte {
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	border-top-width: 150px;	/* = Kopfzeilenhöhe */
  	border-left-width: 200px;	/* = Spaltenbreite links */
  	border-bottom-width: 50px;	/* = Fußzeilenhöhe */
  	border-right-width: 100px;	/* = Spaltenbreite rechts */
  	border-style: solid;
  }
  #mitte .inhaltDiv {
  	margin: 20px;		/* Abstand des Inhalts zum Blockrand */
  }
  #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! */
  	background-color: #cfc;
  	overflow: hidden;	/* Scrollbalken unterbinden */
  	z-index: 4;		/* höchste z-Ebene! */
  }
  * html #oben {
  	width: 100%;
  	height: 150px;
  }
  #oben .inhaltDiv {
  	margin: 10px;		/* Abstand des Inhalts zum Blockrand */
  }
  #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! */
  	background-color: #ffc;
  	overflow: auto;		/* Scrollbalken, falls notwendig */
  	z-index: 3;
  }
  * html #links {
  	top: 0;
  	width: 200px;
  	height: 100%;
  	border-top-width: 150px;	/* = Kopfzeilenhöhe */
  	border-left-width: 0;
  	border-bottom-width: 0;
  	border-right-width: 0;
  	border-style: solid;
  }
  #links .inhaltDiv {
  	margin: 10px;		/* Abstand des Inhalts zum Blockrand */
  }
  #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! */
  	background-color: #fcf;
  	overflow: hidden;	/* Scrollbalken unterbinden */
  	z-index: 2;
  }
  * html #unten {
  	left: 0;
  	width: 100%;
  	height: 50px;
  	border-top-width: 0;
  	border-left-width: 200px;	/* = Spaltenbreite links */
  	border-bottom-width: 0;
  	border-right-width: 0;
  	border-style: solid;
  }
  #unten .inhaltDiv {
  	margin: 10px;		/* Abstand des Inhalts zum Blockrand */
  }
  #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! */
  	background-color: #ccf;
  	overflow: hidden;	/* Scrollbalken unterbinden */
  	z-index: 1;
  }
  * html #rechts {
  	top: 0;
  	width: 100px;
  	height: 100%;
  	border-top-width: 150px;	/* = Kopfzeilenhöhe */
  	border-left-width: 0;
  	border-bottom-width: 50px;	/* = Fußzeilenhöhe */
  	border-right-width: 0;
  	border-style: solid;
  }
  #rechts .inhaltDiv {
  	margin: 10px;		/* Abstand des Inhalts zum Blockrand */
  }
  -->
  </style>
  </head>
  
  <body>
  
  <div id="mitte"><div class="inhaltDiv">
  <h1>#mitte:</h1>
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
  </p>
  </div></div>
  
  <div id="oben"><div class="inhaltDiv">
  <h2>#oben</h2>
  </div></div>
  
  <div id="links"><div class="inhaltDiv">
  <h2>#links:</h2>
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
  </p>
  </div></div>
  
  <div id="rechts"><div class="inhaltDiv">
  <h2>#rechts:</h2>
  <p>
  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcor ...
  </p>
  </div></div>
  
  <div id="unten"><div class="inhaltDiv">
  <h2>#unten</h2>
  </div></div>
  
  </body>
  </html>

Beispieldateien und das Tutorial als HTML-Datei im Anhang

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2010 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team	» Tutorials » Videotutorials » Events & Contests » Chat » RSS-Feed	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials.de » Rettet das Internet » Webmasterpro

Thema: [x]Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken

Themen-Optionen

Anzeige

Ähnliche Themen

Tabellenloses Basislayout mit separat scrollbaren Blöcken - IE und FF unterschiedlich

Panel mit nicht fixierten Border ?

Tabellenloses Basislayout

Problem mit fixierten Hintergrund

Lesezeichen

Lesezeichen