Text soll Bild umfließen (responsive)

Hallo an alle,

ich habe hier auf dem PC-Screen eine funktionierende Seite.

In der Handyversion (Breakpoint 480px) habe ich das Problem, dass das Bild und der Text beide zwar uaf 100% sind, das Bild aber dennoch über den Rand hinausragt, weil es eine margin hat. Nehme ich die weg, passt es sehr wohl rein. Aber es soll ja nicht am Rand kleben. Und padding bringt wegen dem Rahmen nichts. Ich kann das zwar lösen, indem ich die Breite auf 94.5 % setze, finde das aber nicht sehr elegant. Gibt'S da was Besseres?

Das größere Problem stellt sich bei Breakpoint 700px. Ihr seht es selbst, der Text tut nicht, was ich gerne hätte. Nehme ich das Bild in den ersten Absatz, so steht der zwar schön rechts, aber die nächsen 2 Absätze sind unter dem Bild. Ich habe hier wegen der margin-bottom 3 einzelne Absätze gewählt. Ihr seht es bei der 2. Card, dass der Absatz prinzipiell schon rechts vom Bild wäre, aber sobald der Text länger ist, dann alles unter dem Bild steht.

Ich könnte jetzt das Bild innerhalb vom Absatz setzen und den ganzen Text als 1 Absatz schreiben und mit br arbeiten, aber dann habe ich nicht mehr meine 10px zwischen den "Absätzen". Dem br eine Klasse mit einer Höhe von 10px geben... Ich weiß nicht, kommt mir alles ein wenig umständlich vor. Gibt's da nicht was Elegantes?

LG

Elly

Im Breakpoint von 700px haben die Absätze nicht mehr eine Breite von 52%, sondern 100% (habs auch schon mit auto versucht). Das float right habe ich auch rausgenommen.

Das mit dem Bild siehst du erst, wenn du das Browserfenster schmäler machst. Auf normaler Größe ist alles ok.

Zitat von Sempervivum

1. Padding statt margin und verschachtelte Container verwenden oder
2. die Breite mit calc berechnen, dann kann man das margin genau einkalkulieren. Einfach den Prozentwert verkleinern passt nicht präzise, man erkennt, dass auf deiner Seite mit 94.5% die Abstände links und rechts nicht ganz gleich sind.

Ich hatte tatsächlich die Version mit 94.5 raufgeladen, stimmt. Sorry. Wollte ich eig nicht. Aber habe am Handy auch grad bemerkt, dass das nicht exakt passt.

Padding würde funktionieren, dann hab ich natürlich das Problem mit der border ums Bild. Also ein Problem der Flexbox? Die Flexbox ist ja mittlerweile sehr beliebt geworden. Wenn bei mir was fuchst, dann ist es aber meistens grade wegen flex. Aber gut, sie hat auch Vorteile.

Danke, mit calc geht's tatsächlich schön.

Also, nochmal zu dem Thema. Da bin ich leider noch nicht weitergekommen.

Entweder ich mach das, wie oben beschrieben, umständlich mit einem p-Element und drinnen das Bild und die Absatz-Abstände definiert durch eine br-Klasse mit bestimmter Höhe.

ODER

Es gibt vl tatsächlich eine Lösung für mehrere p-Elemente wie ich es jetzt hier hab mit Bild vor dem ersten p-Element, sodass der Text - bei bestimmter Bildschirmbreite - dann doch unter dem Bild weiterfließt. Vielleicht denke ich zu eingeschränkt, aber mir scheint, das kann doch so fast nicht gehen?

LG

Elly

Dann hast du dir zufällig die richtigen Bildschirmbreiten angesehen. Dazwischen gibt's eine, bei der das nicht richtig läuft. Schieb mal das Browserfenster zu anstatt im Inspektor die Screens auszuwählen. Ich hab da beim Absatz eine Breite angegeben. Aber anders schaff ich es gar nicht, dass er überhaupt erstmal rechts neben dem Bild erscheint. *grübel* Aber durch die fixe Breite rutscht dann der restliche Text gar nicht unters Bild.

Der Schönheitsfehler mit dem Bild kommt nachher auch noch dran. Der dürfte mit einer media-Abfrage das kleinste Problem werden.

Eben, es ist keiner unter dem Bild. Aber genau das hätte ich gern.

Nochmal: eine längere Beschreibung soll unterm Bild weiterfließen. Ist die Beschreibung nur kurz, soll sie rechts vom Bild stehen. Also rechts beginnen und dann unten weiterfließen. Durch die fixe Breite der p-Elemente innerhalb von .card tut es das aber nicht. .card ist inline-block, mit flex haut es mir die ganze Card zusammen. Die Breite des p braucht es aber, damit es überhaupt erstmal rechts vom Bild beginnt. Das ist allerdings auch ein bissl komisch/doof, da es das zB bei Tutorial-Seiten nicht braucht.

Hab da grad eine Seite gefunden, die - wie ich - img und p getrennt voneinander anordnet (nicht ineinander) und wo es trotzdem funktioniert. Nehme ich die Breite bei p raus, steht der ganze Text unter dem Bild. http://www.ohne-css.gehts-gar.net/0019.php

Was Mr. Murphy da grad schreibt... genau diese Sachen habe ich drinnen. Ich bilde mir ein das schon erfolglos ausprobiert zu haben oder mit einem Grund hinzugefügt zu haben. Ich spiel das nochmal durch.

@Murphy: Ich hab's nochmal ausgetauscht, aber nein, das hilft leider nicht. Erstens bringt es in der bestimmten Fensterbreite nicht das erwünschte Ergebnis und zweitens ist dann in der kompletten Fensterbreite der gesamte Text unterm Bild.

Sempervivum: Nicht exakt die Anzahl der Absätze, sondern die Textlänge ist maßgebend. Ansonsten könnte man ja noch mit nth child arbeiten.

So einfach scheint das ja nicht zu sein. Dass das so kompliziert ist, liegt aber wohl an der Card an sich. Muss mal grad probieren, ob es hilft, zuerst noch ein DIV in die Card zu setzen und dann das Bild und den Text rein.

Der Text soll das Bild ja umfließen. Wenn er zu kurz ist, bleibt er halt rechts, ohne dass er unten weitergeht. So sollte das ja normalerweise sein.

Sagen wir mal ich hab ein DIV, darin ein IMG und ein P. Das Bild ist links, der Text ist rechts. Wenn der Text länger als das Bild ist, fließt er unten weiter. Sollte ja normalerweise nicht so schwer sein. Siehe etliche Tutorials dazu, die hundsprimitiv sind. Bei meinem Verbau klappt das aber nicht und ich steig nicht dahinter.

Deswegen war dann die Überlegung, diesen Abstand anders zu konstruieren, zB mit einer bestimmten Höhe für br.

Wobei ich das grad mit EINEM Absatz auch nicht hinkriege, solang das Bild außerhalb des Absatzes liegt.