Hallo, Gast! (Registrieren)

Wir wünschen allen Besuchern frohe Ostern!

Letzte Ankündigung: MyBB 1.8.37 veröffentlicht (04.11.23)


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
Hintergrundbild in Beiträgen
#1
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
Was ist der Unterschied zwischen der Politik und der Informatik?
In der Informatik ignoriert man führende Nullen...
Zitieren
#2
Füge an der Stelle bei der du das Bild eingefügt hast beim <td> einfach ein height="150" ein.
MyBBoard.de jetzt auf YouTube!
Fehlender Plan wird durch Wahnsinn ersetzt!!Toungue
Gruß Krafdi    www.krafdi.de
Zitieren
#3
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;
}


Angehängte Dateien Thumbnail(s)
   
Was ist der Unterschied zwischen der Politik und der Informatik?
In der Informatik ignoriert man führende Nullen...
Zitieren
#4
Da bin ich mir jetzt nicht sicher ob das geht, aber füge mal bei deiner zusätzlichen CSS text-align: top; ein.
MyBBoard.de jetzt auf YouTube!
Fehlender Plan wird durch Wahnsinn ersetzt!!Toungue
Gruß Krafdi    www.krafdi.de
Zitieren
#5
Hab ich schon probiert, ändert leider nix an dem Problem Sad
Was ist der Unterschied zwischen der Politik und der Informatik?
In der Informatik ignoriert man führende Nullen...
Zitieren
#6
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']}">
<
class="postbgimage">
{
$post['message']} 
austauschst?

Dies sieht dann so aus (s. Anhang).


Angehängte Dateien Thumbnail(s)
   
Zitieren
#7
Danke linwinman, genau das hab ich gebraucht. Jetzt wirds so angezeigt, wie ich es wollte Smile

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? Sad


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 Smile
Was ist der Unterschied zwischen der Politik und der Informatik?
In der Informatik ignoriert man führende Nullen...
Zitieren
#8
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. Sad


Hat jemand noch einen Lösungsansatz?




PS: Sorry für Doppelpost
Was ist der Unterschied zwischen der Politik und der Informatik?
In der Informatik ignoriert man führende Nullen...
Zitieren
#9
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.


Angehängte Dateien Thumbnail(s)
   
Zitieren
#10
Danke, das funktioniert prima Smile (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 Wink

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

Danke für deine Hilfe Linwinman Smile


Angehängte Dateien Thumbnail(s)
   
Was ist der Unterschied zwischen der Politik und der Informatik?
In der Informatik ignoriert man führende Nullen...
Zitieren