Hallo,
alos, ich habe Text in einem DIV mit Positionierung relative. Und nun möchte ich da drinnen ein DVI rechts unten absolut positionieren. Und jetzt kommt's: Der Text soll um dieses DIV links rum fleisen!
Ich nehme auch andere Tags, wenn's nötig ist. Aber - ich habe dazu überhaupt nichts gefunden.
Selbst TYPO3 verkneift sich das in der Positionierung von Bildern im Inhaltstyp "Text mit Bild". Und meins Wissens gibt es da auch (leider) Nichts.
Fragen kostet ja nichts...
LG Jan
Text kann nicht um ein „absosute“ positioniertes Element herum fließen. Das Element wird aus dem Dokumentenfluss raus genommen und hat keine Wirkung auf die anderen Elementen (und umgekehrt genau so).
Hätte das Element stattdessen Float, wäre es zwar auch aus dem Dokumentenfluss raus genommen (die folgende normal fließende Elementen rutschen unter ihm durch), die Zeilenboxen des Textes weichen ihm aber aus – das, was Du haben möchtest.
Bis hierhin – bloß CSS-Grundlagen. 😉
Was Du jetzt noch bräuchtest, ist die Höhe des Elementen in dem der Text steht – um eben das Bild unten rechts positionieren zu können
Text enthaltende Elementen sollten aber keine feste Höhe haben – der Textinhalt selbst sollte die Höhe bestimmen.
Somit ist die Aufgabe mit (einfachen) CSS-Mittel nicht zu lösen. Eher mit JavaScript.
P.S.: Hier habe ich auf die Schnelle ein Testcase (mit ein paar Kommentaren) erstellt. Vergrößere, bzw. verkleinere langsam das Browser-Fenster, um zu sehen, wo die Schwierigkeiten bei dieser Aufgabe liegen.
<!doctype html>
<meta charset="UTF-8">
<title>Jan68 :: typo3.net</title>
<style>
* { margin: 0; padding: 0; }
div {
width: 60%; /* damit man mit der Breite des Browser-Fensters spielen kann */
height: 15em; /* soll bei einem element mit textinhalt nicht gesetzt werden - hier nur zum testen */
margin: 5em auto;
/*overflow: hidden;*/
background-color: #ccd;
}
span { /* abstandshalter fuer das bild */
float: right;
width: .1em; /* so duenn wie möglich, um den Platz fuer den Text nicht zu verkleinern */
height: 100%; /* wirkt nur, wenn das elternelement (das div) eine feste hoehe hat */
margin-right: -.1em; /* aus dem div raus holen */
margin-bottom: -6.2em; /* hoehe des bildes plus margin */
background-color: #f00; /* nur damit sichtbar */
}
img {
clear: right; /* unter dem abstandshalter positionieren */
float: right;
width: 8em;
height: 6em;
margin: .2em .8em;
background-color: #f00;
}
</style>
<div>
<span><!-- --></span>
<img alt="Bild">
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>