 Inhalte zentrieren mit Tabellen
Dieser Artikel beschreibt die Zentrierung einer Tabelle in der horizontalen Mitte des Browserfensters. In den 90er Jahren eine beliebte Technik WEbseiten, die nicht den gesamten Bildschrim füllten, zu zentrieren. Für andere Techniken zur Zentrierung von Objekten innerhalb einer Seite folgen sie den Querverweisen im Fußbereich.
| |
Seiteninhalte horizontal ausrichten mit Tabellen
Sie haben dazu 2 Möglichkeiten:
- das einleitende <table>-Tag hat das Attribut ' align="center" '
- die Tabelle wird von <div>-Tags zur Zentrierung von Elementen 'eingerahmt'
Erstellen Sie zunächst die Tabelle in der gewünschten Breite. Den gesamten Seiteninhalt platzieren Sie innerhalb dieser Tabelle. Die Mindestbreite können Sie durch eine eingefügte Grafik (auch ein transparentes Pixel) erzwingen oder durch eine Angabe im <table>-Tag festlegen.
<table width="600" ...
a zentrieren mit Tabellenattribut
Um die Tabelle innerhalb des Browserfensters horizontal auszurichten notieren Sie im <table>-Tag das Attribut ' align="center" '.
<table width="600" align="center" ...
b zentrieren mit <div>-Tags
Um die Tabelle innerhalb des Browserfensters horizontal auszurichten fassen Sie die gesamte Tabelle in eine <div>-Anweisung, die das Element Tabelle zentriert.
<div align="center">
<table width="600" ...
</table>
</div>
Alles ganz toll, mit dieser zweiten Möglichkeit. Falls Sie aber nun feststellen, das (gegen Ihre Absicht) auch sämtliche Inhalte der Tabelle zentriert dargestellt werden, bleibt ihnen nichts anderes übrig als in den einzelnen <td>-Tags das Attribut für eine linke Ausrichtung zu notieren.
<div align="center>
<table width="600" ... ><tr><td align="left">
</tr></td></table>
</div>
Diese Regeln mit CSS festlegen
Na ja, falls das zu mühselig ist weil es zu viele <td>-Tags gibt, entscheiden Sie sich lieber für eine übergeordnete Anweisung mit CSS. Sie möchten also bestimmen, dass die Tabelle zentriert dargestellt, die Inhalte aber links ausgereichtet sind? Geben Sie der Tabelle eine ID und Sie können die Anzeigeregeln für diese Tabelle mit CSS gezielt bestimmen.
<table id="TabZentriert" ... >
</table>
CSS-Anweisungen im Head-Bereich
<style type="text/css">
<!--
#TabZentriert {
text-align: center;
}
#TabZentriert td {
text-align: left;
}
-->
</style>
verfügbare Breite berechnen
Soll die Tabelle die Funktion erfüllen, den Seiteninhalt nur minimal von den Rändern des Fensters abzusetzen (z.B. rechts und links mit einem Abstand von 30 Pixel), sollten Sie Margins und Paddings berücksichtigen und unter Umständen die genaue Fensterbreite berechnen, damit Ihre Vorgabe von 30 Pixel auch eingehalten wird.
Die Fensterbreite berechnen
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 einem Frameset arbeiten, einen für die Navigation + einen für Ihre Inhalte, müssen Sie die beide Framebreiten berücksichtigen. Angenommen der Menü-Frame ist 200 Pixel breit, bleiben ihnen noch
800 - 20 - 200 = 580 Pixel.
Aber nur theoretisch !!!
Wenn Sie Frames arbeiten, müssen Sie die Innenabstände des Frames ebenfallls subtrahieren oder die Innenabstände und die Randbreite der Frames auf Null setzen.
Wenn Sie also die Tabellebreite für Ihre Inhalte durch eine genaue Breitenangabe festlegen, müssen Sie Ränder und Margins, Padding und einen eventuellen Scollbar berücksichtigen, damit Ihre Rechnung aufgeht.
Ränder und Margins mit HTML für Frameset / Frames
Ränder und Margins mit HTML-Anweisungen
<frameset border="0" frameborder="0" framespacing="0" ...
<frame frameborder="0" marginwidth="0" marginheight="0" ...
<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 {
margin: 0px;
padding: 0px;
...
}
-->
</style>
Linke Ausrichtung
Ein Beispiel für eine linke Ausrichtung einer Seite (innerhalb eines Frmesets) 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. Der Anzeigebereich 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?
Wie das aussehen würde, wenn dieser Seiteninhalt zentriert angezeigt werden würde, können Sie hier einmal austesten:
 Demo für eine zentrierte Ausrichtung dieser Seite
 Seite zentrieren mit CSS
absolute Breite berechnen, Tabellenprobleme 04
frames zentrieren (im Menü FRAMES)
Seiteninhalte horizontal und vertikal ausrichten
|
Home • Diverses • Seite zentrieren 1
BEISPIEL einer Anwendung
drucken 