Nase
2004-08-08, 21:37:31
Frames simulieren mittels CSS
In Anlehnung an den Artikel "Frames - lieber links liegen lassen?" beschreibt dieser Artikel, wie man mittels Cascading Style Sheets (http://www.w3.org/Style/CSS/) (CSS) recht einfach die Verwendung von Frames umgehen und gleichzeitig zu einem Ergebnis gelangen kann, dass Frames ähnlich ist.
Allgemeines zu CSS
CSS wurde im Dezember 1996 zum offiziellen Standard ernannt. Knapp eineinhalb Jahre später wurde im Mai 1998 dann CSS2 vorgestellt. Daher können auch Browser, die vor 1996 entwickelt wurden, nicht wirklich viel mit CSS anfangen. Weiter schlimm ist dies allerdings nicht, da der Inhalt der Seite nicht verworfen wird, also trotzdem angezeigt werden kann. Lediglich die Style-Angaben, also die optischen Effekte wie Farben, Abstände, Hintergrundbilder etc., werden nicht dargestellt. Das dies zu Problemen führen kann, wird im Abschnitt "Probleme bei der Verwendung von CSS mit älteren/inkompatiblen Browsern" näher erläutert.
Projektentwicklung: 3-Spalten-Layout
Bevor wir anfangen den CSS-Code zu entwickeln, blicken wir noch mal auf ein Frameset zurück, das das gleiche Ergebnis zustande bringt.
<!doctype html public "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Ein einfaches 3-Spalten-Frameset</title>
</head>
<frameset cols="200, *, 200">
<frame src="navi_links.html">
<frame src="hauptteil.html">
<frame src="navi_rechts.html">
<noframes>
Dieser Bereich ist ziemlich wichtig, und sollte dementsprechend aussagekräftig gestaltet werden.
</noframes>
</frameset>
</html>
Wie man klar sehen kann, ein einfacher Aufbau. Es wird ein Frameset erstellt, das drei Spalten nebeneinander zeichnet, wobei die erste Spalte 200 Pixel, die mittlere variabel und die rechte ebenfalls 200 Pixel breit ist. Zu beachten ist der Doctype. Dieser bezieht sich auf HTML 4.01 Frameset (http://www.w3.org/TR/REC-html40/present/frames.html). Zusätzlich ist noch die URI zum Doctype angegeben, um sicherzustellen, dass die Browser in den Standard- bzw. Almost-Standard-Modus wechseln. Was das bedeutet, beschreibt ein Artikel bzgl. der verschiedenen Doctypes und Anwendungsweisen von Fabrice Pascal (http://www.fabrice-pascal.de/artikel/dtd/) sehr anschaulich.
Nun gut. Es gilt nun, diesen Code in CSS zu "übersetzen". Fangen wir mit dem HTML-Grundgerüst an. Als Doctype wähle ich in diesen Fall HTML 4.01 Strict (http://www.w3.org/TR/REC-html40/). Änderungen zum vorhergehenden Schritt werden fett markiert.
Schritt 1:
<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>3-Spalten-Layout mit CSS</title>
</head>
<body>
Das Grundgerüst steht!
</body>
</html>
Soweit noch nichts Besonderes. Ein HTML-Dokument, das den Satz "Das Grundgerüst steht" ausgibt. Um das Beispiel etwas einfacher zu halten, wird der CSS-Code direkt in den HTML-Text geschrieben und nicht in eine externe Datei ausgelagert.
Schritt 2:
<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>3-Spalten-Layout mit CSS</title>
<style type="text/css">
<!--
body, html {
height: 100%;
margin: 0px;
padding: 0px;
}
//-->
</style>
</head>
<body>
Das Grundgerüst steht!
</body>
</html>
Um überhaupt zu einem brauchbaren Ergebnis zu kommen, müssen wir erst einen kleinen Trick anwenden. Dem <body> und <html>-Tag muss die Eigenschaft zugewiesen werden, dass sie 100% des Anzeigebereichs des Browsers einnehmen. Margin: 0px; und padding: 0px; geben an, dass Text direkt an den Grenzen des Anzeigebereichs dargestellt wird. Dies verhindert lediglich einen unschönen optischen Effekt.
Schritt 3:
<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>3-Spalten-Layout mit CSS</title>
<style type="text/css">
<!--
body, html {
height: 100%;
margin: 0px;
padding: 0px;
}
#hauptteil {
}
#naviLinks {
}
#naviRechts {
}
//-->
</style>
</head>
<body>
<div id="naviLinks">
Das hier ist die linke Navigation. Im Frameset wäre das der linke Frame. Breite: 200 Pixel.
</div>
<div id="hauptteil">
Der Inhaltsteil der Homepage. Der mittlere Frame des Framesets. Variable Breite.
</div>
<div id="naviRechts">
Die rechte Navigationsspalte. Im Frameset der rechte Frame. Breite: ebenfalls 200 Pixel.
</div>
</body>
</html>
Was ist passiert? Wir haben den ursprünglichen Text gegen drei <div>-Container ausgetauscht. Diese stellen im späteren Verlauf die simulierten Frames dar. Jedem <div> wurde eine eigene id gegeben, damit sie später per CSS gestaltet werden können. Dem <style>-Bereich wurden schon leere Definitionen hinzugefügt.
Füllen wir also unsere <div>-Container mit Leben.
Schritt 4:
<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>3-Spalten-Layout mit CSS</title>
<style type="text/css">
<!--
body, html {
height: 100%;
margin: 0px;
padding: 0px;
}
#hauptteil {
background-color: #def;
height: 100%;
margin: 0px 200px;
overflow: auto;
width: auto;
}
#naviLinks {
background-color: #abc;
height: 100%;
left: 0px;
overflow: auto;
position: absolute;
top: 0px;
width: 200px;
}
#naviRechts {
background-color: #abc;
height: 100%;
overflow: auto;
position: absolute;
right: 0px;
top: 0px;
width: 200px;
}
//-->
</style>
</head>
<body>
<div id="naviLinks">
Das hier ist die linke Navigation. Im Frameset wäre das der linke Frame. Breite: 200 Pixel.
</div>
<div id="hauptteil">
Der Inhaltsteil der Homepage. Der mittlere Frame des Framesets. Variable Breite.
</div>
<div id="naviRechts">
Die rechte Navigationsspalte. Im Frameset der rechte Frame. Breite: ebenfalls 200 Pixel.
</div>
</body>
</html>
Zu beachten sind die Angaben height, overflow, position und margin. Height: 100%; in allen drei Definitionen gibt allen drei Containern, wie sollte es anders sein, eine Höhe von 100%. Die Container erstrecken sich somit vom oberen Rand des Anzeigebereichs bis zum unteren. Overflow: auto; bedeutet, dass der Browser Scrollbalken anbieten soll, wenn die Inhalte in einem Container mehr Platz einnehmen, als vorhanden ist. Ohne dieses Attribut würde der Container gestreckt werden, bis der Inhalt ausreichend Platz hat. Da wir dieses Verhalten aber nicht wollen, und Frames dieses Verhalten auch nicht an den Tag legen, müssen wir auf overflow zurückgreifen. Position: absolute; ist nun das wirklich Entscheidende. Hiermit werden die beiden Navigationsspalten fest angeordnet. Top, left und right geben dabei die Position an. Da die linke Navigation links oben und die rechte Navigation rechts oben beginnen sollen, sind die Attribute top, left und right auf 0px (null Pixel) gesetzt. Um den dritten Container nun zwischen die beiden Navigationsleisten zu setzen, ist es notwendig, den Seitenabstand zum Anzeigebereich festzulegen. Margin: 0px 200px; bedeutet, dass zum oberen und unteren Rand (erste Angabe: 0px) kein Freiraum, zum linken und rechten Rand (zweite Angabe: 200px) bestehen soll, damit sich die Container nicht überschneiden. Die Breite dieses Containers wird im Gegensatz zu den anderen Spalten automatisch bestimmt (width: auto).
Das wäre dann auch schon alles! Wir haben mit relativ einfachen Mitteln in nur vier Schritten ein Layout geschrieben, dass von einem Frameset kaum noch zu unterscheiden ist.
Probleme bei der Verwendung von CSS mit älteren/inkompatiblen Browsern
Der Idealfall wäre natürlich, dass alle auf dem Markt befindlichen Browser CSS in vollem Umfang unterstützen. Da dies natürlich nicht der Fall ist, kommt es immer wieder zu Problemen bei dessen Benutzung. Der schlimmste Fall, der eintreffen kann ist, dass ein Browser nur Teile der Spezifikation erfüllen kann. Und leider ist dies keine Theorie sondern Praxis und nennt sich Internet Explorer. Somit wird es ziemlich schwierig, ein Design und Layout zu erstellen, das auf nahezu allen Browsern gleich aussieht. Während z.B. Mozilla Firefox ein Element richtig handhabt passiert im Internet Explorer damit überhaupt nichts. Zu den meisten bekannten Problemen gibt es zwar Workarounds, doch sind diese wieder mit zusätzlicher Arbeit verbunden, die man sich durch den Einsatz von CSS eigentlich sparen wollte.
In Anlehnung an den Artikel "Frames - lieber links liegen lassen?" beschreibt dieser Artikel, wie man mittels Cascading Style Sheets (http://www.w3.org/Style/CSS/) (CSS) recht einfach die Verwendung von Frames umgehen und gleichzeitig zu einem Ergebnis gelangen kann, dass Frames ähnlich ist.
Allgemeines zu CSS
CSS wurde im Dezember 1996 zum offiziellen Standard ernannt. Knapp eineinhalb Jahre später wurde im Mai 1998 dann CSS2 vorgestellt. Daher können auch Browser, die vor 1996 entwickelt wurden, nicht wirklich viel mit CSS anfangen. Weiter schlimm ist dies allerdings nicht, da der Inhalt der Seite nicht verworfen wird, also trotzdem angezeigt werden kann. Lediglich die Style-Angaben, also die optischen Effekte wie Farben, Abstände, Hintergrundbilder etc., werden nicht dargestellt. Das dies zu Problemen führen kann, wird im Abschnitt "Probleme bei der Verwendung von CSS mit älteren/inkompatiblen Browsern" näher erläutert.
Projektentwicklung: 3-Spalten-Layout
Bevor wir anfangen den CSS-Code zu entwickeln, blicken wir noch mal auf ein Frameset zurück, das das gleiche Ergebnis zustande bringt.
<!doctype html public "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Ein einfaches 3-Spalten-Frameset</title>
</head>
<frameset cols="200, *, 200">
<frame src="navi_links.html">
<frame src="hauptteil.html">
<frame src="navi_rechts.html">
<noframes>
Dieser Bereich ist ziemlich wichtig, und sollte dementsprechend aussagekräftig gestaltet werden.
</noframes>
</frameset>
</html>
Wie man klar sehen kann, ein einfacher Aufbau. Es wird ein Frameset erstellt, das drei Spalten nebeneinander zeichnet, wobei die erste Spalte 200 Pixel, die mittlere variabel und die rechte ebenfalls 200 Pixel breit ist. Zu beachten ist der Doctype. Dieser bezieht sich auf HTML 4.01 Frameset (http://www.w3.org/TR/REC-html40/present/frames.html). Zusätzlich ist noch die URI zum Doctype angegeben, um sicherzustellen, dass die Browser in den Standard- bzw. Almost-Standard-Modus wechseln. Was das bedeutet, beschreibt ein Artikel bzgl. der verschiedenen Doctypes und Anwendungsweisen von Fabrice Pascal (http://www.fabrice-pascal.de/artikel/dtd/) sehr anschaulich.
Nun gut. Es gilt nun, diesen Code in CSS zu "übersetzen". Fangen wir mit dem HTML-Grundgerüst an. Als Doctype wähle ich in diesen Fall HTML 4.01 Strict (http://www.w3.org/TR/REC-html40/). Änderungen zum vorhergehenden Schritt werden fett markiert.
Schritt 1:
<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>3-Spalten-Layout mit CSS</title>
</head>
<body>
Das Grundgerüst steht!
</body>
</html>
Soweit noch nichts Besonderes. Ein HTML-Dokument, das den Satz "Das Grundgerüst steht" ausgibt. Um das Beispiel etwas einfacher zu halten, wird der CSS-Code direkt in den HTML-Text geschrieben und nicht in eine externe Datei ausgelagert.
Schritt 2:
<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>3-Spalten-Layout mit CSS</title>
<style type="text/css">
<!--
body, html {
height: 100%;
margin: 0px;
padding: 0px;
}
//-->
</style>
</head>
<body>
Das Grundgerüst steht!
</body>
</html>
Um überhaupt zu einem brauchbaren Ergebnis zu kommen, müssen wir erst einen kleinen Trick anwenden. Dem <body> und <html>-Tag muss die Eigenschaft zugewiesen werden, dass sie 100% des Anzeigebereichs des Browsers einnehmen. Margin: 0px; und padding: 0px; geben an, dass Text direkt an den Grenzen des Anzeigebereichs dargestellt wird. Dies verhindert lediglich einen unschönen optischen Effekt.
Schritt 3:
<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>3-Spalten-Layout mit CSS</title>
<style type="text/css">
<!--
body, html {
height: 100%;
margin: 0px;
padding: 0px;
}
#hauptteil {
}
#naviLinks {
}
#naviRechts {
}
//-->
</style>
</head>
<body>
<div id="naviLinks">
Das hier ist die linke Navigation. Im Frameset wäre das der linke Frame. Breite: 200 Pixel.
</div>
<div id="hauptteil">
Der Inhaltsteil der Homepage. Der mittlere Frame des Framesets. Variable Breite.
</div>
<div id="naviRechts">
Die rechte Navigationsspalte. Im Frameset der rechte Frame. Breite: ebenfalls 200 Pixel.
</div>
</body>
</html>
Was ist passiert? Wir haben den ursprünglichen Text gegen drei <div>-Container ausgetauscht. Diese stellen im späteren Verlauf die simulierten Frames dar. Jedem <div> wurde eine eigene id gegeben, damit sie später per CSS gestaltet werden können. Dem <style>-Bereich wurden schon leere Definitionen hinzugefügt.
Füllen wir also unsere <div>-Container mit Leben.
Schritt 4:
<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>3-Spalten-Layout mit CSS</title>
<style type="text/css">
<!--
body, html {
height: 100%;
margin: 0px;
padding: 0px;
}
#hauptteil {
background-color: #def;
height: 100%;
margin: 0px 200px;
overflow: auto;
width: auto;
}
#naviLinks {
background-color: #abc;
height: 100%;
left: 0px;
overflow: auto;
position: absolute;
top: 0px;
width: 200px;
}
#naviRechts {
background-color: #abc;
height: 100%;
overflow: auto;
position: absolute;
right: 0px;
top: 0px;
width: 200px;
}
//-->
</style>
</head>
<body>
<div id="naviLinks">
Das hier ist die linke Navigation. Im Frameset wäre das der linke Frame. Breite: 200 Pixel.
</div>
<div id="hauptteil">
Der Inhaltsteil der Homepage. Der mittlere Frame des Framesets. Variable Breite.
</div>
<div id="naviRechts">
Die rechte Navigationsspalte. Im Frameset der rechte Frame. Breite: ebenfalls 200 Pixel.
</div>
</body>
</html>
Zu beachten sind die Angaben height, overflow, position und margin. Height: 100%; in allen drei Definitionen gibt allen drei Containern, wie sollte es anders sein, eine Höhe von 100%. Die Container erstrecken sich somit vom oberen Rand des Anzeigebereichs bis zum unteren. Overflow: auto; bedeutet, dass der Browser Scrollbalken anbieten soll, wenn die Inhalte in einem Container mehr Platz einnehmen, als vorhanden ist. Ohne dieses Attribut würde der Container gestreckt werden, bis der Inhalt ausreichend Platz hat. Da wir dieses Verhalten aber nicht wollen, und Frames dieses Verhalten auch nicht an den Tag legen, müssen wir auf overflow zurückgreifen. Position: absolute; ist nun das wirklich Entscheidende. Hiermit werden die beiden Navigationsspalten fest angeordnet. Top, left und right geben dabei die Position an. Da die linke Navigation links oben und die rechte Navigation rechts oben beginnen sollen, sind die Attribute top, left und right auf 0px (null Pixel) gesetzt. Um den dritten Container nun zwischen die beiden Navigationsleisten zu setzen, ist es notwendig, den Seitenabstand zum Anzeigebereich festzulegen. Margin: 0px 200px; bedeutet, dass zum oberen und unteren Rand (erste Angabe: 0px) kein Freiraum, zum linken und rechten Rand (zweite Angabe: 200px) bestehen soll, damit sich die Container nicht überschneiden. Die Breite dieses Containers wird im Gegensatz zu den anderen Spalten automatisch bestimmt (width: auto).
Das wäre dann auch schon alles! Wir haben mit relativ einfachen Mitteln in nur vier Schritten ein Layout geschrieben, dass von einem Frameset kaum noch zu unterscheiden ist.
Probleme bei der Verwendung von CSS mit älteren/inkompatiblen Browsern
Der Idealfall wäre natürlich, dass alle auf dem Markt befindlichen Browser CSS in vollem Umfang unterstützen. Da dies natürlich nicht der Fall ist, kommt es immer wieder zu Problemen bei dessen Benutzung. Der schlimmste Fall, der eintreffen kann ist, dass ein Browser nur Teile der Spezifikation erfüllen kann. Und leider ist dies keine Theorie sondern Praxis und nennt sich Internet Explorer. Somit wird es ziemlich schwierig, ein Design und Layout zu erstellen, das auf nahezu allen Browsern gleich aussieht. Während z.B. Mozilla Firefox ein Element richtig handhabt passiert im Internet Explorer damit überhaupt nichts. Zu den meisten bekannten Problemen gibt es zwar Workarounds, doch sind diese wieder mit zusätzlicher Arbeit verbunden, die man sich durch den Einsatz von CSS eigentlich sparen wollte.