Tabelle innerhalb von Browserfenster ausrichten

chrigu

chrigu

Aktives Mitglied
Thread Starter
Dabei seit
08.03.2004
Beiträge
155
Reaktionspunkte
0
Mir fällt irgendwie gerade keine Idee mehr ein…

Ich möchte eine Tabelle innerhalb eines Browserfensters ausrichten und zwar, dass sie horizontal immer in der Mitte und vertikal 60 Pixel von oben positioniert ist. Gerne würde ich das mit CSS lösen, die vertikale Position ist auch kein Problem, doch horizontal kann ich die Tabelle nicht mittig ausrichten.

Habe folgendes probiert:
HTML: 
<div style="position:absolute; top:60px; left:50%;">
<table>
</table>
</div>

Leider wird die Tabelle nicht horizontal zentriert, sondern fängt erst in der Mitte an.

Habe auch versucht das Ganze in einer Tabelle zu positionieren:

HTML: 
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
    <tr>
        <td height="60">
        </td>
        <td height="60" width="423">
        </td>
        <td height="60">
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td width="423" valign="top">MEINE TABELLE
        </td>
        <td>
        </td>
    </tr>
</table>

Doch leider wird dies nur von Safari richtig interpretiert, alle anderen Browser zeigen es nur richtig, wenn ich den Tabellen einen border="1" Rand gebe, was ich allerdings nicht verstehe.

Wer kann mir eine Lösung in CSS geben?
 
Schau dir mal top-margin und left-margin an. :)

- björn
 
Ok, ich habs folgendermassen gelöst:

HTML: 
<div style="margin-top:60px;">
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
    <tr>
        <td align="center" valign="top">INHALT
        </td>
    </tr>
</table>
</div>
 
warum nicht <table align=center>?
Scheint mir irgendwie logischer und funktioniert auch, wenn die Zeile mehr als eine Zelle hat.
[edit]
btw:
mit <table vspace=60> kann man den Abstand oben und unten mit 60px festlegen.
Hier ist vermutlich die CSS Lösung besser.
[/edit]
 
die lösung mittels css sieht so aus:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<style type="text/css" media="screen, tv, projection">
	#container
		{
			position: relative;
	 		margin: 60px auto;
	 		width: 200px;
		}
	/* be nice to opera :) */
	html>body #container
		{
	  		width: 200px;
	}
	</style>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

<div id="container">
	<table>
	<tr>
		<td>sollte mittig sein :)</td>
	</tr>
	</table>
</div>

</body>
</html>

gruss michi
 
Zuletzt bearbeitet:
maceis schrieb:
IE ist nicht CSS konform
Zum Vergrößern anklicken....

hi, hab gerade nochmal mein post geändert! jetzt funktionierts auch mit dem IE :)

mfg
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten