Wie den Text im 2. Div runter rutschen lassen

Freakli · 7. September 2010, 07:52

Guten Morgen,

Hab ein Problem mit 2 Divs und einem Image

ich hab ein Image:[Blockierte Grafik: http://free-picload.de/pics/4c85cf6a545ef.gif]

und ein zweites: [Blockierte Grafik: http://free-picload.de/pics/4c85d0110123b.gif]

Weiter hab ich eine Tabelle mit den beiden Divs:

Quellcode

....
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="469" height="43" valign="top"><div id="content"><div class="content"><p>sdgsdgfhgfdfdgjdj</p>
</div></div></td>
</tr>
<tr>
<td style="width:469px;"> </td>
</tr>
</table>
....

Alles anzeigen

CSS:

Quellcode

#content{
background:url(Bild1);
padding-top:160px;
background-repeat:no-repeat;
}
.content{
background:url(Bild2) repeat-y;
padding-left:60px;
}

Alles anzeigen

Ich möchte jetzt erreichen das der Text um ca. 80px vom ersten Bild nach unten rutscht und das 2.te Bild im Hintergrund sixh an der y-Achse wiederholt.
Das erste ist nur im Hintergrund wegen dem oberen Teil der runden Ecken.

Warum das Image nicht anders aufteilen?
Geht nicht. Screen: [Blockierte Grafik: http://free-picload.de/pics/4c85d1af9ddb2.jpg]

Möchte ja das der Text, im Screen weiter oben ist, als von oben ca. 80px nach unten.

Ich hab schon alles mögliche versucht, mit Z-Index, padding, margin etc

Aber bekomms nicht hin...

Hoffe ihr könnt mir da iwie helfen...

OchseUwenknecht · 10. September 2010, 09:39

Hallo Freakli,

das sollte mit position:relative; und position:absolute; gelöst werden können.
Das <div>-Element, das den Text umschließt erhält ein position:relative; per CSS.
Das <p>-Element, das den Text beinhaltet, bekommt das position:absolute; und die beiden Eigenschaften top:80px; left:20px;
so ist der Text 80 Pixel von oben und 20 Pixel von Links positioniert.

Gruß, Uwe

Tim Eipert · 10. September 2010, 10:13

Tabellen sind immer schlecht!
Dass Bild sollte sich eigentlich wiederholen...

Wie den Text im 2. Div runter rutschen lassen

Wie den Text im 2. Div runter rutschen lassen

Quellcode

Quellcode

Teilen

Tags