SELFHTML/Navigationshilfen Stylesheets CSS-basierte Layouts
Fixe Bereiche mit CSS-basierten Layouts
Sinnvoller Einsatz fixer Bereiche
Layout mit fixem Bereich definieren
Workaround für den Internet Explorer
| SELFHTML/Navigationshilfen Stylesheets CSS-basierte Layouts |
|
|
Fixe Bereiche mit CSS-basierten Layouts |
|
|
|
| | |
Sie möchten Ihr Logo oder Ihre Navigation ständig auf Ihrer Seite anzeigen, auch wenn der Seiteninhalt ein Scrollen erfordert? Die Nachteile des Einsatzes von 
Frames bzw. 
eingebetteten Frames hierzu haben Sie sicherlich schon entdeckt. Eine andere Möglichkeit wäre, die Seitenelemente passend für eine bestimmte Fenstergröße zu positionieren und hierin einen scrollbaren Bereich über die CSS-Eigenschaft overflow für den Inhalt zur Verfügung zu stellen, was aber sehr unflexibel ist und seiteninterne Scrollbalken bedingt.
Über die CSS-Eigenschaft position können Sie Seitenelemente an einer bestimmten Position im Fenster fixieren, sodass sie nicht mit dem übrigen Seiteninhalt wegscrollen. Dies ist jedoch nur eingeschränkt sinnvoll: Ein am oberen Fensterrand fixiertes Element schränkt den zur Verfügung stehenden scrollbaren Bereich ein. Der Inhalt kann weniger gut übersehen werden und übermäßiges Scrollen erfordern, was die Nutzbarkeit der Seite verschlechtert. Hinzu können Probleme mit seiteninternen Ankern kommen. Stellen Sie sich daher die Frage, ob z.B. ein ständig sichtbares Logo derart informativ ist, dass diese Einschränkungen gerechtfertigt sind.
Sinnvoll kann dagegen eine am linken (oder rechten) Fensterrand fixierte vertikale Navigationsleiste sein. Der zur Seitenanzeige genutzte Fensterbereich ist durch die Bedienelemente meist wesentlich breiter als hoch. Hinzu kommt, dass eine Beschränkung der Zeilenbreite sich positiv auf die Lesbarkeit des Textes auswirken kann und der freie Bereich unter einer seitlich platzierten Navigation meist ohnehin nicht genutzt wird. Ein ständig sichtbares Menü kann die Benutzerfreundlichkeit erhöhen und bei längeren Texten "nach oben"-Links entbehrlich machen.
Die fixierte Positionierung ist aber selbst hierfür nicht problemlos einzusetzen. Sie eignet sich nur für relativ kurze Navigationsleisten, die selbst in sehr kleinen Browserfenstern vollständig angezeigt werden können, da sie ja wie gewünscht nicht mit der Seite scrollen. Außerdem erfordert dies einen umständlichen Workaround für den Internet Explorer, der diese Technik auch in Version 6 noch nicht unterstützt.
 |
Das folgende Beispiel demonstriert die Anwendung der CSS-Eigenschaft position:fixed, die über eine spezielle CSS-Browserweiche ausschließlich modernen Browsern zugänglich gemacht wird. Für andere Browser ist position:absolute angegeben, sodass die Ausgangsposition der Elemente auch in veralteten Browsern wie Netscape 4 zwar gleich ist, der nicht fixierbare Bereich jedoch normal mit der Seite scrollt.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fixierte Navigation nur für moderne Browser</title>
<style type="text/css">
body, p a {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: white;
}
p {
margin: 3em 0 0 3em; /* Positionierung des 'zurueck'-Links */
}
html {
padding: 0;
}
body {
margin: 0; padding: 0;
}
#fixiert {
position: absolute;
top: 2.8em; left: 2em;
width: 18em;
background-color: white;
border: 1px solid silver;
}
html>body #fixiert { /* nur fuer moderne Browser! */
position: fixed;
}
#fixiert img {
height: 6.8em; float: right;
}
#Inhalt {
margin-left: 22em; padding: 0 1em;
border-left: 2px ridge gray; border-top: 2px ridge gray;
}
* #Inhalt { /* versteckt vor Netscape 4 */
background-color: #ffffe0;
}
#Inhalt h2 {
font-size: 1.2em;
margin: 2em 5% 2em;
color: maroon;
border-bottom: 1px solid silver;
}
#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
#Inhalt #Fusszeile {
font-size: 0.9em;
margin: 200em 0 0; padding: 0.1em;
text-align: center;
background-color: #fed; border: 1px solid silver;
}
h1 {
font-size: 1.5em;
margin: 0.5em; padding: 0.3em;
text-align: center;
background-color: #fed;
border: 2px ridge gray;
}
#Navigation {
font-size: 0.83em;
margin: 0 0 1.2em; padding: 0;
}
#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: black; background-color: #eee;
}
ul#Navigation a:visited {
color: #666; background-color: #eee;
}
ul#Navigation a:hover {
color: black; background-color: white;
}
ul#Navigation a:active {
color: white; background-color: gray;
}
</style>
</head>
<body>
<div id="Scrollbereich"> <!-- erst fuer den folgenden Workaround benoetigt -->
<h1>Fixierte Navigation</h1>
<div id="Inhalt">
<h2>Beispiel nur für moderne Browser</h2>
<p>In diesem Beispiel ist die linke Navigation zunächst absolut positioniert
und wird anschließend über eine Browserweiche nur für moderne Browser fixiert.
Hierdurch kommt es in älteren Browsern zu keinen Fehldarstellungen und auch
diese setzen die erst am Ende des Quelltextes notierte Navigation nach oben.</p>
<p>Für dieses Beispiel ist das "mehrspaltige Layout mit Kopf-
und Fußzeile" der vorherigen Seite etwas modifiziert worden.
Es passt sich der Fenster- und Schriftgröße an und sogar
das SELFHTML-Logo 'wächst' durch die Höhenangabe in <strong>em</strong>
mit einer Schriftvergrößerung.</p>
<p>Beachten Sie, dass der fixierte Bereich teilweise unzugänglich wird,
wenn die Höhe des Browserfensters sehr stark verringert
und/oder die Schriftgröße heraufgesetzt wird!</p>
<p id="Fusszeile">Sie haben tatsächlich bis hierhin gescrollt? ;-)</p>
</div>
</div>
<div id="fixiert"> <!-- verhindert auch Anzeigefehler einer fixierten ul -->
<ul id="Navigation">
<li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
<li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
<li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
<li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
<li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
</ul>
<img src="../../../src/logo.gif" alt="SELFHTML">
<p><a href="../fixbereiche.htm#definieren">zurück</a></p>
</div>
</body>
</html>
Dieses Beispiel zeigt, wie simpel eine fixierte Navigation zu realisieren wäre, wenn der zur Zeit meistgenutzte Browser den bereits 1998 veröffentlichten Standard CSS 2 hinreichend unterstützen würde. Andererseits interpretiert der Internet Explorer schon seit Version 5.0 eine CSS-Eigenschaft, die für CSS 3 zu erwarten ist und einen Workaround ermöglicht.
Dieses Beispiel demonstriert drei Vorteile sowohl fixierter als auch absoluter Positionierung:
Es sind Überlagerungen (hier des Kopfbereichs mit der Überschrift) möglich, die bei entsprechender Umsicht für gestalterische Zwecke sinnvoll eingesetzt werden können.
Später im Quelltext notierte Elemente (hier der Navigationsbereich) können dennoch vor anderen Elementen im Fenster platziert werden, wodurch der Inhaltsbereich von textbasierten Anwendungen wie Screenreadern oder Suchmaschinen günstiger zu erreichen ist.
Absolute Positionierung ist für ältere Browser weniger problematisch als auf der CSS-Eigenschaft float basierende Layouts.
Fixierte oder absolute Positionierung ist nicht in jedem Fall sinnvoll einzusetzen und kann die zuvor bei den mehrspaltigen CSS-basierten Layouts eingesetzte Eigenschaft float nicht in allen Belangen ersetzen.
Fixiert positionierte Elemente sind auch dann nicht scrollbar, wenn sie durch kleinere Fenstergröße oder größeren Schriftgrad nicht mehr in den Anzeigebereich passen. Diese Art der Positionierung eignet sich daher nur für Elemente, die relativ wenig Platz benötigen. So wäre es doch sehr ungünstig, wenn bei einer umfangreicheren Navigation ausgerechnet der oft zuletzt angegebene Link zum Impressum außerhalb des Anzeigebereiches unerreichbar positioniert werden würde.
| |
Da der Internet Explorer der einzige aktuelle (grafische) Browser ist, der position:fixed nicht unterstützt, reicht ein Workaround für diesen Browser, um diese CSS-Eigenschaft praxistauglich einzusetzen. Hierzu sind die folgenden Anweisungen zusätzlich im <head>-Bereich der HTML-Datei notiert:
Anzeigebeispiel: So sieht's aus
<!--[if IE]><style type="text/css">
@media screen {
html, body {
height: 100%; overflow-y: hidden;
}
#Scrollbereich {
height: 100%; width: 100%; overflow: auto;
}
#Inhalt {
position: static;
}
}
</style><![endif]-->
Um diese (noch) ungültigen CSS-Angaben nur dem Internet Explorer zugänglich zu machen, werden sie über einen conditional comment in der HTML-Datei eingebunden. Sie können die CSS-Definitionen in diesem <style>-Bereich auch mit @import auslagern oder das <link>-Element hierzu verwenden.
Zunächst wird für den Anzeigebereich eine Höhe von 100% definiert und über die erst für CSS 3 vorgesehene Eigenschaft overflow-y:hidden ein (doppelter) vertikaler Scrollbalken verhindert. Im HTML-Quelltext wurden die zu scrollenden Elemente bereits in einem div#Scrollbereich gruppiert, das nun den gesamten Anzeigebereich ausfüllen soll und über overflow:auto die Scrollfunktion übernimmt. Der hierin enthaltene Inhaltsbereich ist explizit position:static zu definieren, auch wenn dies eigentlich dem Initialisierungswert entspricht.
Das div#fixiert mit der Navigation ist im HTML-Quelltext außerhalb des nun scrollbaren Elementes notiert und (für den Internet Explorer) bereits absolut positioniert, wodurch es vom Scrollen ausgeschlossen wird und auf diese alternative Weise am Bildschirm fixiert ist.
Wichtig ist, dass Sie diesen Workaround (über @media screen) ausschließlich für die Bildschirmdarstellung einsetzen, da Scrollbalken im Ausdruck funktionslos wären.
|
| |
 |
CSS-basierte Navigationsleisten
|
 |
Mehrspaltige CSS-basierte Layouts
|
| SELFHTML/Navigationshilfen Stylesheets CSS-basierte Layouts |
|
© 2005 Impressum