Zentrierungsproblem

Status
Nicht offen für weitere Antworten.
N

nytemare

Wenn ich ein Element sowohl vertikal als auch horizontal zentrieren will, habe ich das bisher so gemacht:

<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; height: 100%;">
<tr><td style="width: 100%; height: 100%; vertical-align: middle; text-align: center;">
<div>zentriertes Eelement</div>
</td></tr></table>

Damit habe ich jedoch folgende Probleme:

1.) Mozilla bis hoch zu Version 1.3 (ich gehe im folgenden davon aus, daß sich Netscape 6 und höher diesbezüglich identisch verhält) akzeptiert die Höhe von 100% nicht - mit der Folge, daß das Element zwar horizontal, aber nicht vertikal zentriert ist.

2.) Ich will eigentlich nach Möglichkeit auf Tabellen-freies Layout umsteigen und das ganze pur mit CSS lösen.

Ich habe dann folgende Alternative ausprobiert (vorweg: das hat natürlich auch nicht geklappt, denn sonst würde ich ja nicht fragen ;-)

<div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; vertical-align: middle; text-align: center;">
<div>zentriertes Element</div>
</div>

Hier ist das Ergebnis (sowohl im IE als auch mit Mozilla) wie oben: horizontal zentriert, aber nicht vertikal. Das hat meiner Meinung nach 2 mögliche Ursachen: Entweder wird das "vertical-align: middle;" nicht auf <div> Elemente angewendet und/oder die Höhe von 100% wird wiederum nicht akzeptiert.

Weiß jemand einen Weg, um das Problem zu lösen? Danke im voraus für Tips :)
 
Hi
ich kann mir zwar nicht erklären warum, aber wenn du die Höhe auf 99% stellst geht es im Mozilla, Opera und IE.
Ciao
Noby
 
@noby
Erstmal Danke für den tip.
Ich nehme an, das bezieht sich auf das erstere Beispiel, das Tabellen verwendet..? Habe ich ausprobiert, in meinem IE 5.5 klappt auch das leider nicht (Mozilla habe ich daraufhin gar nicht getestet).
 
So ein großes Board mit vielen Leuten, die Ahnung haben.. und da weiß hier echt keiner weiter..?

Schade.. :(
 
Problemlösung

Halli Hallo,

vor einem ähnlichen Problem (bezügl. Punkt 2) stand ich auch - aber in meinem Fall scheint es keine Lösung zu geben. Darum bin ich auf ein Frameset umgesteigen - egal.

Zu Deinem Problem
1.) Ich habe die Vermutung, dass es das selbe Problem ist wie auch bei Frames, wo die Abstände in allen Browsern unterschiedlich ist. Die Abstände zum Browserrand sind lt. Webmonkey so verschieden(horizontal/vertikal):

IE 5.x (Win) 10 15
NN 4.x (Win) 8 8
NN 4.x (Mac) 8 8
IE 4.x (Win) 10 15
IE 4.x (Mac) 8 8
NN 3.x (Win) 10 15
NN 3.x (Mac) 8 8
IE 3.x (Win) 10 16
IE 3.x (Mac) 8 8

Was Deine 100% - 100% Ausrichtung und deren Ansicht von allein erklärt.
Versuchen könntest Du es allerdings mal mit:

body {margin:0;padding:0;width:100%;height:100%;}

Vielleicht klappt das....


2.) Die Lösung findest Du hier:

http://www.drweb.de/html/layer_4.shtml

und

http://www.drweb.de/html/layer_5.shtml

wenn ich Dich richtig verstanden hab ;o)

Grüßerl und viel Erfolg,
Nadine
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück