Gunther: Bild an fixer Stelle soll von Text umflossen werden

Beitrag lesen

Hallo!

Um es ganz konkret zu machen, habe ich ein Foto als Beispiel hochgeladen.
Hier der Link zu dem Foto: http://s1.directupload.net/images/140405/ikfj6uif.jpg

Zu sehen ist eine "Profilseite". Diese ist immer statisch (d.h. kein Scrollen möglich).

Das ist i.d.R. keine gute Idee, weil es schnell dazu führen kann, dass Inhalte nicht sichtbar und nicht erreichbar sind für User.

Das Bild unten ("Platzhalter") soll bei jedem Profil immer an der gleichen Stelle angezeigt werden.

Was wir die ganze Zeit schon von dir wissen wollten ist, was genau mit der "gleichen Stelle" gemeint ist?

Also gleiche Stelle relativ zum Viewport.
Du gehst aber davon aus, dass der Viewport des Users mindestens so groß ist, dass dein Profil vollständig dort hinein passt. Was wenn das nicht der Fall ist?

Der Text daneben bzw. darüber soll das Bild automatisch umfließen.
Abhängig davon, wie viel Text unter beiden Überschriften steht, beginnt der Text bei Überschrift 2 mal weiter oben, mal weiter unten. Das Bild unten soll aber immer an der gleichen Position dargestellt werden.

Das geht zumindest nicht mit einer reinen CSS Lösung!
Denn damit das Bild immer an der gleichen Stelle des Viewports erscheint, müsstest du es per position 'absolute' oder 'fixed' entsprechend positionieren. In beiden Fällen wird das Element dann aber aus dem "normalen Fluss der Elemente" herausgenommen, wodurch es also nicht mehr durch die anderen Elemente beeinflusst wird.

Derzeit ist es mit CSS Regions gelöst. Da sich das aber noch im Entwicklungsstadium befindet und nur von zwei Browsern unterstützt wird, ist das keine tragbare Lösung.

Hat jemand einen Vorschlag, der für alle Browser kompatibel ist?

Abgesehen davon, dass ich die Grundidee schon als "problematisch" erachte, dürfte imho hier nur eine Javascript Lösung helfen.

Diese muss die tatsächlichen Abmessungen der jeweiligen Elemente/ Blöcke berücksichtigen und ein Dummy-Element an entsprechender Stelle in das (text)Element einfügen, sodass der Text quasi das fest positionierte Bild umfließt.

Gruß Gunther