DIVs zentrieren
Alex
- css
0 Anton Brass0 Alex
Hallo Ihr
Ich habe eine Seite, auf der zwei DIVs in z-Position übereinander liegen sollen. Das habe ich dank Eurer Hilfe auch hingekriegt.
Leider ergibt sich aus der absoluten Positionierung ein Problem bei der Zentrierung.
Im IE funktioniert folgender Quelltext (obwohl mir unklar ist wieso), er funktioniert jedoch nicht in Netscape, Opera, Firefox,...
weiß jemand Abhilfe (und vorallem eine Erklärung?)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML><HEAD></HEAD><BODY>
<div id="DAVOR" style="text-align:center;">
<H1>DAVOR</H1>
text text text text text text text text text text text text text text text text <br>
text text text text text text text text text text text text text text text text <br>
text text text text text text text text text text text text text text text text <br>
<br>
</div>
<div id="EINS" style="position:relative;width:100%;height:50px;border:solid 5px #f00;text-align:center;">
<div id="ZWEI" style="position:absolute;top:0;width:50%;border:solid 5px #0f0;">
Dieser Text sollte zentriert und deckungsgleich mit dem anderen sein
</div>
<div id="ZWEI" style="position:relative;top:0;width:50%;border:solid 5px #0f0;">
Dieser Text sollte zentriert und deckungsgleich mit dem anderen sein
</div>
</div>
<div id="DANACH" style="text-align:center;">
<H1>DANACH</H1>
text text text text text text text text text text text text text text text text <br>
text text text text text text text text text text text text text text text text <br>
text text text text text text text text text text text text text text text text <br>
</div>
</BODY></HTML>
Schonmal Danke
Alex
Mal daran gedacht, das ganze übersichtlich als css-class zu definieren, und dann den einzelnen divs zuzuweisen?
Da ist bestimmt irgendwo nen Formatierungsfehler, zu viele oder zu wenige ";" drin oder ähnliches, der vom IE ignoriert wird.
Hey
Habe jetzt ein Workaround gebaut, das lediglich bei der Anzeige der Ramen im IE Probleme hat.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML><HEAD></HEAD><BODY>
<div id="DAVOR" style="text-align:center;">
<H1>DAVOR</H1>
text text text text text text text text text text text text text text text text <br>
<br>
</div>
<div id="EINS" style="position:relative;width:100%;height:80px;border:solid 5px #f00;">
<div id="ZWEI" style="position:absolute;top:20px;width:100%;text-align:center;">
<span style="margin:10px;padding:15px;border:solid 5px #0f0;">
Dieser Text sollte zentriert und deckungsgleich mit dem anderen sein
</span>
</div>
<div id="DREI" style="position:absolute;top:20px;width:100%;text-align:center;">
<span style="margin:10px;padding:15px;border:solid 5px #0f0;">
Dieser Text sollte zentriert und deckungsgleich mit dem anderen sein
</span>
</div>
</div>
<div id="DANACH" style="text-align:center;">
<H1>DANACH</H1>
text text text text text text text text text text text text text text text text <br>
</div>
</BODY></HTML>
Hat dazu noch jemand ne Idee?
Gute Nacht
Alex