brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]


verwandte Artikel und Seiten

TableDance

von Thomas Salvador.

Dieser Artikel beschreibt, wie man Objekte in der Browsermitte positioniert. Dabei sollen drei Punkte erfüllt sein:

  1. Es soll auf möglichst vielen Browsern funktionieren,
  2. es soll für möglichst viele Besucher sichtbar sein und
  3. muss sich den Verhältnissen des Besuchers möglichst gut anpassen.

Da JavaScript nicht auf allen Browsern funktioniert und schon gar nicht von allen Besuchern toleriert wird, verbietet sich sein Einsatz. Somit fällt DHTML wegen 1. und 2. weg. Wie also können wir ein Objekt positionieren, ohne z.B. Layer zu verwenden? Die Antwort ist einfacher, als man zunächst vielleicht denkt: Tabellen.

Den von uns gewünschten Effekt der Zentrierung eines Objektes erreicht man genauer durch das Verschachteln zweier Tabellen, d.h. also, dass genauer die innere Tabelle auf dem Bildschirm zentriert wird samt Ihrem Inhalt. Diesen Effekt nennt man oft TableDance.

Der Source

<table width="100%" height="100%"
     cellspacing="0" cellpadding=0 border=1>
<tr><td>
  <div align="center">
  <table border=1><!- die innere Tabelle START -->
  <tr><td>Dies erscheint in der Mitte</td></tr>
  </table><!- die innere Tabelle ENDE -->
  </div>
</td></tr></table>

Die Dokumentation

Man erzeugt eine Tabelle, die sich über den gesamten sichtbaren Bereich erstreckt und aus genau einer Zelle besteht.In dieser Zelle wird die innere Tabelle horizontal zentriert (durch das div) und vertikal zentriert (automatisch) dargestellt. Man sieht an der Kürze der Dokumentation und des Sources, dass es vollkommen einfach ist. Es ist nicht immer notwendig, JS, DHTML und was nicht sonst noch alles zu nehmen.

Hinweise

Möchte man natürlich nur ein Bild oder eine Textzeile zentrieren, kann man es gleich anstelle der inneren Tabelle angeben. Man geht also genau so vor, als würde man normal zentrieren. Die äußere Tabelle führt durch ihre umfassende Höhe (height=100%) und aufgrund der Eigenschaft, Inhalte vertikal zu zentrieren, wenn es nicht anders genannt wird den Effekt.


Verwandte Artikel und Seiten




brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zum Inhaltsverzeichnis der 18. Ausgabe.

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/23.html .