Rols: Fixierte Navigation ohne Frames - einfaches Beispiel

Beitrag lesen

Hallo Mathias, Klaus und Iona,

Wär doch wirklich was für nen kurzen und knackigen Tipps und Tricks - Beitrag.

Definitiv ja! (Aber nicht von mir, schließlich ist das nicht auf meinem Mist gewachsen) Auf jeden Fall sollte dieser Ansatz über die Suche gefunden werden.

Ich habe jetzt mal eine Minimallösung gebastelt, die ein klassisches Drei-Frame-Layout nachahmt und so einfach ist, daß sich das auch jeder CSS-Einsteiger für eigene Zwecke hinbiegen kann:

---------------------------------------------------------------
<?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;}

.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:100%; overflow:hidden;
              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:hidden; }
  </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>
---------------------------------------------------------------

Um das Scrollen zu testen, die Textmenge im Hauptdiv (Inhalt) vergrößern.

Wäre schön, wenn noch andere einen Blick drauf werfen könnten, eventuelle Dummheiten meinerseits korrigieren und vor allem das Ganze mal mit verschiedensten Browserversionen und -einstellungen ausprobieren könnten.

Gruß
Roland