Rols: Fixierte Navigation ohne Frames - einfaches Beispiel

Beitrag lesen

Hi,

Die Styles von rols haben noch folgende Fehler:

  1. Höhe des menue-divs ist fälschlicherweise 100%, 80% wären richtig.
  2. im Mozilla ist der Defaultwert für den Body-margin 8px, dies ist zu berücksichtigen, da mit einer Menühöhe von 80%, einer top-Höhe von 20% und 2*8px Body-margin die 100% immer überschritten sind. Lösung: margin:0; für den body.
  3. das Inhalts-div ist nicht geschlossen.
    Dann ist's auch im Mozilla super.

Danke für die Korrekturen! Das mit dem default-margin des Mozilla wußte ich nicht, den Rest hätte ich auch selbst merken können. Hier also die aktuelle Version:

---------------------------------------------------------------------------------
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="application/xhtml+xml" />
  <title>Fixierte Navigation ohne Frames und Scripting</title>

<style type="text/css">
    html, body {height:100%; overflow:hidden; margin:0; }

.inhalt { background:rgb(240,240,240);
              position:absolute; left:25%; top:20%; width:75%; height:80%; overflow:auto; }

.menue  { position:absolute; left:0%; top:20%; width:25%; height:80%; overflow:auto;
              background:rgb(100,100,200); }

.top { background:rgb(255,255,200); text-align:center;
           position:absolute; left:0%; top:0%; width:100%; height:20%; overflow:auto; }
  </style>
</head>

<body>
<div class="top">
Minimalbeispiel zur Realisation eines frameartigen Layouts mit fixierter Navigation
neben scrollbaren Inhalten in reinem CSS. Das Konzept wurde vorgeschlagen von Klaus B.
in <a href="http://forum.de.selfhtml.org/?t=72601&m=418246">diesem Thread</a> des
<a href="http://forum.de.selfhtml.org/">SELFHTML Forums</a>.
</div>

<div class="menue">
<a href="fixnav.html">Erste Seite</a><br>
Zweite Seite<br>
Dritte Seite<br>
</div>

<div class="inhalt">
Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
</div>
</body>
</html>
---------------------------------------------------------------------------------

Bei mir super Darstellung in IE6, NS7.1, Mozilla FireFox und Opera 7.22, aber so was von gut...!

Gruß
Roland