nicht angemeldet
Hallo SelfForumler,
es ist interessant, dass ich bei der Fertigstellung meiner Website nach langer Zeit wieder auf das Problem stoße, mit dem ich am Anfang das Webdesign begonnen habe...:
Es geht um das gute alte Zentrierungsproblem:
Ich möchte eine Tabelle, die 80% (des bodys) breit und 80% (des bodys) hoch ist, horizontal und vertikal auf der Website zentrieren.
Um das Problem einfach darzustellen, verwende ich für den gesamten Tabellenkörper im Folgenden einfach die Bezeichnung [tabelle].
Wenn ich die Tabelle horizontal zentrieren möchte, kann ich um die gesamte Tabelle ein div mit dem Attribut align="center" machen, was in jedem Browser funktioniert:
<div align="center">
[tabelle]
</div>
Möchte ich die Tabelle nun aber auch veritkal im body zentrieren, ergibt sich ein Problem: Einen valides HTML-Attribut gibt es nicht - ich muss also auf CSS zurückgreifen.
Dafür füge ich dem div eine CSS-Eigenschaft hinzu:
<div style="height:100%;vertical-align:middle;" align="center">
[tabelle]
</div>
Auch das funktioniert natürlich einwandfrei. In einigen Browsern sinnvollerweise aber nur, wenn ich bereits vorher auch das html- und das body-Tag mit dieser Anweisung (style="height:100%;") formatiert habe. Und jetzt kommt das eigentliche Problem:
Ich habe meinem body schon die CSS-Eigenschaft "padding:10px;" zugewiesen - diese wird aber vom Browser bei der Höhenerkennung des bodys nicht von der Gesamthöhe subtrahiert, sodass ein "height:100%;" im body-Tag bewirkt, dass der body + padding insgesamt höher ist als der zu Verfügung stehende Platz und damit ein ungewollter Scrollbar eingefügt wird!
Meine Frage jetzt:
Wie kann ich die Tabelle vertikal genau in der Mitte des bodys (mit padding:10px) zentrieren, ohne dass ein Scrollbar angezeigt wird (der body also größer wird) und dass es auch in jedem Browser funktioniert?
Das Beispiel, um das es sich handelt, findet ihr hier (im Hauptframe):
=> http://www.mischa-hildebrand.de/v2/index.php?cat=kontakt
Viele Grüße,
Mischa
=========================
www.young-power.de
www.mischa-hildebrand.de