PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Problem mit HTML Strict und Tables


tomtom
2004-09-24, 17:46:23
Hi Leute!

Ich hab ein Problem mit meinem Tablelayout in HTML Strict. Untenstehender Code ist so konzipiert, dass die äußerste Tabelle drei Zeilen hat. Die oberste und die unterste davon haben eine fixe Größenangabe, die mittlere soll je nach Auflösung den Rest der Seite einnehmen, sodass die Gesamte Website das Browserfenster immer in voller Höhe ausfüllt(die mittlere Zeile soll also variabel sein). Das funktioniert auch ganz gut. Nur sobald ich das Dokument mit HTML Strict kennzeichne, funktioniert diese Aufteilung der Größe nicht mehr. Alle Größenangaben für Tabellen und Spalten wurden im Stylesheet (siehe unten) gemacht. Der Validator hat ein meinem Code auch nix auszusetzen...

Hier mal der Code

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

<HTML>
<HEAD>
<TITLE>w3fx.de ...choose your way</TITLE>
<LINK REL=stylesheet TYPE="text/css" HREF="style.css">
</HEAD>
<BODY STYLE="margin-top:0px; margin-left:0px; margin-right:0px; margin-bottom:0px;">

<TABLE CLASS="dp" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD CLASS="dp1">
<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" WIDTH="100%">
<TR>
<TD CLASS="logo"></TD>
<TD CLASS="tl1">&nbsp</TD>
</TR>
</TABLE>

<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" WIDTH="100%">
<TR>
<TD CLASS="tl2"></TD>
</TR>
</TABLE>

<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" WIDTH="100%">
<TR>
<TD CLASS="ml1"></TD>
</TR>
</TABLE>

<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" WIDTH="100%">
<TR>
<TD CLASS="tl3"></TD>
</TR>
</TABLE>
</TD>
</TR>

<TR>
<TD>
<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" WIDTH="100%">
<TR>
<TD CLASS="ct">Content</TD>
</TR>
</TABLE>
</TD>
</TR>

<TR>
<TD CLASS="dp2">
<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" WIDTH="100%">
<TR>
<TD CLASS="bl1"></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

</BODY>
</HTML>


Und hier das Stylesheet:

TABLE.dp {width:100%; height:100px}
TD.dp1 {height:127px;}
TD.dp2 {height:32px;}
TD.logo {background:url(layout/w3fx_logo.gif); width:327px; height:56px;}
TD.tl1 {background:url(layout/topline01.gif); height:56px;}
TD.tl2 {background:url(layout/topline02.gif); height:4px;}
TD.ml1 {background:url(layout/menuline.gif); height:35px;}
TD.tl3 {background:url(layout/topline03.gif); height:32px;}
TD.ct {background:url(layout/bg.gif);}
TD.bl1 {background:url(layout/bottomline01.gif); height:32px;}


Ich hoffe, ich hab alles verständlich erklärt und ihr könnt mir helfen. Vielen Dank im Voraus,
MFG, terminator2k3

Grinsekatze
2004-09-24, 20:54:17
Das ganze ist reichlich unlogisch, aber zu deinem Problem:

TABLE.dp {width:100%; height:100px}
TD.dp1 {height:127px;}
TD.dp2 {height:32px;}

Das haut ja schonmal rein mathematisch nicht hin... 127px + 32px < 100px ? Nicht wirklich... Falls Du 100% statt 100px meinen solltest, gibts da was. Das "height: 100%" wird in 'strict' etwas anders definiert, deshalb wird es nicht korrekt angezeigt.

Übrigens: Es genügt "margin: 0;" anzugeben, wobei diese Definition sowieso ins css sollte.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<link rel="stylesheet" type="text/css" href="test.css">
<title>TEST</title>
</head>
<body>
<table style="width: 100%; height: 100%; text-align: left;" border="0" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td class="one"><br>
<br>
</td>
</tr>
<tr>
<td class="two"><br>
<br>
</td>
</tr>
<tr>
<td class="three"><br>
<br>
</td>
</tr>
<tr>
<td class="four"><br>
<br>
</td>
</tr>
</tbody>
</table>
</body>
</html>



html, body {
height: 100%;
margin: 0;
}

.one {
vertical-align: top;
background: rgb(0, 0, 0);
height: 20px;
}

.two {
vertical-align: top;
background: rgb(64, 64, 64);
height: 10px;
}

.three {
vertical-align: top;
background: rgb(128, 128, 128);
height: 100%;
}

.four {
vertical-align: top;
background: rgb(192, 192, 192);
height: 30px;
}


Wichitg ist also folgendes:

html, body {
height: 100%;
margin: 0;
}

body und html müssen im css mit "height: 100%" definiert werden. Das gilt dann ebefalls für die betreffende Tabelle, wie auch für die Zelle.

tomtom
2004-09-25, 12:19:24
Danke...werds gleich mal probieren.

Ups stimmt....sollten keine 100px sein...sondern 100%...

Wegen dem "margin:0;": Ist mir bekannt, ich hatte vorher andere Werte drin, für rechts und links, ich habs erst kurz bevor ich den Quellcode hier reinkopiert hab, umgeschrieben...

Ist das erste mal dass ich was in Strict schreibe...is doch nicht so leicht wie ich dachte...Aber wenn mans mal kann, gehts gleich viel leichter von der Hand ;)

MFG

Gast
2004-09-26, 11:19:25
Hi,

gewöhn dir mal an alle Tags klein zu schreiben, spätestens in XML/XHTML kommst du sonst auf keinen grünen Zweig.

Außerdem wären Tabs und Zeilenumbrüche in der CSS ganz hilfreich, probier doch mal Topstyle aus, das ist klasse in der Hinsicht (gibts auch eine völlig ausreichende Lite Version von, http://www.bradsoft.com/download/dloadhandler.asp?file=ts3lite.exe).

Gruß, Arno Nym