Image nach variablem Text hinter diesem mit tlw. Überlappung

[widi2k]

Folgendes Problem:

Ich habe ein Fenster aus einer Grafik (mit vertikalem Verlauf) in 3 Teile unterteilt. Oben, Mitte und Unten. Die mittlere Grafik ist 1 Pixel hoch und ist zum Wiederholen, wenn es der Inhalt in dem Fenster mehr Platz in der Höhe braucht als das Bild hergibt.

Das ganze Fenster befindet sich in einer Tabelle mit einer Zeile und einer Spalte und dem mittleren Grafikteil als Hintergrund.

In diesem binde ich als ersten den oberen Grafikteil ein. Dann den Text. Dann den unteren Grafikteil.

Wegen dem vertikalen Verlauf sind jetzt aber das obere Bildteil und das untere Bildteil sehr groß. Das ist doof ^^

Das obere kann ich schön überschreiben, in dem ich mit <p style="margin-top:-50"> den Text einfach höher setze.

Nun will ich aber, dass nach dem Text nicht mehr soviel Platz ist. Da der untere Teil der Grafik ca 80 Pixel hat.

Verkleinern kann ich die Grafik nicht - wegen dem vertikalen Verlauf!

Beim unteren ist jetzt das Problem. Da der Browser beim aufbauen ja Top Down geht und ich das untere Bild nach dem Text einbinden muss, kann ich das Bild nicht einfach höher setzen, da es dann den Text überdeckt.

Bei dem Text handelt es sich um einen variablen, den ich per PHP aus einer MySQL Datenbank ziehe. Ich weiß also nicht wieviele Pixel mein Text braucht.

Der untere Grafikteil soll natürlich am Ende (also ganz unten) von der Tabelle sein.

Bitte helft mir und sagt mir wie ich es hinbekomme, dass die untere Grafik hinter dem Text liegt!

Im voraus schonmal THX @ ALL

 

[Dr Dau]

Hallo!

Zuerst einmal gehört zum abstand auch eine Masseinheit.
Hast Du es mal z.b. so probiert:

<p style="margin-top:-50px; margin-bottom:-50px;">

(ungetestet)
Setzt natürlich vorraus dass die Tabellenhöhe auch variabel ist.

Irgendwie ist deine Erklärung auch verwirrend.
Wie währe es mal mit Code?
Notfalls ein Bild basteln wie die Seite aussehen soll.

Gruss Dr Dau

 

[widi2k]

Zunächst einmal vielen Dank für die schnelle Antwort! Echt klasse!

Die Homepage um die es geht:

http://www.sabihabi.de/?area=30200&ssid=

Bei den grünen Fenstern (mit den Gästebucheinträgen) ist nach dem Eintrag noch so 80 Pixel grün. Diesen 'leeren' Bereich möchte ich verkleinern.

Das Bild kann ich aber nicht verkleinern.

Sprich das Bild muss nach oben verschoben werden oder der Text nach unten, wobei die Grafik hinter dem Text liegen muss.

<? echo $text; ?>
<p style="margin-top:-50px">
<img src"Bild" width=624 height=98>
</p>

Schiebt das Bild zwar passend hoch, dann liegt aber das Bild über dem Text.

<img src"Bild" width=624 height=98>
<p style="margin-top:-200px">
<? echo $text; ?>
</p>

Das würde gehen, aber da ist das Problem das 200 Pixel jetzt willkürlich gewählt wurde. Ich weiß nicht wieviele Pixel der Text hat. Ist der Text so lang, dass er zB eine Höhe von 1000 Pixel hat, klappt es nicht.

Momentan hab ich das Bild in eine extra Zeile als Hintergrund drin.

...
TEXT
</td>
</tr>
<tr width=624 height=98
<td width=624 height=98 background="Bild">

</td>
</tr>
</table>

Wenn ich es so mache:

...

<p style="margin-bottom:-50">
TEXT
</p>
</td>
</tr>
<tr width=624 height=98
<td width=624 height=98 background="Bild">

</td>
</tr>
</table>

stellt es der Mozilla Firefox genau so dar wie ich es haben will, dass das Bild unter den Text geschoben wurde und somit im Fenster nach dem Text keine so große Lücke mehr ist.

Nur bei allen anderen Browsern geht das nicht, da ist der Text hinter der Grafik.