sachsflo
Threadersteller
Dabei seit: 16.05.2006
Ort: München
Alter: -
Geschlecht:
|
Verfasst Di 16.05.2006 14:44
Titel Tabellegröße an Div anpassen |
|
|
Hallo zusammen.
Ich stehe vor folgendem Problem:
Ich habe ein Tabellengestütztes Layout (das später als Template für Typo3 dienen soll).
Hinter dem Inhaltsbereich soll ein Hintergrundbild (in diesem Fall ein Fußballfeld) liegen, dessen Größe sich abhängig vom Inhalt der Zelle anpasst. Für den Anfang wäre ich mit einer Variante mit skalieren des Bild auf 100% Höhe schon zufrieden (allerdings soll hier eine Mindestgröße von den Grundausmassen der Grafik erhalten bleiben, sprich das ganze soll sich nur bei Inhaltsüberlauf vergrößern, nicht aber verkleinern, wenn weniger Inhalt drin ist).
Lieber wäre mir allerdings eine Lösung, bei der nicht die Hintergrundgrafik vollständig skaliert wird, sondern die die freien Bereiche (im Beispiel die Bereiche zwischen Strafraum und Mittelkreis).
Bei meinen bisherigen Versuchen, das ganze zu realisieren, indem ich sowohl die Grafik als auch den Inhalt mit DIV-Elementen in die Tabelle einzufügen, steht der Text entweder unter der Grafik (und erweitert die Zellenhöhe entsprechend) oder überlagert zwar das Bild, läuft aber nach Ende der Grafik aus der Tabelle heraus.
Das ganze könnt Ihr euch unter kinderwelt.cafe-netzwerk.de anschauen.
Ich füge unten mal den Code der Seite ein.
Bin für jeden Tip dankbar.
Florian
Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #0A50A1;
}
-->
</style></head>
<body>
<table width="760" height="838" border="0" align="center">
<tr bgcolor="#000000">
<td height="80" colspan="3"> </td>
</tr>
<tr>
<td width="130" bgcolor="#FF0000"> </td>
<td width="486" height="752" valign="top" bgcolor="#31A028">
<div style="position:static; z-index: 1;"> <img src="Fußballfeld-schwarz.jpg" height="100%"/> </div>
<div style="position:absolute; top:114px; left:296px; width: 454px; color: #FFFFFF; z-index: 5;" id="Inhalt">
<p>anieaasdfdasfasdfasdfasdfasdfasdfasdffa</p>
<p>asdkfjasdkfjasdkjfkasdjfklsdjaklfjasdklfjklasdjfklasdjfkasöfksdajöfkasdjfk</p>
<p>anieaasdfdasfasdfasdfasdfasdfasdfasdffa</p>
<p>asdkfjasdkfjasdkjfkasdjfklsdjaklfjasdklfjklasdjfklasdjfkasöfksdajöfkasdjfk</p>
<p>anieaasdfdasfasdfasdfasdfasdfasdfasdffa</p>
<p>asdkfjasdkfjasdkjfkasdjfklsdjaklfjasdklfjklasdjfklasdjfkasöfksdajöfkasdjfk</p>
<p>anieaasdfdasfasdfasdfasdfasdfasdfasdffa</p>
<p>asdkfjasdkfjasdkjfkasdjfklsdjaklfjasdklfjklasdjfklasdjfkasöfksdajöfkasdjfk</p>
<p>anieaasdfdasfasdfasdfasdfasdfasdfasdffa</p>
<p>asdkfjasdkfjasdkjfkasdjfklsdjaklfjasdklfjklasdjfklasdjfkasöfksdajöfkasdjfk</p>
<p>anieaasdfdasfasdfasdfasdfasdfasdfasdffa</p>
<p>asdkfjasdkfjasdkjfkasdjfklsdjaklfjasdklfjklasdjfklasdjfkasöfksdajöfkasdjfk</p>
<p>anieaasdfdasfasdfasdfasdfasdfasdfasdffa</p>
<p>asdkfjasdkfjasdkjfkasdjfklsdjaklfjasdklfjklasdjfklasdjfkasöfksdajöfkasdjfk</p>
<p>anieaasdfdasfasdfasdfasdfasdfasdfasdffa</p>
<p>asdkfjasdkfjasdkjfkasdjfklsdjaklfjasdklfjklasdjfklasdjfkasöfksdajöfkasdjfk</p>
<p>anieaasdfdasfasdfasdfasdfasdfasdfasdffa</p>
<p>asdkfjasdkfjasdkjfkasdjfklsdjaklfjasdklfjklasdjfklasdjfkasöfksdajöfkasdjfk</p>
<p>anieaasdfdasfasdfasdfasdfasdfasdfasdffa</p>
<p>asdkfjasdkfjasdkjfkasdjfklsdjaklfjasdklfjklasdjfklasdjfkasöfksdajöfkasdjfk</p>
<p>anieaasdfdasfasdfasdfasdfasdfasdfasdffa</p>
<p>asdkfjasdkfjasdkjfkasdjfklsdjaklfjasdklfjklasdjfklasdjfkasöfksdajöfkasdjfk</p>
<p>anieaasdfdasfasdfasdfasdfasdfasdfasdffa</p>
<p>asdkfjasdkfjasdkjfkasdjfklsdjaklfjasdklfjklasdjfklasdjfkasöfksdajöfkasdjfk</p>
<p> </p>
</div>
</div></td>
<td width="130" bgcolor="#FFFF00"> </td>
</tr>
</table>
</body>
</html>
|
|
|