Inhalte zentrieren
    
WWW.WEB-TOOLBOX.NET
BEISPIEL  ZURÜCK  SITEMAP  

 horizontal und vertikal ausrichten

Dieser Artikel bezieht sich auf die Zentrierung von Objekten innerhalb einer HTML-Seite oder auf die zentrierte Darstellung innerhalb einer Tabelle.

Wenn sie ihre gesamte HTML-Seite in der Bildschirmmitte anzeigen möchten, lesen Sie dazu den Artikel Seite zentrieren.

 Seite zentrieren.

Für die Zentrierung von Frames oder Framesets lesen Sie den Artikel

 frames zentrieren (im Menü FRAMES).




   Inhalt innerhalb einer Tabelle zentrieren

Sie haben zur Zentrierung eines Objekts eine Tabelle eingesetzt. Innerhalb der Tabellezelle bestimmen sie die Ausrichtung im <td>-Tag 

<table align="center" border="0" height="200" width="300">
<tr><td valign="middle" align="center">

Inhalt

</td></tr></table>


Inhalt



   Objekt zentrieren

Sie möchten nun ein Objekt im gesamten Anzeigebereich zentrieren. Dazu umschließen sie den gesamten Inhalt mit einer Tabelle. Die Tabellenhöhe und -breite bestimmen sie mit 100%. Innerhalb der Tabelle bestimmen Sie die Ausrichtung wie im ersten Beispiel der Inhalt horizontal und vertikal zentriert. 

<table border="1" height="100%" width="100%">
<tr><td valign="middle" align="center">

Seiteninhalt

</td></tr>
</table>
Inhalt


<table height=" " bestimmt die Höhe der gesamten Tabelle in Bezug auf das Anzeigefenster. Diese Angabe gehört nicht zum HTML-Standard, wird aber von den Browsern unterstützt und in der Praxis häufig benutzt.


Setzen sie die den Rand der Tabelle auf '1' und testen Sie das Ergebnis.

Hier ist es einmal der IE6, der abhängig von der Dokumenttyp-Angabe die 100%-Anweisung ignoriert (eigene Erfahrung). Abhilfe schafft der entsprechende DOCTYPE-Eintrag im Kopf der HTML-Seite.



   Notwendige DOCTYPE-Angaben für Eintrag height="100%"

1) Doctype-Angabe in die erste Zeile des HTML-Dokuments!

2) Schreibweise

Doctype-Angaben sind übrigens 'case-sensitiv', das bedeutet in diesem Fall, sie müssen auf Groß- Kleinschrift achten:

Nicht '<!doctype ... ' sondern '<!DOCTYPE ...'


3) Zusatz Transitional

Mit dieser Angabe funktioniert das nicht: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">


Mit dieser Angabe schon: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


Die zusätzliche Angabe " Transitional " erlaubt auch HTML-Befehle älteren Standards. Offenbar also auch das eigentlich nicht implementierte Attribut für Tabellenhöhe (zumindest mit der Angabe 100%).








NACH OBEN