Seitenlayout: Navigation, Kopf, Information, Fußteil (Variante 2) - 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 2) - 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;
  }

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

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

  #contentAndNavigation {
     /* Reserviert */
  }

  #content {
     margin: 0 0 0 8em;
     padding: 0.5em;
     border: 1px solid #e0e0e0;
  }

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

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

  #navigation {
     float: left;
     margin: 0;
     padding: 0.5em 0;
     width: 7em;
     border: 1px solid #e0e0e0;
  }

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

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

  @media print {
   #header , #footer , #contentAndNavigation {
     background: transparent;
   }

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

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

   #navigation {
     display: none;
   }

   #content {
     margin: 0;
     border-style: none;
   }
  }

 -->
 </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 #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 -->

<!-- Start of #content -->

  <div id="content">

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

   <p>Das dritte Beipiel realisiert ein mehrspaltiges Layout,
   indem die Seitenbereiche auf den Rand des zentralen
   Fensters gelegt werden. In die Seitenbereiche werden
   umflossene &lt;div&gt;-Bereiche gelegt. Diese müssen
   in jedem Fall <em>vor</em> dem Informatisonsbereich
   notiert werden. Der Vorteil liegt darin, dass dieses
   Layout etwas einfacher als die erste Variante realisiert
   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>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 -->

 </div>

<!-- closes #contentAndNavigation -->

<!-- Start of #footer -->

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

<!-- closes #footer -->

</div>

<!-- closes #container -->

</body>
</html>