Dez 30

Mit Hilfe von CSS Frames simulieren - Non-Scrolling-Regionen

Tag: CSS — Leichti @ 11:00 am

In einem anderen Kapitel habe ich beschrieben wie man mit Hilfe von PHP- Include fast alle vorteile von Frames nutzen kann, und hier möchte ich noch zeigen, dass es auch möglich ist, Bereiche mit CSS, ähnlich wie mit Frames, zu fixieren, sodass sie nicht mitzuscrollen (Eine sogenannte Non-Scrolling-Regionen)

Frames werden also in den meisten Fällen nur eingesetzt, um einen fixen
Bereich zu haben, der nicht mit scrollt (Non-Scrolling-Region), oder um eine zentrale Navigationsliste zu haben, welche man bei Änderungen auch nur einmal ändern muss(siehe dazu PHP-Include). Hier möchte ich zeigen, wie so etwas auch ohne Frames funktioniert – aus der
Überlegung heraus, dass es einfach zu schade ist, die zahlreichen Nachteile, vorallem die Suchmaschinenunfreundlichkeit, von Frames in Kauf zu nehmen, wenn das gewünschte Ziel auch anders erreichbar ist.

CSS kennt eine Positionierungseigenschaft position:fixed, welche mittels top, left, bottom und right absolut positioniert wird.
Die CSS Datei fix.css

#navigation {
position:fixed;
top:1em;
left:1em;
padding-right:1em;
border-right:black solid 4px;
height: 100%;
background: #EEE;
}
#content {
margin-left:7em;
margin-right:1em;
background: #CCC;
}

und die HTML datei

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1">
<title>Fixer Bereich</title>
<link rel="stylesheet" type="text/css" href="fix.css">
<!--[if gte IE 5]>
<link rel="stylesheet" type="text/css" href="ie-fix.css">
<![endif]-->
</head>
<body>
<div id="navigation">
<h1>Navigation</h1>
<ul>
<li><a href="">Seite 2</a></li>
<li><a href="">Seite 3</a></li>
<li><a href="">Seite 4</a></li>
</ul>
</div>
<div id="content">
<h1>Content</h1>
 
Content...
</div>
 
</body>
</html>

So, nun sieht das ganze erstmal so aus
Das div-Element mit der id Navigation wird nun beim scrollen nicht mehr mitgescrollt. Allerdings gibt es leider auch den Internet Explorer, der position:fixed bis einschließlich Version 6 nicht kennt. Doch für den Internet gibt es ein Workaround, mit Hilfe von Javascript!

Workaround für Internet Explorer bis Version 6

Zuerst einmal ändern wir unsere eigentliche fix.css Datei.

body >body > #navigation {
position:fixed;
top:20px;
left:20px;
width: 10em;
border-right:black solid 4px;
height: 100%;
background: #EEE;
}
body > #content {
margin-left:12em;
margin-right:10px;
background: #CCC;
}

Geändert wird die Syntax der Selektoren dahingehend, dass von den CSS-2.0-spezifischen
Adressierungsmöglichkeiten für Elemente Gebrauch gemacht wird. Diese werden vom
Internet Explorer ebenfalls nicht erkannt. Als Ergebnis ignoriert dieser Browser die
Formatdefinitionen für beide div-Bereiche komplett.
Stattdessen bekommt der IE eine nur für ihn lesbare
CSS-Datei spendiert. Dazu wird im HEAD-Bereich des HTML-Dokuments folgendes notiert:

Der IE interpretiert dieses Kommentar im Quelltext, und liest seine ie-fix.css Datei.

html, body {
overflow:hidden;
width:100%;
height:100%;
}
#navigation {
position:absolute;
top:20px;
left:20px;
padding-right:20px;
border-right:black solid 4px;
height: 100%;
background: #eee;
}
#content {
position:absolute;
top:0px;
left:200px;
margin-top:20px;
height:expression(document.body.clientHeight - 20 + "px");
width:expression(document.body.clientWidth - 200 + "px");
overflow:auto;
background: #ccc;
}

Nun sieht das ganze so aus, im Firefox und Co, ist aber kein unterschied zu sehen

Zunächst wird für die Basiselemente html und body festgelegt, dass diese die volle Breite und Höhe einnehmen. Gleichzeitig wird bestimmt, dass Inhalte, die länger oder breiter sind, einfach abgeschnitten werden (overflow:hidden, Überfluss unsichtbar). Die beiden div-Bereiche werden daraufhin beide absolut positioniert. Bis auf die Art der Positionierung sind die Formatdefinitionen für den Bereich navigation die gleichen wie in der normalen CSS-Datei. Bei den Definitionen für content gibt es hingegen einige Unterschiede. Mit position:absolute, top und left muss dessen gewünschte Anfangsposition bestimmt werden, da er ja absolut positioniert wird. Spannend sind die Zuweisungen an die CSS-Eigenschaften height und width. Anstelle eines festen Werts wird ein Wert zugewiesen, der mithilfe von JScript errechnet wird. Der Internet Explorer erlaubt das Zuweisen gewisser Funktionen an CSS-Eigenschaften,
unter anderem die Funktion expression(). Diese ermöglicht das Ausführen von JavaScript/JScript-Code. In den beiden Beispielangaben werden die Breite und die Höhe des zu positionierenden Bereichs aus der tatsächlichen Breite und Höhe bestimmt, die der in HTML in diesem Bereich notierte Inhalt einnimmt. Die Objekteigenschaften document.body.clientWidth und document.body.clientHeight liefern die Werte für den gesamten body-Bereich. Abgezogen werden die gewünschten Startpositionen des Inhaltsbereichs. Ausdrücklich
zugewiesen wird dann noch overflow:auto. Somit wird der der DIV-Bereich gescrollt, falls sein Inhalt es erfordert.

Mit Hilfe dieses Workarounds sollte ihre Seite nun in allen Browsern gleich aussehen - der Navigations-DIV sollte also richtig positioniert sein und nicht gescrollt werden.

Download

Download CSS Frames simulieren als .RAR Archiv
Download CSS Frames simulieren als .ZIP Archiv



Tags: , , , ,

Dein Kommentar