Emulation der fixierte Positionierung beim Internet Explorer - Quelltext

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Emulation der fixierte Positionierung beim Internet Explorer - 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 Sheets. Fixierte Positionierung" />
 <meta name="keywords" content="HTML, Cascading Style Sheets" />
 <meta name="author" content="Roland Unger" />

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

  .navigation {
     border-right: 1px solid #c0c0c0;
     background: #fff0e0;
     padding: 1%;
     position: fixed;
     top: 0;
     left: 0;
     width: 18%;
     height: 100%;
     overflow: hidden;
  }

  .kopf {
     border-bottom: 1px solid #c0c0c0;
     background: #ffffee;
     padding: 1%;
     position: fixed;
     top: 0;
     left: 20%;
     width: 78%;
     height: 13%;
     overflow: hidden;
  }

  .fuss {
     border-top: 1px solid #c0c0c0;
     background: #ffffee;
     padding: 1%;
     position: fixed;
     bottom: 0;
     left: 20%;
     width: 78%;
     height: 13%;
     overflow: hidden;
  }

  .inhalt {
     padding: 0;
     position: fixed;
     top: 16%;
     left: 20%;
     width: 80%;
     height: 68%;
     overflow: auto;
  }

  h1 {
     margin: 0;
  }

  .inhalt p , .inhalt h2 {
     margin-left: 1%;
     margin-right: 1%;
  }

  /* Nun folgt die IE-Emulation für fixed */

  * html {
     width: 100%;
     height: 100%;
     overflow: hidden;
  }

  * html body {
     width: 100%;
     height: 100%;
     overflow: auto;
  }

  * html .navigation , * html .kopf ,
  * html .fuss ,  * html .inhalt {
     position: absolute;
  }

 -->
 </style>
</head>

<body>

<div class="kopf">
 <h1>Workshop Internet-Präsenz</h1>
</div>

<div class="inhalt">
 <h2>Emulation der fixierte Positionierung beim Internet Explorer - Cascading Style Sheets</h2>

 <p>Mit Hilfe der fixierten Positionierung positionieren Sie
 Boxen an einer festen Stelle auf dem Ausgabebereich, unabhängig
 vom tatsächlichen Inhalt. Das Aussehen ähnelt einem
 Bildschirmaufbau mit dem frameset-Konstrukt.</p>

 <p>Der Eigenschaftswert <em>position: fixed</em> wird beim
 Internet Explorer nicht unterstützt. Die Emulation besteht
 darin, ausschließlich für den Internet Explorer (unter Nutzung
 des Star-HTML-Hacks) die Ausgabefläche auf die Bildschirmgröße
 (Höhe und Breite) zu beschränken (100%) und die Darstellung
 der Rollbalken zu verhindern (overflow: hidden). Die fixiert
 anzuordnenden  Bereiche erhalten den Wert <em>position:
 absolute</em>.</p>

<p>Siehe auch die Kommentare unter:</p>

<ul>
 <li><a href="http://css-discuss.incutio.com/?page=EmulatingFixedPositoning" target="_top">Emulating Fixed Positoning</a></li>
 <li><a href="http://tagsoup.com/-dev/null-/css/fixed/" target="_top">Fixing position: fixed for Windows Internet Explorer</a> (Eric Bednarz)</li>
</ul>

</div>

<div class="fuss">Informationen im Fußbereich</div>

<div class="navigation">Links etc. zur Navigation</div>

</body>
</html>