 Zwei Frames vertikal zentrieren
Ihre Webseite hat 2 Frames: Navigation und Inhalt. Diese beiden Frames sollen in der Bildschirmmitte (zentriert) angezeigt werden. Das wird hier durch zwei weitere Frames mit Fülldateien ohne Inhalt erreicht.
|
|
Meine Erklärungen im Artikel  Seiteninhalte zentrieren beziehen sich auf die Zentrierung der Inhalte einer einzelnen HTML-Seite ohne Frames oder auf die zentrierte Darstellung im Inhaltsframe. Das bietet hier keine Lösung.
Ein Vorschlag
Eine Möglichkeit zur Lösung bietet die Definition eines Framesets mit 4 vertikalen Frames. Sie bestimmen, das ihr Frameset neben den beiden benötigten Frames zwei weitere (leere) Frames rechts und links außen haben soll.
Breitenangaben: <frameset cols="*,200,600,*">
Die Webseite
|
Die Aufteilung
|
Durch die fixen Breitenangaben von 200 und 600 Pixel (800) für die beiden mittleren Frames erhalten Sie eine exakte Darstellung. Der darüber hinaus verbleibende Platz für die beiden anderen Frames ohne feste Breitenangabe, wird vom Browser gleichmäßig aufgeteilt. Für den Fall einer Bildschirmauflösung von nur 800 Pixel verschwinden die beiden Leerframes mit den eingebundenen Dateien.
Ein Beispiel zum Download finden sie im Menü Downloads (Vorlagen mit Frames).
 HP-Vorlage Frames F02 aufrufen
3 unschöne Nebenerscheinung
Bei größeren (längeren) Inhalten wird für den Inhaltsframe ein vertikaler Scrollbar angezeigt, der am rechten Rand des dritten Frames erscheint. Das ist von vielen Webmastern nicht erwünscht. Außerdem erwartet ein Seitenbesucher für gewöhnlich den Scrollbar rechts außen am Bildschirmfenster.
Eine bessere Lösung mit Scrollbar rechts außen am Bildschirmrand bietet ein Beispiel mit 3 vertikalen Frames:
HP-Vorlage Frames F08 aufrufen
In der Frameset-Deklaration
Setzen sie die Scrolling-Arttibute für die Leerframes auf "no".
<frameset cols="*,200,600,*">
<frame src="leer.htm" scrolling="no" name="leer01" ... >
<frame src="nav.htm" scrolling="auto" name="nav" ... >
<frame src="start.htm" scrolling="auto" name="inhalt" ... >
<frame src="leer.htm" scrolling="no" name="leer02" ... >
<noframes>
Ihr Browser unterstützt keine Frames!
</noframes>
</frameset>
Das Beispiel zeigt eine 800 Pixel-Darstellung bei einer 1024 Pixel Bildschirmauflösung (verkleinert).
|
|
Frame 1
Breite: *
|
|
Frame 2
Breite: 200
|
|
Frame 3
Breite: 600
|
|
Frame 4
Breite: *
|
|
|
|
|
|
Leer |
|
Navigation |
|
Inhalte |
|
Leer |
|
|
|
Beachten Sie bei pixelgenauen Angaben für die Anzeigebreite unbedingt die Einstellungen für Ränder und Margins bei der Definition der Framesets und auch für das HTML-Dokument!
Beachten Sie, dass einige Browser auch bei nicht angezeigten Scrollbars (Einstellung 'ja' oder 'auto') den Platz für die Bildlaufleisete reservieren. Eine Tabelle von 600 Pixel Breite kann also nicht unbedingt in einem Frame von 600 px vollständig angezeigt werden.
Die leeren HTML-Dateien
Für die beiden Füllerframes rechts und links können Sie ein und die gleiche HTML-Datei einsetzen!
Diese Datei ist generell leer. Zwischen die Body-Tags setzen sie sicherheitshalber ein nonbreakable-Space und einen Zeilenumbruch ( <br> ). Das muss natürlich nicht so bleiben. Eine anspechende Hintergrundgrafik für die 'leere' Seite ist nur eine Möglichkeit.
Hintergrundbild einfuegen
Zwischenbemerkung zu Rändern und Seitenabstand
Bitte berücksichtigen Sie bei der Berechnung der benötigten Breite die vom Browser voreingestellten Abstände, die Sie aber auf Null einstellen können:
| Ränder und Margins für Frames und die HTML-Seite |
|
Frameset / Frames
<frameset border="0" frameborder="0" framespacing="0" ...
<frame frameborder="0" marginwidth="0" marginheight="0" ...
HTML-Dokument
<body marginwidth="0" marginheight="0" ...
außerdem zusätzlich:
bottommargin="0" rightmargin="0" topmargin="0" leftmargin="0" ...
Hier wird ein HTML-Validator zwar meckern, aber es funktioniert!
|
|
| Ränder und Margins für die HTML-Seiten mit CSS-Anweisungen |
|
<style type="text/css">
<!--
body {
margin:0px;
padding:0px;
}
-->
</style>
|
|
|
Home • Frames • Frames zentrieren
Beispiel
