Tabellengröße an Auslösung anpassen

Kizame · 08.03.2010

Hi,
habe n Problem bei der Erstellung einer Webseite. Und zwar möchte ich, dass sich die Breite einer Tabelle in meinem Layout an die jeweilige Fenstergröße des Browsers anpasst.

Ich habe dabei eine Tabelle die aus einer Zeile und 2 Spalten besteht. Die linke Spalte, mit einem Hintergrundbild hinterlegt, soll sich entsprechend der Fenstergröße mitstrecken, die recht Spalte soll einfach samt Hintergrundbild fix sein.

Bisher sieht das so aus:

HTML:

<table width="100%" border = "0" cellpadding = "0" cellspacing = "0">
<tr height = "165">
<td background = "img/header_background.gif">
</td>
<td width = "180" background="img/header_right.gif">
</td>
</tr>
</table>

Im Firerfox wird das Teil genauso dargestellt wie ich es gerne hätte, nur im Internet Explorer macht er irgendwelche faxen sodass einfach "header_right" die gesamte Tabelle auszufüllen scheint.

Wie müsste der Code lauten damit das Ding sowohl im Mozilla als auch im IE vernünftig dargestellt wird?

Thrillboy · 08.03.2010

Dein HTML-Code ist von anno 99.
Ich hab jetzt hier nicht die Möglichkeit das im IE zu testen, aber generell kann man sagen, dass zumindest der IE6 (welche Version überhaupt? 6,7,8?) gerne die genauen Maße hat, wenn ein Bild eingefügt wird.
Außerdem müsste afaik die Höhe auf den TD liegen und nicht auf der TR.
Zudem musst du einen DOCTYPE setzen. Weiß nicht, ob das der Fall ist bei deiner HTML-Datei.
Ich würd dir aber ohnehin empfehlen das ganze mit CSS-Layout, also Div & co aufzubauen, anstatt mit Tables.
z.B. so:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
#left {
margin-right: 180px;
background-image: url(img/header_background.gif);
background-repeat: repeat; /* oder repeat-x, repeat-y..je nachdem wie das bild wiederholt werden soll */
}
#right {
float: right;
width: 180px;
background-image: url(img/header_right.gif);
background-repeat: no-repeat;
}
div.col {
height: 165px;
}
div.clear {
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="right" class="col">
inhalt
</div>
<div id="left" class="col">
inhalt
</div>
<div class="clear"></div>
</div>
</body>
</html>

Tabellengröße an Auslösung anpassen

Kizame

Thrillboy