Gegen Bilderklau - Das Original | Druckvorschau: Bild passt sich an Text an

Geschrieben von empty.threat am 06.06.2009 um 10:42:

Bild passt sich an Text an

Hallo,

ich habe ein kleines Problem.

Und zwar habe ich einen Scrollbereich in eine Seite eingebaut.
Das ganze mit Javascript gemacht.

Der Scrollbereich ist 320x500Px groß.

Dann habe ich dem Ganzen ein Hintergrundbild durch class="hintergrund" zugeteilt.
Das funktioniert auch wunderbar, solange die 320x500 Px mit Text vollgeschrieben sind.

Ist der Text beispielsweise nur eine Zeile hoch, dann kürzt das Bild, so dass es direkt unter und neben dem Text endet.

Was muss ich definieren, damit das Bild immer, egal wie lang der Text ist, komplett angezeigt wird?

Und noch was:
Geht der Text über das Bild hinaus uns man scrollt runter, dann endet das Bild und es geht im Hintergrund weiter.
Was muss ich machen, damit es inerhalb des Bildes scrollt?

Liebe Grüße

Geschrieben von .Senseless am 06.06.2009 um 10:54:

Öhm, könntest du mal deinen Code zeigen?
Ich kann mir das noch nicht so ganz vorstellen. xD

Geschrieben von empty.threat am 06.06.2009 um 11:04:

code:

1:

<div id="wn">     <div id="lyr1"; class="hintergrundiframe";>         <p><font color="#000000"><a href="textedates/oldtimer2009.php" style="color: black;" target="AGBs" onclick="javascript:window.open('','AGBs','width=600,height=600,scrollbars')">07.06.2009</a> - Oldtimertreffen in Seltmans</font></p>      </div> </div>  <!-- end wn div --> </td> <td> <!-- border attribute added to reduce support questions on the subject.      If you like valid strict markup, remove and place a img {border:none;} spec in style sheet --> <div id="scrollLinks">     <a class="mouseover_up" href="#"><img src="images/tri-up.gif" alt="" border="0" /></a>     <a class="mouseover_down" href="#"><img src="images/tri-dn.gif" alt="" border="0" /></a> </div></td></tr></table>  </td>

Und so siehts aus mit wenig Text:
[IMG]http://www.250kb.de/fileupload.php?pixname=f4de9261.jpg&urlext=j[/IMG]

So, wenn viel Text da ist:

Und so, wenn der Text länger als das Bild ist:

Wie gesagt, ich möchte es so haben, dass das Bild immer komplett zu sehen ist und in dem Bild gescrollt wird.

Geschrieben von .Senseless am 06.06.2009 um 11:12:

code:

1:

<div id="wn">     <div id="lyr1"; class="hintergrundiframe"; style="overflow: auto;">         <p><font color="#000000"><a href="textedates/oldtimer2009.php" style="color: black;" target="AGBs" onclick="javascript:window.open('','AGBs','width=600,height=600,scrollbars')">07.06.2009</a> - Oldtimertreffen in Seltmans</font></p>      </div> </div>  <!-- end wn div --> </td> <td> <!-- border attribute added to reduce support questions on the subject.      If you like valid strict markup, remove and place a img {border:none;} spec in style sheet --> <div id="scrollLinks">     <a class="mouseover_up" href="#"><img src="images/tri-up.gif" alt="" border="0" /></a>     <a class="mouseover_down" href="#"><img src="images/tri-dn.gif" alt="" border="0" /></a> </div></td></tr></table>  </td>

Probiers mal so, bin mir nicht sicher, weil ich nicht genau erkennen kann, wo dein Text hinkommt. ;D

Geschrieben von empty.threat am 06.06.2009 um 12:15:

Mmmh...
also jetzt verrutscht das wenigstens nicht mehr, aber der Text passt nicht ganz.

Und zwar ist das Element 500px hoch, genauso wie das Hintergrundbild.
Das untere Ende von dem Hintergrundbild ist jedoch nur ein Schatten und da sollte natürlich kein Text reinlaufen.
Mach ich also das Element etwas kleiner, dann verkleinert sich ja automatisch auch das Hintergrundbild und das will ich nicht.
Hat jemand eine Lösung?

http://www.schneckenpost.net/kuhltur.php