• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Text um ein Bild am Boden

Status
Für weitere Antworten geschlossen.
H

highland

Neues Mitglied
Hallo zusammen,
ich wollte gerne für eine Newssparte folgendes Layout realisieren:

Es gibt einen Div Layer, in dem Text drin steht. Nun sollte rechts unten ein Bild eingefügt werden, dass immer mit der letzten Textzeile abschließt. Egal wie lang der variable Text jeweils ist.

_ = Text
X = Bild

_____________________________
_____________________________
_____________________________
_____________________________
_____________XXXXXXXXXXXXXXXX
_____________XXXXXXXXXXXXXXXX
_____________XXXXXXXXXXXXXXXX
_____________XXXXXXXXXXXXXXXX

Probiert habe ich es schon mit "float", was nicht wirklich funktionierte, da das Bild immer unter den Text gekommen ist, wenn ich den Bildlink nach dem Text eingefügt habe.
Momentan komm ich da nicht wirklich weiter
Weiß jemand konkret, wie ich das einfach über CSS realisieren kann?
Greetz
High
 
Ich knoble schon recht lange an deiner Frage, habe aber noch keine Lösung gefunden.
Das Problem dabei:
die Grafik lässt sich zwar rechts unten absolut positionieren, sie kommt dadurch aber mit dem Text ins Gehege: entweder ist dann Text darunter oder darüber und das soll ja nicht sein.

Wenn du die Grafik in die obere Ecke setzen könntest wär's einfacher: Text zu Bildern anordnen.

Aber für dein Problem ist mir wirklich noch keine Lösung einfallen.
 
hi
@prm
das ging mir genau so. ich habe es auch nicht geschafft, dass das bild den text "verdrängt".
(edit: jup, oben rechts gehts ganz einfach, indem man das bild vor dem text mit float right dahin setzt.optisch für diese spezielle sache jedoch eine katastrophe^^)

@neuro
so etwas dachte ich mir schon

____

schade.. dann werde ich mir wohl oder übel eine andere darstellungslösung überlegen müssen.

schönen abend
thx
greetz
high
 
Ich stelle mal dies "gekrakel" in den Raum und hoffe das vllt dennoch eine Lösung zu finden ist! Es sollte ja wohl alles möglich sein :)

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<title> testo </title>

<style type="text/css">

div#over    { width:600px; height:100%; }

img        { heigth:300px; width:300px; margin-left: 0.5em; float:right; border:1px solid; }

p.first        { padding-left: 0.5em; padding-right: 0.5em; margin:0; text-align: justify;  }

p.second    { padding-left: 0.5em; margin:0; text-align: justify; }

</style>

</head>
<body>

<h1> Dat Bild unten rechts</h1>

<div id="over">
    <p class="first">    
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla risus. Nullam eget lorem. Morbi metus nunc, dictum vitae, tincidunt sed, cursus sit amet, nunc. Nam vehicula venenatis ante. Duis tincidunt, pede non auctor volutpat, nisl ante tristique sem, quis molestie nibh orci quis erat. Donec enim lectus, adipiscing a, ultricies ut, pellentesque sed, elit. In porttitor tortor vel metus. Suspendisse potenti. Nullam dui. Duis ante sapien, lacinia sit amet, consequat vel, aliquam et, nibh. Phasellus sit amet purus in est convallis bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel elit.
    </p>

    <img src="#" height="300" width="300" alt="test" />

    <p class="second">
        Ut fermentum, felis vitae malesuada venenatis, mauris nulla ullamcorper quam, et aliquet dolor nisl sollicitudin nunc. Donec scelerisque tellus ac nulla. In eget nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras dignissim sapien. Aenean tellus urna, vulputate nec, viverra et, mollis at, lectus. Nunc ut dolor vel magna tempus consectetur. Cras id sem. Praesent pulvinar. Ut sapien nibh, commodo id, laoreet ac, accumsan in, sem. Vestibulum vitae neque. Nullam ornare, turpis quis ullamcorper aliquam, lacus nulla pulvinar ante, porta bibendum massa neque vitae mi. Vestibulum consectetur libero. Vestibulum faucibus odio eget odio. Suspendisse vulputate sapien ac lorem. Praesent felis mauris, porta eget, imperdiet vel, mollis vitae, velit. Pellentesque dapibus. Quisque sit amet erat. 
        Ut fermentum, felis vitae malesuada venenatis, mauris nulla ullamcorper quam, et aliquet dolor nisl sollicitudin nunc. Donec scelerisque tellus ac nulla. In eget nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras dignissim sapien. Aenean tellus urna, vulputate nec, viverra et, mollis at, lectus. Nunc ut dolor vel magna tempus consectetur. Cras id sem. Praesent pulvinar. Ut sapien nibh, commodo id, laoreet ac, accumsan in, sem. Vestibulum vitae neque. Nullam ornare, turpis quis ullamcorper aliquam, lacus nulla pulvinar ante, porta bibendum massa neque vitae mi. Vestibulum consectetur libero. Vestibulum faucibus odio eget odio. Suspendisse vulputate sapien ac lorem. Praesent felis mauris, porta eget, imperdiet vel, mollis vitae, velit. Pellentesque dapibus. Quisque sit amet erat. 
    </p>

</div>


</body>
</html>
Grüßli
Loon3y
 
Klappt leider nicht. Das Bild ist bei mir auf mittlerer Höhe (Bildoberkante = Beginn zweiter Absatz) und wird bei zu langem Text von diesem unterflossen, steht also nicht in der unteren Ecke.

Ich bin zwar etwas vorsichtiger als neuroleptika und will nicht behaupten, dass es keine Lösung gibt (vielleicht findet sich ja doch noch ein Freak).
Aber von der Logik her kann es m.E. auch keine geben.
Der Grund liegt darin, dass das Bild eine fixe Fläche hat, während der Text variabel an "Menge" ist.
Würde es funktionieren, dann müsste sich in diesem Fall der Text nach oben hin ausdehnen, denn unten soll er ja mit dem Bild abschließen und es umfließen.
Es widerspricht jedoch der CSS-Systematik, dass sich Elemente mit zunemendem Inhalt nach oben erweitern. Vielmehr ist es umgekehrt: Sie "wachsen" nach unten.

Eine generelle Lösung sehe ich somit nicht.
Individuell könnte man durch Versuch und Irrtum austesten, an welcher exakten Textstelle das (rechtsgefloatete) Bild eingefügt werden muss. Dann darf sich aber auch nicht die Schriftgröße verändern, weil's bereits dann nicht mehr passt.
 
prm schrieb:
Individuell könnte man durch Versuch und Irrtum austesten, an welcher exakten Textstelle das (rechtsgefloatete) Bild eingefügt werden muss. Dann darf sich aber auch nicht die Schriftgröße verändern, weil's bereits dann nicht mehr passt.
Zum Vergrößern anklicken....
Selbst wenn Schriftgröße, Schriftart und Zeilenhöhe unveränderbar währen würde das nicht gehen. Die Browser würden trotz dem nicht exakt an der selben Stelle umbrechen.

Die einziege Möglichkeit das Bild an der Unterkannte der Box auszurichten ist position: absolute; bottom: wert;
Dann hat das Bild aber keinen Einfluss mehr auf den Fließtext.

Die andere Möglichkeit währe das gefloatete Bild mit einem negativen margin nach oben zu ziehen. Dann schiebt es sich aber über den Text.

table-cell oder inline-box umfließen nicht. Das kann nur float.
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben