(HTML/CSS) Zentrierungsproblem bei DIVs zw. Netscape und IE
Thomas
Hallo Forum!
Ich habe da ein kleines(?) Problem mit DIV-Zentrierungen im IE. Zur Zeit habe ich zwei DIVs, die zentriert
im Frame dargestellt werden (wie gewünscht) - allerdings nur bei Netscape 4.x. Wenn ich mir den Frame unter
IE anschaue ist jedoch nichts mehr zentriert und alle Inhalten hängen linksbündig.
Ich möchte nach Möglichkeit auf Tabellen zur Zentrierung verzichten.
Meine Frage: wie schaffe ich es, daß DIVs sowohl bei Netscape als auch beim IE *zentriert* angezeigt werden
(und das unabhängig von der Auflösung).
Ich weiß, daß es sicherlich am "position:absolute;" bei den CSS hängen muß, aber wenn ich das ändere,
gehts' wieder nicht auf Netscape; außerdem möchte ich ja noch von oben einen 80 Pixel-Abstand haben)
Im Augenblick sieht das bei mir so aus:
<div id="eins" style="position:absolute;top:1px;align:center;z-index:10;">
...inhalt...
</div>
<div id="zwei" style="position:absolute;top:80px;align:center;z-index:20;">
...Inhalt (Javascript Rollovers)...
</div>
Wie man sieht stehen die beiden DIVs in einem Zusammenhang, d.h. das hintere ("eins") stellt einen grafischen
Menühintergrund dar und die vordere DIV ("zwei") die zu dieser Hintergrundgrafik passenden Javascript-Rollovers.
Mit Netscape habe ich keine Probleme (obwohl ich denke, daß die Angaben nicht ganz korrekt sind), der IE
zeigt alles linksbündig.
Was könnte ich also machen, um zwei hintereinanderliegende DIVs auflösungsunabhängig in der Mitte zu zentrieren
und gleichzeitig noch einen Abstand von 80px von oben einzuhalten?
Ìch hoffe, jemand kann mir hier helfen,
Vielen Dank
Gruß,
Thomas
Hallo Thomas!
Was könnte ich also machen, um zwei hintereinanderliegende DIVs auflösungsunabhängig in der Mitte zu zentrieren
und gleichzeitig noch einen Abstand von 80px von oben einzuhalten?
<style type="text/css">
<!--
#eins {
position:absolute;
top:1px;
width:100%;
align:center; /*diese Angabe versteht nur der NS*/
text-align:center; /*diese Angabe centriert den Inhalt unter IE */
z-index:3;
}
#zwei{
position:absolute;
top:80px;
width:100%;
align:center;
text-align:center;
z-index:4;
}
-->
</style>
Grüße
Thomas