nicht angemeldet
Nachdem ich vor ein paar Jahren meine Seiten von Frames auf Tabellen umgestellt habe, stelle ich jetzt von Tabellen auf CSS-Layer um (man will ja aktuell sein ;-) )
An einem Problem knoble und google ich seit zwei Tagen herum, ohne wirklich eine akzeptable Lösung gefunden zu haben.
Ich möchte einen Fließtext variabler Länge so in den Layer setzen, dass er horizontal *und* vertikal zentriert erscheint. Mit Tabellen kein Problem: Tabelle mit height=100%, td mit vertical-align:middle und fertig ist die Laube.
Aber wie macht man's mit CSS? An einigen Stellen habe ich gelesen, dass das von der Syntax her gar nicht vorgesehen sei. Finden das die Väter von CSS nicht wichtig?
Wie dem auch sei: vertical-align:middle in der Layer-Definition tut's jedenfalls nicht. Der einzig funktionierende "Trick", den ich gefunden habe, war, innerhalb des Layers wieder eine 100%-Tabelle anzulegen, aber das kann's doch nun wirklich nicht sein.
Hier mein Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Vertikal zentrieren</title>
<style type="text/css">
<!--
#total { position:absolute;
left: 50%; margin-left: -250px; width:500px;
top: 50%; margin-top: -150px; height:300px;
z-index:1; }
#header { position:absolute; top: 0px; left:0px; width:500px; height:100px; z-index:1;
background:#cccccc;
border-left: 1px solid black;border-top: 1px solid black;border-right: 1px solid black; }
#navi { position:absolute; top:100px; left:0px; width:100px; height:150px; z-index:1;
background:#cccccc;
border-left: 1px solid black;}
#content { position:absolute; top:100px; left:101px; width:400px; height:150px; z-index:1;
border-right: 1px solid black;
vertical-align:middle;text-align:center;}
#footer { position:absolute; top:250px; left:0px; width:500px; height: 50px; z-index:1;
background:#cccccc;
border-left: 1px solid black;border-right: 1px solid black; border-bottom: 1px solid black;}
-->
</style>
</head>
<body bgcolor="FFFFFF" text="#000000" style="border:none">
<!--
<script type="text/javascript">
alert(document.compatMode);
</script>
-->
<div id="total">
<div id="header">
header
</div>
<div id="navi" >
navi
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
Meine Hoffnung war, dass das Wort "Content" horizontal und vertikal zentriert erscheint (siehe CSS-Definition).
Kann jemand helfen?
Ciao
Frank Scholz