[Erledigt] Bilder frei positionieren und von Text umfließen lassen.

Hi und Hallo.

Ich habe folgendes Problem. Ich habe einen Textblock und darüber sind die <img> Tags einiger Bilder gesetzt, ich möchte nun die Bilder frei in dem Textblock positionieren (logisch wäre position:relative ...) und der Textblock soll die Bilder komplett (mit durch margin definierten Rahmen) umfließen. Im Prinzip einfach, dachte ich. Das Bild wird zwar frei positioniert jedoch nicht vom Text umfloßen. Der Textblock "weiß" ja auch nichts von dem Bild. Ich habe es mit dem inline Attribut von display probiert hat jedoch auch nicht geklappt.
Wie kann ich Bilder frei positionieren und dem Text "mitteilen" das da und da ein Bild ist was durch ihn umfloßen werden soll. Irgendeine Lösung muss es doch dafür geben. Ich kann auch nicht in den Textblock eingreifen um die <img> Tags dort einfügen, da es sich um einen dynamische erstellten Block handelt. Ich möchte es aus performancegünden nicht mit einem Script lösen.

Wäre cool wenn jemand ne Lösung hätte.


Gruß René

[Forumsgast]

Schau Dir mal "float" und "clear" an.

Mit Float hab ich das schon probiert aber da hab ich das Problem das ich das Bild am linken Rand kleben habe, um es dann weiter nach rechts zu rücken bräuchte ich einen Rahmen (margin) und im Rahmen kann der Text das Bild ja auch nicht umfließen. ICh will das Bild komplett frei als inline Element im Text positionieren. Tja und clear ist ja nur eine Unterbrechung des Textumflusses, so weit ich weiß. Und das zweite Problem mit Clear ist ja das ich es an unterschiedlichen Stellen im Text unterbringen müsste und das geht ja nicht da es sich um einen dynamisch erstellten Textblock handelt.
Ich suche ne lösung um das Bild direkt über Formatangaben im Text zu positionieren ohne in den Textblock einzugreifen.

Gruß René.

und im Rahmen kann der Text das Bild ja auch nicht umfließen.

Naja im Rahmen sicherlich nicht, aber um den Rahmen herum.
Abgesehn davon kannst du dem Bild auch Style zuweisen.

PS: Eine Website ist leider keine DTP-Arbeitsfläche
Vieleicht wird das ja noch ...

Das ich auf einer Website keine DTP Funktionalitäten umsetzen kann ist mir schon klar, aber ist es nicht die Aufgabe eines Entwicklers die gegebenen Möglichkeiten in best möglicher Kombination zusammenzufügen. Und man sieht ja immer wieder das gerade im Bereich der CSS's immer wieder neue Probleme mit schon längst dagewesenen Mitteln lösen kann.
Tja das es nicht einfach wird ist mir schon klar, aus diesem Grund habe ich mich ja an dieses Forum gewandt. Es würde ja für den Anfang reichen wenn ich das Bild in einer Dimension frei positionieren kann. Das habe ich bisher ja auch schon fast hinbekommen, nur das ich Probleme mit dem Rahmen habe. Es muss doch irgendwie möglich sein das ich ein Bild über den Text lappen lassen kann und dann quasie einen Freibreich schaffen kann in dem das Bild unterkommt. Wenn ich den Textblock ausseinander nehme dann kann ich das ja realisieren aber die Frage ist ja wie kann man das machen ohne in den Text eingreifen zu müssen.
Mir ist schon bewusst das CSS dafür quasie eine Dynamik-Option unterstützen muss, was es ja mit gewissen einschränkungen über die Pseudoklassen auch kann. Vieleicht kann man ja diese Klassen auch auf Elemente erweitern.
Mir würde ja auch ein leichter anstoß in die richtige Richtung genügen, aber ich habe noch keine Scriptungebundene Lösung gefunden. Was aber meines Erachtens nach auch möglich sein müsste.

Gruß René.

Naja, leider ist CSS noch lange nicht soweit, dass es freie Positionen mit Textumfluss bietet.

http://www.cix88.de/cix_css/css__demo/demo_layout_1/

Links- oder Rechts-Positionen sind schnell gemacht, aber man kommt schnell an die Grenzen.
Vieleicht gibt es noch andere Möglichkeiten, die werden aber sicher etwas komplexer ausfallen.
Oder man müsste eine Art Zeitungslayout machen, aber selbst dort kommt man nicht sehr weit.

Ja das hab ich schon mitbekommen, ich wollte wie schon gesagt versuchen ohne ein script auskommen, aber dann werd ich das wohl per PHP realisieren müssen. Trotzdem vielen Danl für die Infos, wenn ich vieleicht doch noch eine CSS Basierte Lösung finde dann werd ich sie hier posten.
Wie sieht es eigentlich bei CSS 3 aus, gitb es da vieleicht schon einen Ansatz für solche Probleme?

Gruß René.

[Forumsgast]

http://www.alistapart.com/articles/crosscolumn/
http://www.alistapart.com/articles/crosscolumn2/

mehr proof of concept als alles andere, aber vielleicht hilft es ... auch wenn es mehrspaltigkeit voraussetzt.

... wenn nicht wieder das Problem mit dem IE wäre ....
Im FF sieht es ganz gut.

[Forumsgast]

mag sein,

doch wird auf ala eigentlich immer auch eine workaround für die möhren angegeben ...

Cooking for picky eaters (IE and other bugs)

Vielen Dank für diesen Tipp. Der hat mich um einiges Weitergebracht nun brauch ich nur noch ein Script was die Position über Koordinaten definiert, aber das ist kein Problem.

Nochmals vielen Dank dafür.


Gruß René.