Sitecontent relativ zentrieren? - ich werde wahnsinnig!

[kamerakind0815]

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!

[apsel]

Om nah hoo pez nyeetz, kamerakind0815!

top=50% bedeutet, setze die obere Grenze bei 50% hin. Also fängt dein Konstrukt in der Mitte an und geht nach unten so weit, wieviel Platz benötigt wird.

Tabellen sollen nicht zu Layoutzwecken missbraucht werden.

Tutorial zu Positionierung: http://selfhtml.apsel-mv.de/position/position.html

Matthias

[suit]

Was passiert? Er positioniert die ganze Sache untenbündig. Mittig ist es seltsamer weise bei 25%!?

Ohne die Höhe des zu zentrierenden Element zu kennen, kann das unmöglich stimmen.

Ändere ich aber die Bildschirmauflösung, stimmts nicht mehr.

Genau.

Müsste nicht bei 50% der Content IMMER in der Mitte sein?

Sofern der zu zentrierende eine höhe > 0 hat, ist 50% mit Sicherheit falsch.

Ggf. hilft dir dieser Artikel weiter:

http://suit.rebell.at/artikel/horizontal-und-vertikal-zentrieren-mit-xhtml-und-css