nicht angemeldet
Bild an fixer Stelle soll von Text umflossen werden
Gunnar Bittersmann
Matthias ApselHallo,
ich habe das Problem, dass ich die Befehle position: fixed und float=right nicht miteinander kombinieren kann.
Zum Problem:
Man stelle sich mehrere leere DIN A4-Blätter vor (d.h. jeweils eine Seite, auf der nicht gescrollt wird).
An einer bestimmten Position soll unten rechts jeweils ein Foto dargestellt werden. Die Position soll auf jeder dieser DIN A4-Seiten immer fix sein, d.h. das Bild soll auf jeder Seite an der gleichen Stelle angezeigt werden. Soweit kein Problem, denn das ließe siche ja mit style="position: fixed" lösen.
Allerdings kommt nun das Problem:
Oberhlab des Bildes und auch daneben steht Text. Mal ist über dem Bild mehr Text, mal weniger Text. Also mal fängt der Text schon weiter oben an, mal weiter unten und mal erst neben dem Bild.
Der Text soll das Bild (das immer an der gleichen Stelle sitzt) automatisch umfließen.
Genau das bekomme ich nicht hin.
Wenn ich das Bild mit position: fixed an die entsprechende Stelle setze dann funktioniert float nicht mehr und der Text sitzt hinter dem Bild bzw. das Bild liegt eine Ebene über dem Text und verdeckt diesen.
Wenn ich allerdings nur float nutze, dann fängt das Bild immer in Höhe der ersten Zeile Text an, also mal weiter oben und mal weiter unten, abhängig davon wo der Text beginnt. Somit sitzt das Bild mal tiefer und mal höher auf den jeweiligen Seiten.
Jemand einen Lösungsvorschlag, wie ich ein Bild immer an einer bestimmten Stelle auf einer Seite anzeigen lassen kann (also an einer fixen Position), jedoch dieses von nebenstehendem Text umflossen werden kann???
Ich wär super dankbar für Hilfe!!!
-
@@Floater:
nuqneH
Jemand einen Lösungsvorschlag, wie ich ein Bild immer an einer bestimmten Stelle auf einer Seite anzeigen lassen kann (also an einer fixen Position), jedoch dieses von nebenstehendem Text umflossen werden kann???
CSS Regions and CSS Exclusions. Irgendwann auch in Ihrem Browser.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Lieber Gunnar Bittersmann,
CSS Regions and CSS Exclusions. Irgendwann auch in Ihrem Browser.
sicher, dass es mit dem "irgendwann" klappt?
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
@@Felix Riesterer:
nuqneH
CSS Regions and CSS Exclusions. Irgendwann auch in Ihrem Browser.
sicher, dass es mit dem "irgendwann" klappt?
Ich hab das auf dem Webmontag schon (in einem modifizierten Browser) von Jay Meissner (Adobe) präsentiert gesehen.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Lieber Gunnar Bittersmann,
(in einem modifizierten Browser) von Jay Meissner (Adobe) präsentiert gesehen.
dass Adobe ein Interesse an solchen Features hat, ist unbestritten. Inwiefern die Browserhersteller auf diese Adobe-Interessen eingehen werden, bleibt offen. Anscheinend ist außer Webkit noch kein anderer Browser dahingehend modifiziert worden...
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Zunächst einmal Danke Gunnar.
Dein Vorschlag mit CSS Regions habe ich ausprobiert und er funktioniert.
Allerdings nur mit Safari-Browser bzw. Chrome und aktiviertem Webkit.Schön, es einmal so zu sehen, aber leider keine tragbare Lösung.
Ich brauche eine Lösung, die auch jetzt schon mit allen Browsern kompatibel ist.Hat denn niemand eine Idee?
Nochmal: Es soll auf mehreren Seiten immer ein (gleichgroßes) Bild an gleicher Stelle angezeigt werden. Vor bzw. neben dem Bild steht Text, der mal länger und mal kürzer sein kann.
Der Text soll das (fixe) Bild automatisch umfließen.-
Om nah hoo pez nyeetz, Floater!
Der Text soll das (fixe) Bild automatisch umfließen.
Und das tatsächlich fixiert? Meinst du vielleicht absolut positioniert? Oder würde es dir reichen, ein gefloatetes Element einzuschließen?
Matthias
-
Naja, das Bild soll immer an der gleichen Position angezeigt werden. Geht das auch mit position: absolute? Der Text neben dem Bild soll dieses automatisch umfließen...
-
Om nah hoo pez nyeetz, Floater!
Naja, das Bild soll immer an der gleichen Position angezeigt werden.
Das lässt immer noch Raum für Interpretationen. Am besten du zeigst die Beispiele, von denen du im OP sagtest, dass sie unzureichend funktionieren.
Matthias
-
Um es ganz konkret zu machen, habe ich ein Foto als Beispiel hochgeladen.
Zu sehen ist eine "Profilseite". Diese ist immer statisch (d.h. kein Scrollen möglich).
Das Bild unten ("Platzhalter") soll bei jedem Profil immer an der gleichen Stelle angezeigt werden.
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.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?
Hier der Link zu dem Foto: http://s1.directupload.net/images/140405/ikfj6uif.jpg
-
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.jpgZu 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
-
Genau,
ich bräuchte quasi eine Möglichkeit
position: fixedundfloatmiteinander zu kombinieren, ohne dass das Element dann aber aus dem "normalen Fluss der Elemente" herausgenommen wird.Mit CSS funktioniert es wie geschrieben bereits via
CSS Regions, allerdings durch das noch aktuelle Entwicklungsstadium nicht ausreichend kompatibel (für sämtliche Browser).Mit meiner Aussage "das Bild soll stets an der gleichen Stelle angezeigt werden" meine ich, dass das Bild an exakt gleicher Stelle auf der "Profilvorlage" sitzt. Man kann sich ja oben (siehe Link) nochmal mein Beispiel ansehen. Und nun stellt euch vor, vor dieser Profilseite gibt es mehrere. Wenn ich eine andere aufrufe, ändert sich entsprechend der anderen Person das Text und das Foto. Dabei soll das Foto aber an genau gleicher Stelle sitzen wie bei dem Profil zuvor. Es soll quasi nur ausgetauscht werden. Daher meine Anforderung an die "fixe" Bildposition.
Also, dann mal mit JavaScript versuchen, ja?
-
Hi!
ich bräuchte quasi eine Möglichkeit
position: fixedundfloatmiteinander zu kombinieren, ohne dass das Element dann aber aus dem "normalen Fluss der Elemente" herausgenommen wird.Und genau das geht nicht! ;-)
Mit CSS funktioniert es wie geschrieben bereits via
CSS Regions, allerdings durch das noch aktuelle Entwicklungsstadium nicht ausreichend kompatibel (für sämtliche Browser).ALso derzeit (noch) keine Option.
Mit meiner Aussage "das Bild soll stets an der gleichen Stelle angezeigt werden" meine ich, dass das Bild an exakt gleicher Stelle auf der "Profilvorlage" sitzt. Man kann sich ja oben (siehe Link) nochmal mein Beispiel ansehen. Und nun stellt euch vor, vor dieser Profilseite gibt es mehrere. Wenn ich eine andere aufrufe, ändert sich entsprechend der anderen Person das Text und das Foto. Dabei soll das Foto aber an genau gleicher Stelle sitzen wie bei dem Profil zuvor.
Bitte versuche doch mal deine Formulierungen so zu wählen, dass jeder eindeutig verstehen kann, was du meinst. Erst redest du von "Platzhalter" (so auch auf deinem Bild), dann wieder von Foto ...!?
Es soll quasi nur ausgetauscht werden. Daher meine Anforderung an die "fixe" Bildposition.
Da besteht aber kein zwingender Zusammenhang. ;-)
Also, dann mal mit JavaScript versuchen, ja?
Ja, ich wüsste zumindest nicht, wie man es ohne derzeit für alle gängigen Browser umsetzen könnte.
Die Frage, die ich mir bei so etwas stellen würde ist, ob sich der Aufwand im Verhältnis zum "gewünschten Effekt" wirklich lohnt. Aber das kann ja jeder für sich entscheiden.
Gruß Gunther
-
-
-
-
-
-
-
-
-
-
-
