Auf ein Neues - ohne Frameset ...
Gestaltung mit fixierten Randbereichen
Prinzipiell ...
... prinzipiell ... kann man ein Element, einen Bereich fixieren -
indem man ihn mit dem Parameter
position: fixed; "garniert".
Dabei muß man sich allerdings Gedanken machen,
welcher Bereich "drüber" und welcher "drunter" liegen soll ...
und die Elemente dann entsprechend der Reihenfolge anordnen:
Was "oben" liegen soll, kommt zuletzt!
Nur ...
der Internet-Explorer beherrscht den Parameter
position: fixed; leider erst ab Version 7 so recht -
an andere Browser mag ich garnicht erst denken. Sollen ja besser sein ...?
Sonderbehandlung für den Internet Explorer 5 und 6
Von der Funktion her ist es so, dass für neuere Browser die Randbereiche fixiert sind, also beim Scrollen nicht mit bewegt werden. Für IE5 und IE6, die diese Funktion nicht (voll) unterstützen, wird grade "andersherum" gearbeitet:
Da wird der Inhaltsbereich mit Scrollbalken explizit beweglich gestaltet, während das Scrollen der Gesamt-Seite unterdrückt wird:
/* Sonderbehandlung IE5 + IE6 für fixierte Bereiche =========================== */
@media screen { /* Anweisungen für Bildschirm-Ausgabe */
/* ^ ... braucht der IE 7 !!? */
egal {} /* Diese "Krücke" braucht der IE 6 !!? */
body {height: 100%; /* Definition Gesamt-Bereich */
width: 100%;
overflow-y: hidden; /* kein extra Scrollbalken für body */
overflow-x: hidden; /* damit wird Scrollen von body verhindert */
}
#Scrollbereich {height: 100%; /* Definition Scrollbereich */
width: 100%;
overflow: auto;} /* Wenn zu lang, dann Scrollbalken */
#Inhalt {position: static;} /* Standard-Anordnung der Elemente im Inhalt */
}
In der HTML-Datei wird zuerst der "Scrollbereich" mit dem "Inhalt" definiert:
<body>
<div id="Scrollbereich"> <!-- Scrollbereich -->
<div id="Inhalt">
:
: <!-- Inhaltsbereich -->
:
</div> <!-- Bereich "Inhalt" ENDE -->
</div> <!-- "Scrollbereich" ENDE -->
Erst danach folgt die Definition der (Rand-)Bereiche, die nicht bewegt werden sollen:
<div id="Banner"></div> <!-- Fixbereich oben (Banner) -->
<div id="Leiter"></div> <!-- Fixbereich seitlich (Leiter) -->
:
: <!-- ggf. weitere Fixbereiche -->
<body>
Durch diese Anordnung der Elemente verschwindet der bewegliche Inhalt beim Scrollen hinter den fixierten Bereichen - allerdings dürfen diese nicht "durchsichtig" sein, sollten also zumindest eine Hintergrundfarbe zugewiesen bekommen.
Positioniert werden die (Rand-)Bereiche durch folgende CSS-Anweisungen:
#Banner {position: absolute; /* für ältere Browser */
top: 0; left: 0; /* Position Banner (oben) */
width: 100%; height: 150px;
background-color: #DAC5AA;
:
}
#Leiter {position: absolute; /* für ältere Browser */
top: 150px; left: 0; /* Position Leiter (seitlich) */
width: 250px; height: 100%;
background-color: ... ; /* Hintergrund definieren, */
: /* damit der Text verschwindet */
}
Fixierung in modernen Browsern
Die für IE5 und IE6 notwendige Methode zur Fixierung von (Rand-)Bereichen funktioniert natürlich auch in modernen Browsern - allerdings nicht immer zufriedenstellend (z.B. bzgl. Scrollbalken)
Für diese ist es also besser, den neuen Parameter position: fixed;
zu verwenden.
Um nun beide Methoden in ein und derselben HTML-Datei unterzubringen,
nutzt man eine Funktion, die nur neuere Browser interpretieren können,
um den Parameter position: absolute; der Fixbereiche
nachträglich zu ändern:
#Banner {position: absolute; /* für ältere Browser */
top: 0; left: 0; /* Position Banner (oben) */
:
}
#Leiter {position: absolute; /* für ältere Browser */
top: 150px; left: 0; /* Position Leiter (seitlich) */
:
}
html>body #Banner {position: fixed;} /* IE5+IE6 verstehen die Schachtelung nicht */
html>body #Leiter {position: fixed;} /* ... und ignorieren die Anweisung. */
/* In neueren Browsern wie IE7, IE8, FF */
/* wird der Parameter zugewiesen. */
Auf diese Weise läßt sich in allen aktuellen Browsern ein ähnliches Erscheinungsbild erzeugen.
Die Methode, Interpretationsschwächen oder -fehler von Browsern auszunutzen, um Parameter für bestimmte Browser (nicht) zugänglich zu machen, nennt man CSS-Hacks
Der Internet-Explorer bietet daneben die Funktion Browser-Weiche an, um auf Versionsunterschiede eingehen zu können.
wenn die Fenstergröße reduziert ist und/oder die Schriftgröße heraufgesetzt
bzw. die ganze Seite vergrößert wird!
|
Letzte Aktualisierung: 02.04.2010 |
Sie befinden sich hier: MyWay2Web > Denkzettel > Fixierung |
Impressum |
