Hallo Ihr Lieben,
ich habe ein riesiges Problem mit einer scheinbar kleinen Aufgabenstellung. Ich habe eine Tabelle mit 2 Spalten und einer Zeile. In der linken Spalte ist die Navigation in einer extra Tabelle in der rechten der Inhalt. Nun möchte ich diese ganze Konstrukt ganz einfach vertikal zentriert haben. D.h. linksbündig und in der Mitte der Seite.
Folgendes habe ich gemacht:
Das CSS-Sheet
.center
{
position:absolute;
top:50%;
}
.content
{
margin-left:5%;
}
Und HTML:
<div class="center">
<table border="0" cellpadding="0" cellspacing="0">
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="img/menu_02.gif" width="199" height="184" alt=""></td>
</tr>
<tr>
<td><a class="hochzeit" href="http://www.fotograf-in-leipzig.de/hochzeit/"></a></td>
</tr>
<tr>
<td><a class="menschen" href="http://www.fotograf-in-leipzig.de/menschen/"></a></td>
</tr>
<tr>
<td><a class="familie" href="http://www.fotograf-in-leipzig.de/familie/"></a></td>
</tr>
<tr>
<td><a class="bands" href="http://www.fotograf-in-leipzig.de/bands/"></a></td>
</tr>
<tr>
<td><a class="kontakt" href="http://www.fotograf-in-leipzig.de/kontakt/"></a></td>
</tr>
<tr>
<td><a class="info" href="http://www.fotograf-in-leipzig.de/info/"></a></td>
</tr>
</table>
</td>
<td>
<div class="content">
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
</div>
</td>
</table>
</div>
Was passiert? Er positioniert die ganze Sache untenbündig. Mittig ist es seltsamer weise bei 25%!? Ändere ich aber die Bildschirmauflösung, stimmts nicht mehr. Müsste nicht bei 50% der Content IMMER in der Mitte sein?
Hilfe!