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

  • Du hast zwei Probleme "eingebaut" die ein Umfließen verhindern.


    1. Die Absätze haben eine Breite von 52%.


    2. Die Absätze haben ein float: right; .


    Das Herausragen des Bildes kann ich nicht nachvollziehen.

  • 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

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

    Hast Du das Problem inzwischen gelöst? Ich kann nämlich kein Herausragen mehr entdecken wenn ich das Browserfenster schmaler mache, Auch nicht in der Handy-Simulation im HTML-Inspektor.


    Edit: Verstehe jetzt, Du hast das Problem gelöst, indem Du die Breite kleiner als 100% gesetzt.

    Anscheinend bist Du nicht der einzige, der dieses Problem hat:

    https://stackoverflow.com/ques…in-on-flex-items/32765152

    Ich teilte bisher die Erwartung des TO dort, der schreibt:

    Zitat

    I was under the impression that a margin can be added to flex items/children, and flexbox should automatically take that into account and calculate the correct spacing between the items.

    Aber offensichtlich trifft das nur auf padding und border zu, nicht auf margin.

    Dort werden zwei Lösungen angeboten:

    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.

    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt 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

  • Zitat

    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.

    Ich bin fast sicher, dass es solch eine Lösung gibt, nur wenn ich mir die Seite aus deinem ersten Posting ansehe, tut es doch das alles schon: Browserfenster breit - Text steht rechts vom Bild, Browserfenster schmal - Text steht unter dem Bild. Nur ein kleiner Schönheitsfehler, dass bei einer bestimmten Breite das Bild den Raum horizontal nicht ausfüllt.

  • 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.

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von Elly ()

  • Zitat

    Schieb mal das Browserfenster zu

    Das habe ich getan, aber ich kann das Problem trotzdem nicht nachvollziehen: Bei ca. 680px Breite springt die Darstellung von horizontal auf vertikal um. Einen Zwischenzustand, dass der eine Absatz rechts wäre und ein anderer unter dem Bild, kann ich nicht erkennen. Getestet in Opera und Firefox.

  • Doch, die "Zwischenstufe" gibt es. Die ersten beiden Absätze sind dann rechts vom Bild, der dritte unterhalb links.


    Wenn der Text das Bild umfließen soll (so habe ich es jedenfalls verstanden) muss es ein "float: left;" erhalten. Das hast du.


    Die Absätze dürfen weder eine Breite noch ein "float: right;" noch ein "display: inline-block;" erhalten. Sprich: Weniger ist mehr.

  • 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.

  • Deine Vorstellungen lassen sich so wahrscheinlich nicht umsetzen. Das Umfließen kann mittels CSS nicht von der Textlänge abhängig gemacht werden.


    Entweder umfließt der Text das Bild oder halt nicht. Du kannst das float nur manuell abbrechen.

  • 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.

  • Wenn man durchgehenden Text hätte, wäre es kein Problem, dann funktioniert das Umfließen. Aber Du willst den Text ja strukturieren, so dass an bestimmten Positionen ein kleiner Abstand entsteht.

  • 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.

  • Das ist dann das ganz normale floaten. Bei den Absätzen darfst du halt keinen störenden Firlefanz hinzufügen.


    Den musst du komplett rausnehmen, was du bislang nicht getan hast. Die störenden Angaben hast du teilweise mehrfach eingefügt. Dann reicht einmal rausnehmen nicht.