Seite zentrieren 01
    
WWW.WEB-TOOLBOX.NET
BEISPIEL einer Anwendung ZURÜCK SITEMAP  

 Seiten zentrieren mit Tabellen

Dieser Artikel bezieht sich auf die Zentrierung der Inhalte einer einzelnen HTML-Seite ohne Frames oder auf die zentrierte Darstellung im Inhaltsframe. Für die Zentrierung von Objekten oder Frames folgen sie den Links unten.

 frames zentrieren (im Menü FRAMES).

Für die Zentrierung von Seiteninhalten lesen Sie den Beitrag

 inhalte zentrieren (im Menü Tabellen)


   Linke Ausrichtung

Eine linke Ausrichtung der Seite sehen Sie hier!

Meine Seite soll auch bei einer Auflösung von 800x600 Pixel ohne waagerechte Scrollbars angezeigt werden. Eine variable Breite habe ich wegen des Layouts unterdrückt. Die Seite ist etwa etwa 600 Pixel breit.

Ich habe mich für eine linke Ausrichtung der Inhaltsseite entschieden. Die Inhaltsseite 'klebt' also gleich links an der Navigation.


   Zentrierte Ausrichtung

Wenn Sie nun den Seiteninhalt mit einer festgelegten Breite immer zentriert in der Bildschirm- oder Framemitte anzeigen möchten, finden Sie hier einen Lösungsvorschlag.

Hier klicken für eine zentrierte Ausrichtung dieser Seite




Zentrieren


   Inhalt in eine Tabelle

Erstellen Sie eine Tabelle in einer festgelegten Breite.

Sie haben dazu 2 Möglichkeiten:

1) Die Mindestbreite durch ein eingefügtes Bild (auch ein transparentes Pixel) erzwingen.

2) Durche eine Angabe im Tabellen-Tag festlegen

<table width="580" ...


   Tabelle Zentrieren

Den gesamte Seiteninhalt plazieren Sie in diese Tabelle die zentriert dargestellt wird!

Sie haben dazu 2 Möglichkeiten:

1) die Tabelle wird von HTML-Tags zur Zentrierung von Elementen 'eingerahmt':

<div align="center"> TABELLE </div>

2) Sie fügen das Attribut zur Zentrierung in das einleitende Tabellen-Tag ein:

<table align="center" ...


Breite berechnen

Die Darstellungsbreite errechnen: Entscheiden Sie sich für eine minimale Darstellungsbreite für Ihre Seite. Als Beispiel nehme ich hier die Auflösung 800 x 600 Pixel. Das bedeutet Ihnen stehen 800 Bildpunkte für die Breite zur Verfügung.

Aber nur theoretisch !!!

Subtrahieren Sie zunächst einen möglichen Scrollbar (Bildlaufleiste) macht 800 - 20 = 780 Pixel.

Wenn Sie mit 2 Frames nebeneinander arbeiten, einen für die Navigation, einen für Ihre Inhalte, müssen Sie die linke Framebreite auch subtrahieren. Angenommen der linke Frame ist 200 Pixel breit bleiben ihnen noch:
800 - 20 - 200 = 580 Pixel.

Aber nur theoretisch !!!

Wenn Sie die Tabellenbreite durch ein Bild oder eine genaue Breitenangabe fixieren, dürfen die HTML-Seite, ihr Frameset und die Frames keine Ränder und Margins haben, damit Ihre Rechnung aufgeht.

(siehe Ränder und Margins weiter unten)

Ja, die unterschiedliche Spaltenhöhe wurde mit Absicht so belassen. Die Lösung zu dieser unschönen Darstellung finden Sie im Artikel

einheitliche Spaltenhöhen

im Menü Tabellen






   Margins und Paddings berücksichtigen!

Ränder und Margins mit HTML


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 mit CSS-Anweisungen


<style type="text/css">
<!--
body {

/* Ränder Margins */

margin-right:0px;
margin-left:0px;
margin-top:0px;
margin-bottom:0px;

/* Hintergrundbild  */

background-image:url(images/bg3.gif);
background-position:0px 0px;

}
-->
</style>




Das wird sie auch interessieren:


 absolute Breite berechnen, Tabellenprobleme 04



NACH OBEN