Alternative Beispiele:


Validität:

© Kristof Lipfert 2002 Düsseldorf

Position Fixed für alle Browser per CSS

Kristof Lipfert
Dipl.-Des.(FH)

Web-Design Beispiel zum Tutorial CSS für alle Browser, Kapitel Position Fixed CSS

position: fixed; wird von den Browsern Internet Explorer bis Version 6 Windows ebensowenig unterstützt wie von Netscape 4. Es gibt verschiedene Möglichkeiten der Nachhilfe, so per DHTML mittels JavaScript, wie auch im Beispiel Position Fixed DHTML ausgeführt; die Möglichkeiten der IE per expression ein position:fixed nachzubilden werden dort dargestellt.

position: fixed; is not supported by webbrowser like the Internet Explorer up to version 6 or Netscape 4. There are different ways of simulating fixed like this way position fixed by DHTML with JavaScript or the similar expressions,

position fixed per CSS oder CSS, JavaScript und Frames

Natürlich ist eine Möglichkeit der festen Positionierung, z.B. einer Navigation, das Frameset, welches die Trennung der Navigation eigentlich optimal verwirklichen kann, und per noframe gibt es schließlich genug Freiheit um solch eine Lösung auch sicher zu machen.

Framesets must be mentioned here as a solution too. A typical HTML code with navigation and a "content":

So kann ein typischer frameähnlicher Aufbau im HTML-Quelltext aussehen, ein Div mit Navigation und eins mit dem "Inhalt"" der Seite:

 <body>
   <div id=divfixed>
      ...
   </div>
   <div id=divscroll>
      ...
   </div>
</body>

Naheliegend für relativ leistungsfähige Browser wie die Internet Explorer ist die Nutzung der Eigenschaft overflow:auto und ggf. die Scrollbarkeit von Divs um position:fixed crossbrowser einzusetzen, und tatsächlich kann für den IE 6 schon mit nur je einer CSS Anweisung zu Html- und Bodytag fixed verwirklicht werden.

Browser like the Internet Explorer know overflow:auto and allow to scroll elements like div, so the basic idea to get fixed here is given.

So funktioniert position fixed beim Internet Explorer

Meine einfache Lösung für die IEs bis 6 nutzt zwei bzw. drei minimalistische CSS-Weichen, benötig sehr wenig Code und funktioniert mit einer Ergänzung für den z-index auch noch beim Internet Explorer 4:

May simple solution needs a few CSS crossover and with an additional z-index works at the Internet Explorer 4 too:

/* Autor, Entwicklung 2002 Kristof Lipfert Duesseldorf  */

#divscroll { position:absolute; left:210px; top:10px; }

body > #divfixed {position:fixed}
* html body { margin:0; overflow-y:hidden; padding:0; }
* html #divscroll { height:100%;  width:100%; overflow:auto;
                    right:0; left:0; top:0; margin:0;
                    padding-left:210px; }

Die Eigenschaft overflow-y existiert nicht in CSS 2, wird aber als CSS 3 ohne Beanstandungen validiert. Warnungen des W3C-Validators lassen sich aber sowieso durch die Verwendung von Conditional Comments als Browserweiche für die IE 5 bis 6 verhindern, indem ein separates Stylesheet für nicht-IEs auskommentiert wird.

overflow-y is possible as CSS 3, but can be hidden by the use of conditional comments to avoid any warnings or problem. The sample given here depends on the quirks oder BackCompat mode of the IE 6, so here is one possible doctype:

Wichtig ist hier natürlich der Rendermodus bzw. doctype, der das Verhalten des IE6 verändert. Das Beispiel geht vom BackCompat Mode auch des IE 6 aus, dazu wird der Doctype z.B. so festgelegt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Nachdem nun die IEs mit position:fixed versorgt sind, kann bei einem einfachen Layout auch für Netscape 4 eine Lösung ohne springende Darstellung gefunden werden.

The solution for Netscape 4 should avoid flicker, so I did not use DHTML positioning but found a way to generate a frameset on the fly with the code from two small external scripts.

Position fixed für Netscape 4 lässt sich nicht nur per DHTML realisieren, per JavaScript kann auch dynamisch ein Frameset erzeugt werden. Die nötigen Schritte werden dabei entweder im Quelltext der HTML-Datei eingebunden, oder aber auf zwei externe Scriptdateien verteilt, um typische Probleme von Netscape 4 beim ersten Scriptaufruf zu vermeiden.

So schaut es im head der Datei aus, um die beiden Dateien für Netscape 4 zu laden:

<script src="position-fixed-nc4.js"
  type="text/javascript"></script>
<link rel="stylesheet"
 type="text/javascript" href="position-fixed-nc4.jss">

Das erste Script erzeugt dynamisch ein Frameset, wenn die Datei im Hauptfenster geladen wird. Wegen einiger Probleme des Browsers mit rekursionsähnlichen Effekten wird das Frameset erstmal leer erstellt und nicht gleich versucht die Datei wieder unmittelbar in die frames zu laden. Anschließend wird über die onload-Handler nacheinander in die Frames geladen. Dabei werden noch Parameter angehängt übergeben.

First step is an empty frameset to avoid loops.

/* Autor, Entwicklung 2002 Kristof Lipfert Duesseldorf  */

if(document.ids&&top.frames.length==0){
document.write('</head><'+
'frameset cols="300,*" border=0 frameborder=0'+
' framespacing=0><frame'+
' src="about:blank"" name="nfixed"'+
' scrolling=no border=0><'+
' frame src="about:blank" name="nscroll">'+
'</frameset></html>');
document.close;
window.onload=
function (){
window.top.nscroll.location.replace(
self.location.href+"?s");
window.top.nscroll.onload=
function(){
window.top.nfixed.location.replace(
self.location.href+"?f")
}}
}

Da bei XHTML strict ein Attribut target="_top" nicht valide wäre, muss ggf. das Script ergänzt werden um aufgerufene Links nicht im Frame zu öffnen. Eine Lösung direkt per JavaScript a la top.location.nfixed.target= ist offenbar nicht möglich, dafür kann für Netscape 4 ein base Tag eingefügt werden.

Now the needed help for links at Netcsape 4 in the frameset, if the use of XHTML strict does not allow target inside the code:

/* Autor, Entwicklung 2002 Kristof Lipfert Duesseldorf  */

if(document.ids)
    document.write("<base target=_top>");

Hier im zweiten Script, hier JSSS, wird abhängig vom per Search angehängten und übergebenen Wert in die Styleeigenschaften der Seite eingegriffen:

/* Autor, Entwicklung 2002 Kristof Lipfert Duesseldorf  */

if(this.location.search=="?s"){
     ids.divfixed.display="none";
     ids.divscroll.left="0px";
}

Wichtig wegen der Anwendung von JS-Styles ist der Verzicht auf Inlinestyles im späteren HTML-Code. Möglich wären auch Lösungen wie diese:

After the use of JSS I recommend to avoid inline styles.

/* Autor, Entwicklung 2002 Kristof Lipfert Duesseldorf  */

if(this.location.search=="?s")
    with (tags.body){
              position="absolute";
              top:0;
              left=-250;
           }

Wer noch weiter für den Internet Explorer 4 anpassen möchte, kann so per JavaScript die als default vorhandene Scrollbar des Body valide abschalten:

This script suppresses the useless but visible scrollbar from the Internet Explorer 4:

</head>
<body>
<script type="text/javascript">
if(!document.getElementById&&document.all)document.body.scroll="no";
</script>

Und um alternativ mit nur zwei, drei CSS-Anweisungen allein für den IE 6 position:fixed nachzubilden kann der Code auf das Wesentliche reduziert werden, wie diese sehr einfache Lösung von position fixed für den IE 6 bei einem zwei Spalten Tableless Layout zeigt.

Here a smart version of position:fixed for the IE 6 only: position fixed for the IE 6 at a two columns tableless layout with small reduced code.

 html { overflow-y: hidden; }
 body { height: 100%; overflow: auto; }

Copyright © Kristof Lipfert Düsseldorf 2002-2003