Problem mit Tabelle und Hintergrundbildern

Status
Nicht offen für weitere Antworten.
T

TimN

Erfahrenes Mitglied
Hallo,

ich habe hier ein Problem.
Ich möchte auf meiner Seite 3 "Fenster" nebeneinander haben. Bei den Fenstern handelt es sich um Tabellen mit Hintergrundbildern. Die äußeren beiden Fenster sollen immer gleich breit bleiben, und das mittlere soll so breit sein, dass der Bildschirm mit allen 3 Fenstern komplett ausgefüllt wird. Wenn das Fenster jedoch zu schmal wird, soll das Mittlere Fesnter eine Mindestbreite beitzen. Alles das sollte ja eigentlihc kein Problem sein, wenn man width="100%" für alles zusammen verwendet...

Ich wollte jetzt damit anfangen, nur mal das mittlere Fenster zu machen:

HTML: 
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr height="17">
 <td width="160" background="bilder/fenster_oben_links.gif"></td>
 <td width="300" background="bilder/fenster_oben_mitte.gif"></td>
 <td width="*" background="bilder/fenster_oben_mitte.gif"></td>
 <td width="11" background="bilder/fenster_oben_rechts.gif"></td>
</tr>
</table>

Das Problem ist, dass alle Spalten breiter werden und nicht nur die eine mit width="*".

Was mache ich falsch?
 
Nun gut

Als erstes solltest dir mal überlegen, ob du nicht CSS Layouts verwenden willst.
1. weil Tabellen nicht für die Layoutgestaltung, sondern für tabellarische Auflistung von Inhalten gedacht sind, und
2. weil es in HTML andere Möglichkeiten gibt, um Layouts zu gestalten

CSS-Layouts -->klick<--

lg
 
Ich würde an Deiner Stelle einfach ganz oben in die mittlere Tabellenzelle ein Spacer-gif mit der gewünschten Mindestbreite einsetzen.
Ist meines Wissens auch die gängige Praxis.

lg. und gutes Gelingen!
 
Vorschlag:

HTML: 
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
		<link href="styles.css" rel="stylesheet" />
	</head>
	<body>
		<div class="left">
			1
		</div>
		<div class="right">
			3
		</div>
		<div class="center">
			2
		</div>
	</body>
</html>

CSS: 
body
{
	margin: 0;
	padding: 0;
}

.left
{
	float: left;
	width: 400px;
	height: 300px;	
	background-color: #AAFFFF;
}

.center
{
	background-color: #FFAAFF;
	height: 300px;
	padding-left: 400px;
	padding-right: 20px;
}

.right
{
	float: right;
	width: 20px;
	height: 300px;
	background-color: #AAAAFF;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück