[Zwoetzen]

[Bild: http://funtrackers.fu.funpic.de/images/background.png]

Hi alle zusammen,

ist es möglich, in jeden Beitrag eine kleine Hintergrundgrafik (150*100px) einzubinden?
Zur Demonstration hab ich die Grafik mal hier reingebastelt, so sollte es dann eben aussehen, nur dass sie eben als Hintergrund ist und der Text links daneben (und übendrüber) verläuft.

Ich habe es zwar schon hinbekommen, die Grafik einzubinden, allerdings wurde sie immer unten abgeschnitten, wenn ein Beitrag nur aus 1 oder 2 Zeilen bestand.

Würde mich über Tipps freuen


MfG zwoetzen

[krafdi]

Füge an der Stelle bei der du das Bild eingefügt hast beim <td> einfach ein height="150" ein.

[Zwoetzen]

Danke für diesen Tip, allerdings hab ich jetzt das Problem, dass der Inhalt des Beitrages nicht mehr am oberen Rand sondern in der Mitte steht (siehe Screenshot).

Hier mal das, was ich geändert hab:

Template: postbit (Auszug) - Änderung ist das class="postbgimage"

PHP-Code:

<tr>
<td class="{$altbg}" width="15%" valign="top" style="white-space: nowrap; text-align: center;"><a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
{$post['user_details']}
</td>
<td class="{$altbg}" width="85%" valign="top">
<table width="100%">
<tr><td class="postbgimage">{$post['posturl']}{$post['icon']}<span class="smalltext"><strong> {$post['subject']}</strong></span>
<br />
<div id="pid_{$post['pid']}">
<p>
{$post['message']}
//und so weiter (sonst keine Änderungen) 


Zusätzliches CSS im Theme:

Code:

.postbgimage {
    background-image: url(images/background.png);
    background-repeat: no-repeat;
    background-position: right 32px;
    height: 150px;
}

[krafdi]

Da bin ich mir jetzt nicht sicher ob das geht, aber füge mal bei deiner zusätzlichen CSS text-align: top; ein.

[Zwoetzen]

Hab ich schon probiert, ändert leider nix an dem Problem

[linwinman]

Hallo Zwoetzen,

hilft es dir, wenn du den

PHP-Code:

<tr><td class="postbgimage">{$post['posturl']}{$post['icon']}<span class="smalltext"><strong> {$post['subject']}</strong></span>
<br />
<div id="pid_{$post['pid']}">
<p>
{$post['message']} 


gegen

PHP-Code:

<tr><td>{$post['posturl']}{$post['icon']}<span class="smalltext"><strong> {$post['subject']}</strong></span>
<br />
<div id="pid_{$post['pid']}">
<p class="postbgimage">
{$post['message']} 


austauschst?

Dies sieht dann so aus (s. Anhang).

[Zwoetzen]

Danke linwinman, genau das hab ich gebraucht. Jetzt wirds so angezeigt, wie ich es wollte

EDIT:

Mir ist leider grad ein anderer Fehler aufgefallen:
Und zwar gehen jetzt die Smileys (eigentlich der gesamte Inhalt des Beitrages) übder die Beitragsgrenzen hinaus in den darauffolgenden Beitrag.
Siehe dazu dieses Thema: *Link entfernt*

Wenn ich die Class aus dem <p>-Tag entferne ist es wieder normal, also muss es daran liegen.
Hat jemand ne Lösung für das Problem?


MfG zwoetzen

EDIT 2: Im IE sind die Beiträge abgeschnitten, im Firefox haben sie "Überlänge" (also überlappen sich)

EDIT3: Problem gelöst.
Da war noch ein "height: 150px" im CSS, nach entfernen wird wieder alles normal angezeigt

[Zwoetzen]

Hab mich zu früh gefreut: Leider besteht das Problem immernoch (hatte gestern nicht nochmal genau geschaut).

Also nochmal zum mitschreiben:
Wenn ich im Zusätzlichen CSS das "height: 150px" hinschreibe, wird das Bild komplett angezeigt, allerdings geht der Inhalt der Beiträge dann über die Grenzen hinaus in den nächsten Beitrag hinein. (Dadurch nicht mehr leserlich, da sie sich eben überlappen)
Wenn ich es aus dem CSS entferne, wird das Hintergrundbild wieder abgeschnitten, sobald der Beitrag nur aus ein oder zwei Zeilen besteht.


Hat jemand noch einen Lösungsansatz?




PS: Sorry für Doppelpost

[linwinman]

Hallo Zwoetzen,

ich weiß nicht, ob es dir weiter hilft - hier ist noch ein anderer Ansatz (wurde mit "IE 7", "FF 2" und "Opera 9.2x" getestet und sollte funkt.).

Im Templater "postbit" den (Original-)

Code:

<tr>
<td class="{$altbg}" width="15%" valign="top" style="white-space: nowrap; text-align: center;"><a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
{$post['user_details']}
</td>
<td class="{$altbg}" width="85%" valign="top">
<table width="100%">
<tr><td>{$post['posturl']}{$post['icon']}<span class="smalltext"><strong> {$post['subject']}</strong></span>
<br />
<div id="pid_{$post['pid']}">
<p>
{$post['message']}
</p>
</div>
...

ersetzen mit

Code:

<tr>
<td class="{$altbg}" width="15%" valign="top" style="white-space: nowrap; text-align: center;"><a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
{$post['user_details']}
</td>
<td class="{$altbg}" width="85%" valign="top">
<table width="100%">
<tr><td>{$post['posturl']}{$post['icon']}<span class="smalltext"><strong> {$post['subject']}</strong></span>
<br />
<div id="pid_{$post['pid']}">
<p>
<img id="bgimg" src="images/bg-img.png" border="0" alt="" />
{$post['message']}
</p>
</div>
...

In "Theme / Zusätzliches CSS" den

Code:

#bgimg {
    width: 100px;
    height: 87px;
    border: 1px solid #000;
    float: right;
    margin: 0px 15px 15px 15px;
}

hinzufügen und die Werte anpassen.

Hierbei wird das Bild vom Text umflossen. Das Ergebnis hängt noch 'mal unten dran.

[Zwoetzen]

Danke, das funktioniert prima (Ich musste nur im img-tag noch ein align="right" einfügen, da sonst das Bild immer links angezeigt wurde.

Als netten Nebeneffekt, der aber eigentlich nicht weiter schlimm ist, wird das Bild auch in den Zitaten und Codeboxen etc. angezeigt (falls diese eben weit genug oben stehen).
Im Anhang mal das Bild dazu.
Aber wie gesagt, find ich gar nicht so schlimm, das lass ich so

Da kann ich auch jetzt bissl Transparenz rausnehmen, da der Text ja nicht mehr drüberläuft

Danke für deine Hilfe Linwinman