Feststehendes Menü erstellen

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 du dafür brauchst, zeige ich dir anhand des folgenden Beispiels.

 

Um einen feststehenden Bereich im Seitenkopf mit Hilfe von CSS zu erstellen, musst du zuerst das Stylesheet festlegen.

 

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 div-Tags werden die entsprechenden Elemente in der HTML-Datei im Anschluss noch gekennzeichnet.

 

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>

 

Ganz alte Versionen vom Internet Explorer (Version 5) interpretieren diese Angaben nicht richtig und es kann zu unschönen Effekten kommen. Heutzutage sollte der IE 5 aber quasi ausgestorben sein. Solltest du, aus welchen Gründen auch immer, dennoch eine Kompatibilität zum IE5 brauchen, baue noch folgendes Stylesheet in den <head>-Bereich deiner Seite. Für dieses Beispiel nennen wir das Stylesheet css_ie5.css.

 

IE5-Stylesheet einbinden:

<!--[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;
 }

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.