nicht angemeldet
Moin moin> 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...:
Klar, Probleme lösen sich ja nciht von alleine...
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.
Ich habe es selber nciht ausprobiert, aber sollte mit margin:10% gehen - dann hast du oben, unten, links und rechts einen Rand von 10% - so als ob Höhe und Breite 80% betrügen und alles zentriert wäre...
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.
Auch >align="center"< ist seit langem deprecated...
Warum eigentlich nicht alles mit div? Wozu brauchst Du die Tabelle?
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!
Dann schreib doch einfach: padding:0;
Wozu die 10 px rundrum, wenn eh alles zentriert 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?
Versuch es mal einfach mit
padding:10px;
margin:10%;
Und schreib, ob es geholfen hat, dann haben die anderen auch etwas davon!
Übrigens hat der IE Probleme mit korrekten Umsetzung solcher Anweisungen...
Gruß,
Marc.
sh:( fo:| ch:? rl:? br:> n4:& ie:% mo:} va:} de:] zu:) fl:( ss:| ls: js:(
http://www.peter.in-berlin.de/projekte/selfcode/?code=sh%3A%28+fo%3A%7C+ch%3A%3F+rl%3A%3F+br%3A%3E+n4%3A%26+ie%3A%25+mo%3A%7D+va%3A%7D+de%3A%5D+zu%3A%29+fl%3A%28+ss%3A%7C+ls%3A+js%3A%28