wie kann man Text im div "überlaufen" lassen

[Wuggy]

Moin,

ich probiere gerade ein Layout zu bauen, habe da aber Probleme.

Ich habe ein div id="container"
darin ist ein div id="text" (enthält einen p-Absatz, background-image mit repeat-y, Höhe von div ist automatisch)
und ein div id="bottom-image" (enthält nur ein background-image mit no-repeat)

so sieht es aus:


Jetzt möchte ich das der Text aber auch in das untere div fließt, wenn ich dem div id="text" ein margin-bottom: -175px gebe,
also um die Höhe des unteren div id="bottom-image" verkürze, sieht es so aus:


Es kommt unten links zu dieser hässlichen Überlagerung, weil logischerweise das background-repeat vom div id="text" weiterläuft.
Mit einer fixen Höhe von div id="text" könnte man das ganze ja regeln, nur soll sich die Höhe der Textmenge anpassen.

Weiß jemand wie man also ein background-repeat um einen festen px-Wert verkürzen kann? Ich habe ein paar Sachen ausprobiert aber nichts davon kam zum gewünschten Ergebnis, ich steh da irgendwie auf der Leitung

Bin für jeden Tip dankbar,

Wuggy

 

[gKar]

Ich glaube nicht, dass das der richtige Ansatz ist.
Nur mal ins Blaue und ohne Garantie auf Korrektheit:

Wenn ich Dich richtig verstanden habe, hast Du folgende Struktur:
<div id="container" mit background-image (repeat-y)>
<div id="text" ohne background />
<div id="bottom-image" mit background-image (no-repeat) />
</div>

Anstreben würde ich ein einziges DIV, in dem der komplette anzuzeigende Text liegen soll.

Vielleicht würde folgendes gehen:
<div id="container" mit background-image (repeat-y)>
<div id="text" mit background ohne repeat, am unteren Rand ausgerichtet />
</div>

Oder eine Variante, das bottom-image im text-div mit aufzunehmen und relativ zum unteren Ende auszurichten.

 

[svn]

Würd ich auch so machen wie gKar

 

[Wuggy]

Hallo gKar, hallo svn,

vielen Dank für die Antworten. Wenn ich euch falsch verstanden habe, berichtigt mich bitte aber das funktioniert doch so auch nicht.

Ich habe jetzt:
<div id="container" mit background-image (repeat-y)>
<div id="text" mit dem bottom-image (no-repeat, position bottom) />
</div>


Das background-image vom "container" läuft ja bis zum Ende des Text-Blocks, somit kommt es wieder zu der gleichen Überlagerung. Selbst wenn ich das bottom-image jetzt noch nach unten verschiebe funktioniert es nicht, das wird dann abgeschnitten, weil das div "container" ja nur mit dem Text mitwächst.

Oder hab ich euch da jetzt völlig falsch verstanden??

Gruß & Danke

Wuggy

 

[Wuggy]

Noch mal was ausprobiert, ein Schritt weiter aber noch nicht am Ziel...



Ich habe jetzt:
<div id="container" ohne background-image>
<div id="text" auch ohne background-image><p></p></div>
</div>

im CSS dafür:
#text p {
background-image: url(images/bottom-image.png); background-position: bottom;
padding-bottom: 85px;
background-repeat: no-repeat;
padding-top: 30px;


Egal wie lang der Text jetzt wird, das bottom-image läuft mit, der Abstand zur letzten Textzeile bleibt also immer gleich. Aber wenn ich jetzt im div id="container" oder im div id="text" das background-image wieder eingebe, sieht es wieder so aus:



Ich schnall es anscheinend nicht...

 

[gKar]

OK, ich hatte nicht in Betracht gezogen, dass Deine Bottom-Grafik transparent ist und nicht über die Hintergrundgrafik des Containers gelegt werden darf.

Es gäbe verschiedene Ansatzweisen, z.B. Vermeidung von Transparenz (ist in diesem Fall aber wohl wegen des roten Hintergrunds keine Option), Splitten der Bottom-Grafik in einen wirklich nur unter dem Container anzuzeigenden Streifen und eine unabhängig davon am linken Rand irgendwie zu positionierende zweite Grafik. Elegant finde ich das auch nicht.

Mein Ansatz wäre daher: Nicht den gesamten Container mit einer Hintergrundgrafik füllen, sondern im Container ein eigenes DIV hinter dem Text anordnen, das nicht die volle Container-Höhe einnimmt.

Anbei mal ein kleiner (grafikfreier) Versuch, wie man das angehen könnte (die Styles schreibe ich zum Testen einfach direkt in die Attribute, später wäre das eher über CSS-Datei und IDs oder Klassen zu lösen):

<html>
<body>
<h2>Test</h2>
<div id="container" style="position:relative">
	<div style="background-color:#ccc; position:absolute; bottom:50px; width:100%; top:50px; z-index:1">
	</div>
	<div id="text" style="position:relative; z-index:2">
	    <p>Lorem ipsum dolor sit amet… </p>
	    <p>Hier zum Test eine Menge Text einfügen!</p>       
	</div>
</div>
</body>
</html>

Was der Test zeigt, ist, dass der lange Text mit einem hier einfach uni-grauen Hintergrund versehen wird, wobei jedoch die obersten und untersten 50 Pixel ohne Hintergrund bleiben. Dort könnten nun gesonderte Hintergrund-Grafiken abgelegt werden.

 

[Wuggy]

Moin gKar,

ja das die Grafik Transparenzen enthält hätte ich auch erwähnen können...

Aber: dein Ansatz sieht super aus!!!
Auf den ersten schnellen Versuch dürfte das für mein Layout funktionieren. DANKE, DANKE, DANKE!!
Das beschert mir so zwar viel Arbeit für's Wochenende aber dafür komm ich endlich weiter

Die Idee mit dem zusätzlichen Div ist super, da hab ich wieder was dazu gelernt. Außerdem habe ich (leider mal wieder) gemerkt, dass ich mich unbedingt noch mal mit dem Style "position" ausführlicher befassen muss.

Herzlichen Dank für's Gedanken machen und die schnelle Hilfe.
Ich wünsche ein entspanntes Wochenende.


Gruß

Wuggy

 

[gKar]

Danke für's Feedback (es freut doch, dass sich die Arbeit auch auszahlt ).

Und ja: „position“ ist ein ziemlich wichtiges und auf den ersten Blick schwer verständliches Konstrukt (leider). Dann gibt's da auch noch so Wechselwirkungen wie, dass z-index wirkungslos bleibt ohne Angabe einer position.
Aber mit ein wenig Übung kommt man halbwegs mit klar. Die Erklärungen auf SelfHTML sind auch recht gut verständlich, finde ich.

 

[Wuggy]

Moin gKar,

eine kurze Rückmeldung ist ja wohl das Mindeste wenn einem schon so schnell geholfen wird.

Mit "position" und "z-index" hatte ich schon mal in einem etwas chaotischem Projekt zu kämpfen, ich muss da mein Wissen unbedingt noch mal aufarbeiten bzw. erweitern. Deine Hilfe war auf jeden Fall der Denkanstoss dazu

SelfHTML benutze ich auch immer wieder mal zum nachschlagen, finde ich total super.

Danke noch mal.


Wuggy