Feststehendes Menü am Anfang einer Seite Drucken E-Mail
Scripting-Tipps - CSS

Ein feststehender Bereich im Kopf einer Webseite, welcher auch beim scrollen auf der Seite nicht verschwindet, ist für diverse Einsatzmöglichkeiten prädestiniert. Sinnvoll wäre zum Beispiel der Einsatz eines feststehenden Navigationsmenüs. Auch anzunehmen wäre ein Bereich für nützliche Informationen für den Besucher. Auch ein Einsatz als Werbefläche wäre denkbar. Die Einsatzmöglichkeiten sind sehr vielfältig.

Mit Hilfe von CSS ist dies auch gar nicht mal so schwierig anzustellen. Wie genau das funktioniert, und was Sie dazu alles brauchen, erfahren Sie anhand des folgenden Beispiels.


Um einen feststehenden Bereich im Seitenkopf mit Hilfe von CSS zu erstellen, müssen im Sytelsheet zunächst einige Definitionen gemacht werden.

Beispiel für das Stylesheet:

body {
height:100%;
margin:0;
padding:0;
}

#fest {   
left:0;
top:0;
width:100%;
height:80px;
background:yellow;
z-index:4;
}

body>#rahmen { padding-top:80px; }

body>#fest { position:fixed; }

body>#inhalt { position:static; }



Mittels den Befehlen <div>...</div> müssen die entsprechenden Elemente in der HTML-Datei noch entsprechend gekennzeichnet werden.

Beispiel HTML:

<body>
<div id="fest">
<p>Hier kommt das rein, was fest im Seitenkopf stehen soll</p>
</div> <div="rahmen">
<div="inhalt">Hier kommt der normale Inhalt Ihrer Webseite hinein</div>
</div>
</body>


Leider interpretieren ältere Versionen vom Internet Internet Explorer diese Angaben nicht richtig. Dabei kann es zu unschönen Effekten kommen. Um diese zu umgehen, kann man mit der Hilfe einer kleinen Browserweiche Abhilfe schaffen. Dazu muss eine eigene Stylesheet-Datei für die älteren Versionen vom Internet Explorer angefertigt werden. Für dieses Beispiel nennen wir diese Datei "css_ie5.css".

Folgendes Beispiel müssen Sie im <head>...</head>-Bereich Ihrer Webseite einfügen, damit das Stylesheet beim Internet Explorer aufgerufen wird.

Beispiel:

<!--[if gte IE 5.5000]>
<link rel="stylesheet" type="text/css" href="css_ie5.css" media="screen, projection" />
<![endif]-->


Die "css_ie5.css" enthält darüber hinaus noch folgende Angaben.

Beispiel:

html, body { overflow:hidden; }
#fest, #rahmen { position:absolute; }
#rahmen {
top:80px;
left:0;
height:90%;
height:expression(document.body.clientHeight - 80 + "px");
width:100%;
overflow:auto;
z-index:3;
}
 

Weitere Artikel: