tabelle mittig zentrieren bei Browserskalierung

eisman

eisman

Aktives Mitglied
Thread Starter
Dabei seit
22.01.2005
Beiträge
2.056
Reaktionspunkte
105
erst mal ein schwitzigen Sonntag allerseits. wie bekomme ich wenn ich das Browserfenster skaliere die Tabelle zentiert. Das heist oben und links vergrößert od.verkleinert sich der Abstand. Habe zwar ein Cssbefehl gefunden aber der ist mit einem Layer. Ich könnte ja auch diese Tabelle in den Layer einbetten, aber ich denke das muss doch auch nur mit einer Tabelle gehen oder?
HTML: 
<html> <head> 
<title>********</title>  
</head> <body> 
<table width="400" 
height="300"  border="0" 
align="center" 
cellpadding="0"  cellspacing="0" 
bgcolor="#FF0000"><tr>
<th scope="row">&nbsp;</th></tr> 
</table> </body> </html>

edith. bitte verschiebt mich mal in den Webeditorabteilung
eisman
 
Zuletzt bearbeitet:
Mit blankem HTML wird es schwierig, da das Attribut HEIGHT für Tabellen z. B. nicht in der Spezifikation enthalten ist, dieser aber notwendig ist.

Was spricht gegen die DIV-Layer Variante?

2nd
 
Kein Problem...

Verschachtelung ist hier das Stichwort!

<table width="100%" style="height:100%;">
<tr>
<td width="100%" height="100%" align="center" valign="middle">
<table width="300" style="height:400px;">
<tr>
<td> DEIN CONTENT </td>
</tr>
</table>
</td>
</tr>
</table>
 
OT aber trotzdem, wie funktioniert denn das direkte einbinden von Graphiken in einen Thread?
 
dermaier schrieb:
Verschachtelung ist hier das Stichwort! <table width="100%" style="height:100%;"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <table width="300" style="height:400px;"> <tr> <td> DEIN CONTENT </td> </tr> </table> </td> </tr> </table>
Zum Vergrößern anklicken....

Damit bleibt der Inhalt vertikal aber immer an derselben Stelle, er möchte gerne eine vertikale und horizontale Zentrierung.

2nd
 
hey, habe die Tabelle in den Layer eingebettet,und wenn man das Fenster kleiner skaliert springt der Rahmen. http://www.foto-et-grafik.de Und wenn ich auf deine "Orchesterseite" gehe ist da eine sanfte Verschiebung eisman
 
Ja, dann musst Du schon das richtige Markup posten:

PHP: 
<table width="100%" style="height:100%;"> 
<tr> 
<td width="100%" height="100%" align="center" valign="middle"> 
<table width="300" style="height:400px;"> 
<tr> 
<td valign="middle" align="center"> DEIN CONTENT </td> 
</tr> 
</table> 
</td> 
</tr> 
</table>

Oben fehlt in Posting Nr. 3 der Contentzelle <td _valign="middle" align="center"> DEIN CONTENT </td>

2nd
 
Das ist nur weil die Tabelle 300 breit und 400 hoch ist.

Ausschliesslich "DEIN CONTENT" würde etwas weiter links stehen.
Du kannst die Tabelle ja einfärben, dann ist ein schwarzes Viereck zentriert, ganz ohne center und middle in der Content-Table.

Nachtrag:
habs im obigen Beispiel mal gemacht -> Nun ist das Viereck zentriert... ;)
 
Zuletzt bearbeitet:
also ich habe mal die Tabellen eingefärbt. und jetzt sieht man das bei einer Verkleinerung des Browsers die rote Zelle nicht bündig ist. Das heißt sie schließt nicht an der oberen wie seitlichen Kante des Browsers ab
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>**********</title>
<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FF0000" style="height:100%;">
<tr>
<td width="100%" height="100%" align="center" valign="middle">
<table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#0000FF" style="height:400px;">
<tr>
<td valign="middle" align="center"> DEIN CONTENT </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

eisman
 
Zuletzt bearbeitet:
Das liegt aber doch am margin, nicht an der Tabelle! :rolleyes:

Hab hier auch mal deinen <head> zugemacht:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>***********</title>
<style>
body{
margin:0px;
}
</style>
</head>
<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FF0000" style="height:100%;">
<tr>
<td width="100%" height="100%" align="center" valign="middle">
<table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#0000FF" style="height:400px;">
<tr>
<td valign="middle" align="center"> DEIN CONTENT </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
 
Zuletzt bearbeitet:
dermaier schrieb:
Das ist nur weil die Tabelle 300 breit und 400 hoch ist. DIE TABELLE IST ABER ZENTRIERT. Ausschliesslich "DEIN CONTENT" würde etwas weiter links stehen. Du kannst die Tabelle ja einfärben, dann ist ein schwarzes Viereck zentriert, ganz ohne center und middle in der Content-Table.
Zum Vergrößern anklicken....

Es lag bei mir am Doctype - das hier geht nicht (Almost Standard Mode):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Dieser Doctype geht (Quirksmode):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


Ich verwende den Quirksmode so gut wie gar nicht mehr und den ersteren Doctype erzeugt Dreamweaver, so dass ich zur Annahme kam, dass die vertikale Zentrierung nicht geht.

@eismann: <body style="padding:0; margin: 0;">


2nd
 
Oh ja, ich habe schon Stunden verloren wegen dem doctype!! :p
Und nochmehr wegen dem IE :sick:
 
ist ja irre,man lernt nie aus ( Doctype ) habs mal getestet.
Danke an euch beiden. Und bitte keine weitere körperliche Anstengungen.

eisman
 
Zurück
Oben Unten