✔ dynamische Image höhe funktioniert nicht

Status
Nicht offen für weitere Antworten.
Mavericklp

Mavericklp

Erfahrenes Mitglied
moin moin... ich hoffe Ihr könnt mir helfen. Also mein Problem ist volgendes. Ich würde gerne ein Bild an eine Tabelle anpassen...
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="<? echo $tem_include; ?>style.css" />
</head>
<body>
<br />
<table width="1000" border="0" cellpadding="0" cellspacing="0" align="center">
	<tr>
		<td colspan="5"><img src="<? echo $tem_images; ?>header.png" width="1000" height="111" alt="" /></td>
	</tr>
	<tr>
		<td width="26"><img src="<? echo $tem_images; ?>left.png" width="26" height="100%" alt="" /></td>
		<td width="142" valign="top"><?php include "includes/links.php" ?></td>
		<td width="33"><img src="<? echo $tem_images; ?>middle.png" width="33" style="height:100%" alt="" /></td>
		<td width="769" valign="top"><?php include "index2.php"; ?></td>
		<td width="30"><img src="<? echo $tem_images; ?>right.png" width="30" style="height:100%" alt="" /></td>
	</tr>
	<tr>
		<td colspan="5"><img src="<? echo $tem_images; ?>footer.png" width="1000" height="24" alt="" /></td>
	</tr>
</table>
</body>
</html>

Sämmtliche Bilder werden angezeigt, so wie es sein soll. nur wen der Inhalt auf der seite index2.php größer ist als die Bilder im normalen, vergrößert sich die Tabelle. Jedoch bleibt das Bild gleich hoch.

Im Internet habe ich schon einige Vorschläge gefunden. Wie z.B. die Bildhöhe mit css Bearbeiten. Dieses habe ich sowohl im Bild selber als über die css Datei versucht.

Hauptsächlich benutze ich zum ansehen der grafiken den neuen Firefox. Aber acuh der neue IE und ältere versionen der beiden machen Probleme

Größenangaben über pixel gehen einwand frei, nur nicht die relativen angaben....

Ich hoffe ihr könnt mir helfen. Schon einmal vielen Dank für eure mühe...
 
Zuletzt bearbeitet:
Hi,

um dein Vorhaben in dieser Form browserübergreifend in den Griff zu bekommen, müsstest du entweder das Dokument den Browsern im "Quirksmode" übergeben (Stichwort: Doctype-Switch) und zusätzlich die drei umschliessenden Tabellenzelle mit height:100% formatieren, oder du belässt es bei dem Doctype und dem "standardkonformen" Darstellungsmodus, und streckst neben den drei Tabellenzellen auch den Viewport des Browserfensters und die Tabelle in der Vertikalen auf 100%:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="<? echo $tem_include; ?>style.css" />
<style type="text/css">
html,body,table {
height:100%;
}
</style>
</head>
<body>
<br />
<table width="1000" border="0" cellpadding="0" cellspacing="0" align="center">
	<tr>
		<td colspan="5"><img src="<? echo $tem_images; ?>header.png" width="1000" height="111" alt="" /></td>
	</tr>
	<tr>
		<td width="26" style="height:100%"><img src="<? echo $tem_images; ?>left.png" width="26" height="100%" alt="" /></td>
		<td width="142" valign="top"><?php include "includes/links.php" ?></td>
		<td width="33" style="height:100%"><img src="<? echo $tem_images; ?>middle.png" width="33" style="height:100%" alt="" /></td>
		<td width="769" valign="top"><?php include "index2.php"; ?></td>
		<td width="30" style="height:100%"><img src="<? echo $tem_images; ?>right.png" width="30" style="height:100%" alt="" /></td>
	</tr>
	<tr>
		<td colspan="5"><img src="<? echo $tem_images; ?>footer.png" width="1000" height="24" alt="" /></td>
	</tr>
</table>
</body>
</html>

Ich kenne ja nicht das Motiv der Grafiken, um abschätzen zu können, ob sie sich zur Bildwiederholung eignen, denn die einfachste und zudem eleganteste Methode wäre hier, zumindest die drei Grafikelemente durch Hintergrundbilder in den Tabellenzellen zu ersetzen, die dann schlichtweg in der Vertikalen wiederholt werden.

Das bekommen sogar die älteren IE-Versionen einwandfrei hin :) Und du könntest es ebenfalls beim gewählten Doctype belassen.

mfg Maik
 
Moin moin...

Danke für die Antwort... ich werde mich für die letzte Variante entscheiden... dafür muss ich zwar das ganze Design umstellen aber naja egal.... das ist es mir auf jeden fall wert...

Also die Bilder als Hintergrund bild gesetzt und nen y repeat da rein...
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück