CSS Rundes div umfließen lassen

[D. ACE]

Hallo,

ich wollte ein Bild einfügen, dass eine runde Form hat und dieses Bild von einem Text rechts umfließen lassen.

Ich habe folgenden HTML-Code (der nicht bearbeitet werden darf)

<div id="quickSummary">
<p class="p1"><span>A demonstration of what can be accomplished visually through <abbr title="Cascading Style Sheets">CSS</abbr>-based design. Select any style sheet from the list to load it into this page.</span></p>
<!-- dieser Text soll das Bild umfließen -->
<p class="p2"><span>Download the sample <a href="zengarden-sample.html" title="This page's source HTML code, not to be modified.">html file</a> and <a href="zengarden-sample.css" title="This page's sample CSS, the file you may modify.">css file</a></span></p>
</div>
<!-- Dieser div-Container beinhaltet das Bild -->
<div id="extraDiv3"><span></span></div>

Nun hab ich in meinem CSS folgendes stehen:

/*modifizierung des divs, der den Text beinhaltet */
#quickSummary .p1 {
	color: white;
	font: 170% impact;
	width: 330px;
	height: 90px;
	margin: auto;
	margin-top: -20px;
}

/* behinhaltet das Bild als Hintergrund
float: left, um Text rechts fließen zu lassen 
und border-radius: 300px um das div rund werden zu lassen*/
#extraDiv3 {
	background: url(../img/ZenOinvertiert.png) no-repeat center center;
	background-size: 190px 235px;
	width: 190px;
	height: 235px;
	position: absolute;
	top: 285px;
	left: 280px;
	float: left;
	border: 1px solid;
	border-radius: 300px;
}

leider hat mein Code keine Auswirkung und der Text wird ohne gewünschten Effekt einfach neben dran geschrieben.
Hat jemand eine Idee?

 

[Ic3HanDs]

Es gibt keine runden divs in html, ergo ist dies auch nicht möglich. Divs sind immer rechteckig.

 

[D. ACE]

auch wenn ich es mit border-radius rund mache?
ich meine ich sehe ja, dass der Rahmen dann rund ist und der Rahmen ist, wer hätte es gedacht, der Rahmen des divs, also rund?

€dit: also ich habe das div wieder rechteckig gemacht und der Text schmiedet sich trotzdem nicht an, also irgendwas stimmt da nicht ganz.
"Meine Überlegung ist, woher weißt das div, welchen Text es anschmieden soll?" Wie teile ich es ihm mit?

 

[Daaron]

Das was du dir hier wünschst wäre der Heilige Gral des Textflusses in HTML-Dokumenten. Wie der Heilige Gral ist es aber leider nur eine Legende...

In einem Print-Dokument kannst du den Text direkt an einem Element entlang fließen lassen. Ansgenommen, du hast zwischen 2 Textspalten in einer Zeitung ein Foto von Homer Simpson, dann fließen die Spalten links und rechts um seine Wampe herum. In einem HTML-Dokument ist, bei aller CSS-Trickserei, so etwas noch nicht möglich. Evtl. wird es mal möglich sein, aber das steht noch in weeeeeiter Ferne.
Zum aktuellen Zeitpunkt kannst du ja noch nicht einmal Text automatisch in Spalten aufteilen lassen (obwohl es dafür wenigstens Ansätze gibt). Dabei wäre allein so etwas eine echt geile Sache. Nix is beschissener zu lesen als Fullscreen-Text auf nem FullHD-Monitor.

 

[D. ACE]

alles klar, dann finde ich mich damit ab, aber warum lässt sich der Text nicht mal mit nem normalen div floaten?

 

[Daaron]

Wenn ich raten müsste (und das muss ich, weil ich grad zu faul bin es zu simulieren):
- position: absolute; versaut schon einmal eine Menge
- <div><p>...</p><div> um ein weiteres <div> floaten zu lassen klappt nicht sauber. Pack das Bild auf eine "Ebene" mit den <p>'s, dann fließen die Absätze korrekt um die Grafik (halt rechteckig, nicht rund).

Ich würde so oder so dazu raten, anders an die Sache heran zu gehen. Dein leeres <div><span></span></div> ist ein reines Füller-Element und hat in HTML nichts zu suchen. Solche Sachen solltest du via CSS lösen, in diesem speziellen Fall über :before oder :after, je nachdem was besser in den Kram passt.

 

[Rain]

Ich kann mir vorstellen, dass das mit ein bisschen Aufwand möglich ist. Voraussetzung wäre, dass das Bild an den Stellen ohne Bildinhalt transparent ist und es muss gegeben sein, das Bild auszulesen (bin mir nicht sicher ob das PHP kann, hab die Funktion noch nie gebrauchen müssen).

Du müsstest dann auslesen, wo der erste transparente Pixel zu finden ist (von links, rechts, oben, unten ... wo auch immer du startest) und setzt da (absolute positioniert) deinen ersten Buchstaben. Den nächsten Buchstaben setzt du mit einem Offset (Breite/Höhe Buchstabe) und liest den nächsten Wert für den transparenten Pixel aus, usw. Das dürfte eigentlich für eine Richtung (sprich: von oben nach unten) recht einfach funktionieren, aber bei einem Richtungswechsel (also zB von oben nach unten, dann von rechts nach links) noch bisschen aufwändiger werden; falls 360° abgewickelt werden sollen: sehr aufwändig.

Wenn ich Lust und freie Spitzen habe, dann setze ich das mal um (interessiert mich irgendwie). Die Frage ist nur, ob zB PHP Bilder soweit analysieren kann, dass es mir die Koordinaten eines bestimmten Pixels ausgeben kann (zB bei y = 15, gib mir x wo RGBa(*,*,*,1) ist).

Mit reinem CSS wirds aber leider nix.

 

[Daaron]

Wird nicht klappen, außer du schreibst deinen Text als totale Grütz-Code. Dein Text sind im Zweifel einer oder mehrere Absätze, die ihre Zeilenumbrüche dynamisch anhand des zur Verfügung stehenden Raumes und der Schriftgröße wählen. Wie willst du da jeder Zeile ein eigenes X-Offset mitgeben?

Übrigens würde ich das nicht PHP machen lassen. Ich glaube, nicht einmal imagick kann, was du hier suchst. Man könnte aber evtl. so eine Funktion via HTML5/JS - Canvas realisieren.

 

[Rain]

Zunächste mal Sorry! Das wir dem Threadersteller alles nicht mehr groß helfen und ist nur eine theoretische Überlegung!

Gimp'sche Vorführkünste - siehe Anhang

Voraussetzung ist natürlich kein endlos langer Text, sondern Einer, der ggf. auch bei normaler Schriftgröße "passen würde".

Text = "Hallo Welt".
Dünner schwarzer Rahmen = Bild Abgrenzung
Dicker schwarzer Rahmen = Bildinhalt Abgrenzung (quasi: nicht transparente Pixel)
Zwischen dünn und dick = Transparente Pixel (100%)

Algorithmus:

Suche von links oben in Y-Richtung abwärts die erste Zeile, wo ein nicht-transparenter Pixel zu finden ist. Das ist Zeile 0 (Y-Wert) und der Start für den ersten Buchstaben.
Suche von links in X-Richtung den letzten Pixel, der nicht transparent ist. Wiederhole das für jede nachfolgende Zeile, bis Zeile 0+Buchstaben-Höhe erreicht ist. Der X - Wert, der am weitesten rechts liegt ist die X-Koordinate.
Zeile 1 beginnt bei Zeile0+Buchstaben-Höhe. Selber Ablauf - bis letzter Buchstabe.

Müsste funktionieren, zumindest nur für die eine Seite. Ein Richtungswechsel (wenn man also von rechts nach links weiter laufen lassen würde), würde den Algorithmus natürlich aufblähen.

Du meinst PHP kann mir nicht die Farbwerte eines Pixels an einer bestimmten Stelle des Bildes widergeben?! Würde mich irgendwie wundern, aber kann schon sein.

 

[Daaron]

Wie schon gesagt, dein Algorithmus scheitert an realistischen Texten. Nimm nur deinen eigenen Text: wie willst du den floaten lassen?
In PHP könnte man sicher selbst mit ewig viel Mühe entsprechende Funktionen schreiben, um die Bilder auszuwerten, aber ist es das wert? Und wie willst, falls du ein CMS verwendest, diese Funktion dynamisch anwenden? Eine Lösung in JS wäre weitaus praktischer.

Evtl. ist über SVG was machbar, vielleicht kann man da Textgrenzen dynamisch an einem Pfad ausrichten. Das wäre dann sogar leidlich kompatibel zum IE9.

 

[Rain]

Das Verhältnis von Aufwand und Nutzen sei mal dahingestellt für diese Spielerei

Wie man das in einem CMS unterbringt, kann ich dir nicht sagen, da ich mit sowas noch nicht in Berührung gekommen bin.

Selbstverständlich würde ich die Umsetzung in Javascript/jQuery erfolgen lassen und PHP nur zur Beschaffung der in meinem Algorithmus geforderten Koordinaten verwenden.

Der Link sieht zB schon vielversprechend aus:

http://stackoverflow.com/questions/5702953/imagecolorat-and-transparency

Wieso floaten? Ich hab doch geschrieben, dass ich die Buchstaben absolut positionieren würde (in seperaten div-Containern. Zu den ermittelten X-/Y-Koordinaten addiere ich halt noch die X-/Y-Koordinaten der linken oberen Ecke des Bildes im Document und habe dann die absoluten Koordinaten). Dass das quellcode-optisch alles nicht schön aussehen wird, ist klar. Mir gehts nur um die Funktionalität, nicht um den Quellcode-Schönheitspreis.

 

[Daaron]

Na ja, du willst den Textfluss manipulieren, da ist das Wort "float" schon korrekt. *G*
Deine Idee ist ja nicht grundsätzlich falsch, sie ist halt nur etwas weltfremd. Eine praktische Einsatzmöglichkeit will sich mir einfach nicht erschließen. Eine Lösung in reinem JS hingegen würde praktisch nutzbar sein, weil JS dann in Echtzeit die Zeilenumbrüche errechnen kann.

 

[Rain]

Ja, da haste nicht ganz unrecht mit "weltfremd", aber irgendwie sind mir in den letzten Jahren n Haufen solcher "Wünsche" begegnet, da ist so n Code-Gefrickel aus meiner Sicht schon normal, versaut einen wohl nur den Stil. Aber glücklicherweise musste meinen Code keiner bis auf mich verstehen/lesen, sichert einem irgendwie auch den Arbeitsplatz gewissermaßen ^^

Wie gesagt, die Umsetzung würde ich in eine Javascript-Funktion packen mit img-src und Text als Parameter. Das beschaffen der Koordinaten eventuell als asynchroner PHP-Request oder wie auch immer man noch an die Koordinaten kommen kann.

Ich finds ja gut, dass man rein optisch die Ecken eines Div-Containers schon mal rund machen kann, vielleicht gibts ja irgendwann mal richtige runde Element im Web. Ich hätts jedenfalls schon öfter verwenden wollen, und der Umweg über PNGs und map-area is einfach nur n Gefrickel ><

 

[Daaron]

Wie gesagt, man müsste sich sowohl SVG als auch Canvas mal genauer angucken. Beide Technologien hätten meiner Meinung nach das Potential, hier eine Lösung zu bieten die ohne Gefrickel auskommt.