Seitenlayout: Navigation, Kopf, Information, Fußteil (Variante 1) - Quelltext - Cascading Style Sheets

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Seitenlayout: Navigation, Kopf, Information, Fu&szlig;teil (Variante 1) - Cascading Style Sheets - Workshop Internet-Pr&auml;senz</title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="DE" />
 <meta http-equiv="Content-Style-Type" content="text/css" />

 <meta name="description" content="&Uuml;bung Cascading Style Sheet. Seitenlayout: Navigation, Kopf, Information, Fu&szlig;teil." />
 <meta name="keywords" content="HTML, Cascading Style Sheet, Bildschirm, Ausdruck" />
 <meta name="author" content="Dr. Roland Unger" />

 <style type="text/css">
 <!--

  body {
     text-align: center;
     padding: 0.5em;
     margin: 0;
  }

  #container {
     padding: 0;
     margin: 0 auto;
     width: 80%;
     text-align: left;
     border: 1px solid #e0e0e0;
  }

  #header {
     margin: 0;
     padding: 0.5em;
     background: #e5f3ff;
  }

  #header h1 {
     margin: 0;
     font-size: 1.5em;
  }

  #contentAndNavigation {
     margin: 0;
     padding: 0;
     position: relative;
     width: 100%;
     background: #e0e0e0;
     /* Dies ist die Farbe für die Navigationsleiste */
  }

  #content {
     position: relative;
     top: 0;
     left: 0;
     margin: 0 0 0 8em;
     padding: 0.5em;
     background: #fff;
  }

  #content h2 {
     margin: 0 0 1em;
     font-size: 1.17em;
  }

  #content p {
     margin: 1em 0 0;
  }

  #navigation {
     position: absolute;
     top: 0;
     left: 0;
     margin: 0;
     padding: 0.5em 0;
     width: 8em;
     overflow: hidden;   
  }

  #navigation ul {
     margin-top: 0;
     margin-bottom: 0;
  }

  #footer {
     margin: 0;
     padding: 0.5em;
     background: #e5f3ff;
  }

  @media print {
   #container {
     border-style: none;
   }

   #header , #footer , #contentAndNavigation {
     background: transparent;
   }

   #header {
     border-bottom: 1pt solid #000;
   }

   #footer {
     border-top: 1pt solid #000;
   }

   #navigation {
     display: none;
   }

   #content {
     margin: 0;
   }
  }

 -->
 </style>
</head>

<body>

<!-- Start of #container -->

<div id="container">

<!-- Start of #header -->

 <div id="header">
  <h1>Workshop Internet-Präsenz</h1>
 </div>

<!-- closes #header -->

<!-- Start of #contentAndNavigation -->

 <div id="contentAndNavigation">

<!-- Start of #content -->

  <div id="content">

   <h2>Seitenlayout: Navigation, Kopf, Information, Fußteil</h2>

   <p>Das zweite Beipiel realisiert ein mehrspaltiges Layout,
   indem die Seitenbereiche auf den Rand des zentralen
   Fensters gelegt werden. Der das Navigationsfenster und
   das Informationsfenster umschließende &lt;div&gt;-Bereich
   muss relativ positioniert werden, damit die absolute
   Positionierung der Seitenbereiche (Navigation) auf Null
   bezogen werden kann.</p>

   <p>Aufgrund der fehlerhaften Breiten- und Höhenberechnung
   beim Internet Explorer sollten linke und rechte <em>margin</em>-
   und <em>padding</em>-Angaben auf Null gesetzt werden oder
   Breitenangaben vermieden werden.</p>

   <p>Viele Browser haben Probleme bei der Höhenberechnung
   der absolut positionierten Randstreifen. Trotz der Angabe
   Höhe 100% (bezogen auf die Höhe des umschließenden
   &lt;div&gt;-Bereichs) wird häufig die wirklich benötigte
   Höhe eingestellt (meist kleiner oder größer als die Höhe
   des Informationsfensters). Es gibt kein allgemein
   funktionierender Workaround für alle Browser. Die
   Hintergrundfarbe des Navigationsfensters wird daher nicht
   im Navigationsbereich selbst, sondern im umschließenden
   &lt;div&gt;-Bereich eingestellt, um den Eindruck zu
   vermitteln, die Seitenbereiche seien genau so groß.</p>

   <p>Ein weiteres Problem stellen
   die Ränder von Überschriften und Absätzen dar. Sie würden
   über die sie umschließenden &lt;div&gt;-Bereiche
   hinausragen, so dass zwischen dem Kopfteil, Mittelteil
   und Fußteil Abstände von einer Zeilenhöhe zu sehen sind.</p>

  </div>

<!-- closes #content -->

<!-- Start of #navigation -->

  <div id="navigation">

   <ul>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>
    <li>Punkt 4</li>
   </ul>

  </div>

<!-- closes #navigation -->

 </div>

<!-- closes #contentAndNavigation -->

<!-- Start of #footer -->

 <div id="footer">
  Fußbereich
 </div>

<!-- closes #footer -->

</div>

<!-- closes #container -->

</body>
</html>