CSS

Feststehende Fusszeile ohne Frame

(msc) Frames bieten eine einfache Möglichkeit, in einer Webseite feststehende Inhalte einzublenden. Indem man die Navigation in einen separaten Frame packt, kann man den Surfern jederzeit die wichtigen Rubriken anbieten, die auch beim Herunterscrollen nicht verschwinden.

Allerdings bieten Framesets eine Reihe von Nachteilen, zum Beispiel beim Drucken oder Verlinken, sodass Profis gänzlich auf Frames verzichten. Allerdings wäre es oftmals trotzdem praktisch, feststehende Elemente à la Framesets zu haben.

Mit CSS können Elemente als feststehend definiert werden. Das bedeutet, dass die Elemente nicht mitscrollen, sondern immer an der gleichen Stelle im Fenster zu sehen sind, auch wenn der Surfer in der Seite nach unten oder links wandert. Dazu dient die Eigenschaft «position» mit dem Wert «fixed». Solche feststehenden Elemente können sich wahlweise am linken, rechten, oberen oder unteren Rand des Eltern­elements «andocken»; dazu wird die Startposition entsprechend mit left, right, bottom oder top angegeben.

Auf diese Weise ist es recht einfach, zum Beispiel einen Footer, d.h. eine feststehende Fusszeile in die Seiten einzubauen – und zwar ganz ohne Framesets. Grundsätzlich braucht es dazu eine Klasse für die Fusszeile, sie sich am unteren Rand des Darstellungsbereiches zeigt und 0 Pixel Abstand zu der Fensterkante einnimmt:

#footer {position:fixed; bottom:0px;}

Damit die Fusszeile keinen scrollenden Inhalt verdeckt (was zu abgeschnittenen Buchstaben führen könnte und nicht schön aussieht), wird der restliche Seitenbereich entsprechend unten verkleinert.

#scrolling_content {padding-bottom:3em;}

Frames lassen sich mit CSS elegant umgehen. Allerdings sind, wie häufig bei CSS, auch in diesem Fall Browser-Inkompatibilitäten zu konstatieren. Der Internet Explorer kennt position:fixed nämlich nicht. (Man darf ihn deswegen zu Recht als ignorant verschreien.) Es bleibt die Zuflucht zu CSS-Hacks: Durch speziell angepasste Stylesheets lässt sich auch Microsofts Browser dazu herab, Elemente per CSS feststehend anzuzeigen. Eine ausführliche Anleitung und eine Vorlage mit feststehender Titelzeile, Navigation und Footer gibts auf Selfhtml.org:

http://aktuell.de.selfhtml.org/tippstricks/css/footer

Eine fest stehende Fusszeile, aber keine Frames: Über ein Stylesheet lassen sich fixe Elemente definieren, ohne dass die verpönten Frame-Tags zum Einsatz kommen.

Quelle: Publisher, Montag, 25. April 2005

Rubrik und Tags:

Faksimile

Metadaten
Thema: Webtipps
Nr: 6400
Ausgabe: 05-3
Anzahl Subthemen: 6

Obsolete Datenfelder
Bilder: 2
Textlänge: 84
Ort:
Tabb: FALSCH