horizontal zentrieren 1
    


WWW.WEB-TOOLBOX.NET

Beispiel  Quellcode ZURÜCK SITEMAP  

  Zwei Frames vertikal zentrieren

Ihre Webseite hat 2 Frames, Navigation und Inhalt. Diese beiden Frames sollen in der Bildschimmitte (zentriert) angezeigt werden.

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.


   Mein 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 haben soll.

Breitenangaben:   <frameset cols="*,200,600,*">
Die Webseite

Die Aufteilung



Download dieser HP-Vorlage mit 4 Frames

Durch die fixen Breitenangaben von 800 (200+600) 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 verteilt. Für den Fall einer Bildschirmauflösung von nur 800 Pixel verschwinden die beiden Leerframes mit den eingebundenen Dateien.


   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 ( &nbsp;<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-Seite mit CSS-Anweisungen


<style type="text/css">
<!--
body {
margin:0px;
padding:0px;
}
-->
</style>









NACH OBEN