nicht angemeldet
tabelle zentrieren
0 0 0 0 0 Zwischenfrage
tabelle zentrieren
Hallo,
ich möchte gerne eine Tabelle genau in der mitte des Browser anzeigen lassen, also nicht nurr in der horizontalen zentreirt sonder auch in der vertikalen
-
Hallo,
ich möchte gerne eine Tabelle genau in der mitte des Browser anzeigen lassen, also nicht nurr in der horizontalen zentreirt sonder auch in der vertikalen
USE THE FORCE!
USE CSS!-
Mit CSS geht das aber nicht so einfach, jedenfalls nicht vertikal. Kannst Du uns vom Gegenteil überzeigen? ;)
-
Mit CSS geht das aber nicht so einfach, jedenfalls nicht vertikal. Kannst Du uns vom Gegenteil überzeigen? ;)
ja!
is zwar nicht ganz exakt aber läuft in zumindest ie und moz/netscape(andere hab ich nicht getestet):<div style="padding-top:30%;">
<div style="text-align:center; border:1px solid lime;">
Test
</div>
</div>Grüße Zwomble
ps: wenn ich mehr zeit hätte würde ich das auch noch korrekter machen mit z.b. line-height...und vertical-align:middle...is aber viel rumprobieren...
-
Schon klar. So kann ich das auch ;)
Es ist kein echtes zentrieren, nur eine statischer Abstand oben von 30%. Unter "zentriert" verstehe ich, dass wenn die Seite kleiner ist als die aktuelle Browserfenster-Größe, oben und unten gleichmäßig viel Leerraum eingefügt wird...
-
HI,
ne Tabelle kann man auch in ne Tabelle setzen:<body>
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr valign="middle">
<td align="center"><table>
<tr>
<td>INHALT</td>
</tr>
</table></td></tr></table>
</body>
gruß
ptr
-
-
-
-
-
Hi,
dazu mußt Du der Tabelle zwangsläufig eine Breite und Höhe geben. Wenn Du diese flexibel in % angibst, ist die Zentrierung einfach, z.B.
table {width:80%; height:60%; margin:10% 20%;}
Bei festen Weiten (die nur mit Glück in alle Browserfenster passen) wird's zumindest für den IE (Version <6 bzw. 6 im Quirks-Mode) komplizierter, da er das dann erforderliche margin:auto ncht unterstützt.freundliche Grüße
Ingo-
Oops, mal wieder zu hastig getippt. Es muß natürlich in dem Beispiel
table {width:80%; height:60%; margin:20% 10%;}
heißen.
freundliche Grüße
Ingo-
Hallo,
Oops, mal wieder zu hastig getippt. Es muß natürlich in dem Beispiel
table {width:80%; height:60%; margin:20% 10%;}
heißen.Aha. Welcher Browser interpretiert das richtig? Ich bin gar nicht so, ich geb Dir was zum Probieren:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabelle Mitte Mitte</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
html, body {margin:0; padding:0; width:100%; height:100%;}
table.mitte {border:1px solid black; width:80%; height:60%; margin:20% 10%;}
table.mitte td {border:1px solid black; text-align:center;}
-->
</style>
</head>
<body>
<table class="mitte">
<tr>
<td>Zelle</td>
<td>Zelle</td>
</tr>
<tr>
<td>Zelle</td>
<td>Zelle</td>
</tr>
</table>
</body>
</html>Bin gespannt ;-))
viele Grüße
Axel
-
Hi,
Aha. Welcher Browser interpretiert das richtig? Ich bin gar nicht so, ich geb Dir was zum Probieren:
Bin gespannt ;-))da bin ich aber echt überrascht. Wieso beziehen die Browser das prozentuale magin-top und -bottom offenbar auf die Höhe der Tabelle, beim margin-left und -right dagegen auf die Seite?
Bevor ich aber mit absoluter Positionierung und negativen margins anfange, würde ich's eher so machen:table.mitte {border:1px solid black; width:80%; height:60%; margin:12% 9.9%;}
Nur wundere ich mich hier auch wieder, daß sich beim horizontalem Stauchen des Fensters das margin-top verringert, beim vertikalen Stauchen aber erhöht, jedoch im Vollbild in unterschiedlichen Bildschirmauflösungen die Zentrierung erhalten bleibt. hmm..? Zum Glück zentriere ich meist nur horizontal :-)
freundliche Grüße
Ingo
-
-
Zwischenfrage, kann ich nicht rechnen, oder hab ich nen Denkfehler.
20% + 80% + 20% = 120%
Abstand links + Tabelle + gedachter Abstand rechts = gesamt Breite10% + 60% + 10% = 80%
Abstand oben + Tabelle + gedachter Abstand unten = gesamt HöheJedoch
10% + 80% + 10% = 100%
Abstand links + Tabelle + gedachter Abstand rechts = gesamt Breite20% + 60% + 20% = 100%
Abstand oben + Tabelle + gedachter Abstand unten = gesamt Höhewollt ich nur mal so wissen.
-
Hallo,
Zwischenfrage, kann ich nicht rechnen, oder hab ich nen Denkfehler.
Jedoch
10% + 80% + 10% = 100%
Abstand links + Tabelle + gedachter Abstand rechts = gesamt Breite20% + 60% + 20% = 100%
Abstand oben + Tabelle + gedachter Abstand unten = gesamt Höhewollt ich nur mal so wissen.
Ja, klar, genau so. Hat Ingo aber auch genau so angegeben:
table {width:80%; height:60%; margin:20% 10%;}
^ ^
oben und unten | |
|
links und rechts |http://www.w3.org/TR/CSS2/box.html#margin-properties
Die Browser machen es halt mit oben und unten nur nicht so. Bzw. sie berechnen 100% Höhe igendwie anders.
Es geht, allerdings mit etwas Trickserei und nicht ganz standardkonform, weil negative Angaben bei left und top nicht explizit erlaubt sind:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabelle Mitte Mitte</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
body {font-size:24px; padding:50px;}
div.help {position:absolute; width:0; height:0; top:50%; left:50%;}
table.mitte {border:1px solid black; position:relative; width:200px; height:200px; left:-100px; top:-100px; background-color:green;}
table.mitte td {border:1px solid black; text-align:center; color:blue;}
-->
</style>
</head>
<body>
<h1>Tabelle in der Mitte der Mitte ;-))</h1>
<div class="help">
<table class="mitte">
<tr>
<td>Zelle</td>
<td>Zelle</td>
</tr>
<tr>
<td>Zelle</td>
<td>Zelle</td>
</tr>
</table>
</div>
<p>Das ist eine Tabelle, die immer absolut in der Mitte der Mitte des Browserfensters steht. So sollte es jedenfalls sein, ist es auch in IE 6.0 und Mozilla 1.3.1. Für andere Browser übernehme ich keinerlei Garantie.</p>
</body>
</html>viele Grüße
Axel
-
-
-