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, dieses Feature zurückzubringen, und ist einfacher zu realisieren als Frames.

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

<div class="navigation"> 
    <img alt="logo" src="expo.jpg" width="155" height="91" border="0"> 
    <a href="...">Rosa Kugel</a> 
     ...
    <strong>dazu:</strong> 
    <a href="...">Mit Stil</a> 
    <a href="...">Ohne Stil</a> 
</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 
    {  background-color: #FFFFF0; text-align: center;
       position: absolute; /* Mit Netz und doppeltem Boden,      */
       position: fixed;      /* falls fixed nicht implementiert ist  */  		 
       top: 2em; left: 2em; width: 9.6em;
       padding: 0.2em; border: 1px solid dimgray;
    }

In einem Browser, der CSS nicht unterstützt oder ausgeschaltet hat, wird die Navigation als ganz normaler Absatz mit ein paar Links dargestellt. 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.

Für Internet Explorer auf dem PC, in dem die fixed-Positionierung nicht installiert ist, sollte der <div>-Container absolut positioniert und die Regel direkt von einer fixed-Regel gefolgt werden. In Internet Explorer 5 auf dem Mac, Opera, Mozilla und Netscape 6/7 ist fixed implementiert und funktioniert so schön wie ehemals mit Frames.

div.navigation a  
  { font: bold 0.9em/200% Verdana, sans-serif; 
    display: block; 
    color: #333322; 
    text-decoration: none 
  }
div.navigation a, div.navigation strong 
  { border-top: 1px solid #778899 }
div.navigation a:first-child { border-top: none }

display: block macht aus dem <a>-Element im Container navigation ein Blockelement, so dass alle Elemente untereinander und nicht in einer Zeile hintereinander dargestellt werden. In einem Browser ohne Stylesheets erscheinen sie nebeneinander.

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.