Absolut positioniert:

Das Schöne an Frames war die Navigationsleiste, die im klassischen Frameset auf der linken Seite festgemauert im Browserfenster stand. Sie erfüllte die Anforderung, dass der Kontext "Bei wem bin ich, wohin kann ich sonst noch" stets erhalten blieb, auch wenn sich der Besucher durch lange Seiten scrollte. CSS1 alleine reicht schon aus, uns dieses Feature zurückzubringen, und es auch noch einfacher in die Welt zu setzen als mit Frames. Hier ist zwar auch ein wenig CSS2 vertreten – das sind die verschiedenen Zustände der Hyperlinks –, aber diesen Part von CSS2 haben alle Browser integriert.

Das Navigationsmenü auf der linken Seite ist eine simple Ebene mit ein paar <a>-Elementen für Hyperlinks.

<div class="navigation" id="Layer2">
<a href="./"><img alt="Home" src="schluessel.gif" width="138" height="112" border="0"></a>
<a href="./">Rosa Kugel</a>
<a href="./">Gr&uuml;ne Kugeln</a>
<a href="./">Blaue Kugeln</a>
<a href="./">Software</a>
<a href="./">Gelbe Kugeln</a>
<a href="./">Murmeltausch</a>
<em>dazu:</em>
<a href="./">Mit Stil</a>
<a href="./">Mit wenig Stil</a>
<a href="./">Ohne Stil</a></p>
</div>

 

Damit die Ebene stets an der gleichen Stelle im Fenster bleibt und nicht scrollt, müssen wir sie durch ein paar Stile "festmauern":

div.navigation { margin: 0; font-size: 14pt;

font-weight: bold;
line-height: 180%;

text-align: center;

position: absolute; /* Mit Netz und doppeltem Boden, falls fixed nicht installiert ist */
position: fixed;
top: 2em;
left: 2em;
width: 170px;
right: auto; }


div.navigation p { margin: 0;
padding: 0.4em 0,2em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
line-height:200%;
background: #F0E68C;
border: thin outset #900;
color: white; }

 

div.navigation a, div.navigation em { display: block; margin: 0 0.5em }
div.navigation a, div.navigation em { border-top: 1px groove lightslategray }
div.navigation a:first-child { border-top: none }
div.navigation em { color: #CFC }
div.navigation a:link { text-decoration: none; color: peru }
div.navigation a:visited { text-decoration: none; color: seashell }
div.navigation a:hover { background: black; color: lightyellow }

 

In einem Browser, der CSS nicht unterstützt oder CSS ausgeschaltet hat, wird die Ebene als ganz normaler Absatz mit ein paar Links dargestellt. display: block macht aus dem <a>-Element in der Ebene ein Blockelement, so dass alle Elemente untereinander und nicht in einer Zeile hintereinander dargestellt werden. In einem Browser ohne Stylesheets erscheinen sie nebeneinander.

In einem Browser, der CSS1 vollständig implementiert hat, erscheint die Ebene wie vormals in einem Frame "festgemauert". Die interessante Regel hier lautet position: fixed. Sie sorgt für den festen Platz im Browserfenster.

Die Reihenfolge der letzten drei Stile ist wichtig. Sie legen alle drei das gleiche Element fest, so dass der letzte Stil die Farbe bestimmt. Wenn die Maus über den Link hovert, soll :hover angewendet werden – also muss es die letzte Regel sein.

Der Rest, all die Abstände, Rahmen und Farben, können entsprechend dem persönlichen Geschmack eingerichtet werden. Zu beachten wäre höchstens, dass über allen Links außer dem ersten ein Rahmen gesetzt ist. Der erste Link wird durch den Stil :first-child ausgespart – eine sehr schöne Technik, um Elemente voneinander zu trennen.

Für Netscape 4 sollte die Navigation besser als hidden deklariert werden.

Für Internet Explorer auf dem PC, in dem die fixed-Positionierung nicht installiert ist, sollte die Navigation absolut positioniert sein und die Anweisung direkt von einer fixed-Positionierung gefolgt werden. In Internet Explorer 5 auf dem Mac, in Opera, Mozilla und Netscape 6.1 ist fixed implementiert und funktioniert so schön wie ehemals mit Frames.

Am besten werden also zwei Stylesheets für diesen Effekt angelegt – ein Stylesheet mit ungefährlichen Stilen für Netscape 4, das mit einer Linkanweisung geladen wird, und ein Stylesheet für Internet Explorer und Netscape 6, das importiert wird.