Bedingtes Floating möglich?

  • Hallo,


    grundlegend soll es einen Text geben, der ein Bild umfließt, welches sich auf der rechten Seiten befindet.

    Bei kleineren Displays "schrumpft" die Textbreite leider oft soweit zusammen, dass vom Text manchmal nur noch 1 oder 2 Wörter dargestelllt werden, was unschön ausschaut.


    Mittels DIVs und width, float, min-width und max-width habe ich es dann immer so hingebogen, dass die mobile Darstellung auf den meisten mobilen Geräten akzeptabel war. Dabei wurde das Bild dann nach unten geschubst, wenn der Text zu schmal wurde.

    In schwierigen Fällen setze ich Widgetkit oder ähnliches ein. Das ist aber immer ein wenig zeitaufwendig.


    Gibt es folgende einfache Möglichkeit:

    Ich verwende einen Text <p> und ein Bild <img>, welches ich floate. Nun möchte ich, dass das Bild unterhalb des Textes dargestellt wird, sobald die Textbreite kleiner als z.B. 200 px wird. Gibt es da ein simple Realisierung über css?


    Wahrscheinlich sehe ich den Wald vor lauter Bäumen nicht... :)

  • Bootstrap 4 bastelt sich via SCSS diese nützlichen Utilities-Klassen, die man ja ähnlich adaptieren kann.

    https://github.com/twbs/bootst…bootstrap.css#L7910-L7968


    Das Schöne an dieser Denke ist, dass man mehrere solcher Klassen eintragen kann.

    "float-none float-md-right float-lg-left" ( = "xs Bild drüber, ab md rechts, ab lg links")


    Ich bin, mit Ausnahmen, mittlerweile an dem Punkt, dass ich nur noch irgendwas passieren lasse, wenn so Stamm-Breakpoints erreicht sind.


    Aber welche Screen-Breite dann der Text-Breite 200px entspricht, muss man sich leider selber ertüfteln. Das Problem habe ich immer bei Mehrspaltendarstellung, wo Bilder und Text pro Spalte, mal drüber, daneben oder sonst was sein sollen.


    Es gibt Unmengen weiterer so Utilities-Klassen. Vielleicht sogar zu viele... Wegen Dateigröße.


    Die Textbreite kann man natürlich auch per JS ermitteln und dann eine float-Klasse oder andere unterjubeln. Mag ich nicht so...

  • Nun ja, BS4 ist da natürlich etwas mächtiger. Bin da auch permanent drauf gestoßen beim googeln. Scheint mir momentan etwas zu zeitaufwendig, da mir das in Joomla 3 nicht so einfach zur Verfügung steht.


    Ich habe es nun mal über eine @media-gesteuerte Klasse versucht, die "float" und verschiedene Bildanpassungen setzt oder auch nicht. 1 Breakpunkt reicht da für mein Vorhaben in der Tat aus.


    Aber eine simple Problematik ist geblieben:

    Egal ob die Bilder links oder rechts schwebend angezeigt werden, sobald ich auf "float" verzichte, wird mir das Bild grundsätzlich über dem Text angezeigt. Das ist ja auch die Reihenfolge im Code.


    Rechts gefloatete Bilder sollen auf einem kleinen Display jedoch unterhalb vom Text erscheinen.

    Füge ich im Code erst den Text und dann das Bild ein, funktioniert das mit dem floaten gar nicht mehr.


  • Hallo,

    Rechts gefloatete Bilder sollen auf einem kleinen Display jedoch unterhalb vom Text erscheinen.

    Füge ich im Code erst den Text und dann das Bild ein, funktioniert das mit dem floaten gar nicht mehr.

    Hab erst den Text und dann das Bild nach Deinem Muster reingegeben. Leider, nix float.


    Danach beim Code erst zum Schluss das </p> eingegeben:

    Code
    <div itemprop="articleBody">
    <p>Text.............................................Text
    <img src="/xyz/images/bildordner/bild_von_frueher.jpg" class="float-right" alt="bild von frueher" width="300" height="127" /></p>

    Hat dann funktioniert:




    Mit diverser Kosmetika, paddings oder so, hab ich nicht gespielt.


    Hier noch andere Links:

    https://www.mediaevent.de/tutorial/positionieren.html

    https://www.mediaevent.de/css/position-clear.html

    https://www.mediaevent.de/css/display-flex.html


    Liebe Grüße

    Christine

  • Hallo Christine,


    das habe ich bereits so versucht. Aber sobald nach dem Text das <img> kommt, gibt es bei mir auch kein floating mehr, auch wenn ich </p> an Ende setze.

    Ich muss morgen weiter testen.......


    (mit float stand ich schon immer auf Kriegsfuß) ;)

  • Hallo Andreas,

    das habe ich bereits so versucht. Aber sobald nach dem Text das <img> kommt, gibt es bei mir auch kein floating mehr, auch wenn ich </p> an Ende setze.

    Hmmm, wieso hat es dann bei mir funktioniert? Ein Joomla Wunder wahrscheinlich :S.

    Gelang erst, wie ich vor dem <img> etc. kein <p> setzte. Davor natürlich der Text. Deswegen habe ich den Code vom Quelltext kopiert.

    Zitat

    (mit float stand ich schon immer auf Kriegsfuß) ;)

    och, ich auch, da studiere ich immer, wegen clear: left, right oder both hmm


    Liebe Grüße

    Christine

  • Mir ging es doch nur um die paar Klassen dort unter dem Link. Copy/Paste, anpassen und fertig ;-)

    So lange die Utilities-Klassen "stinknormale sind", passen sie ja überall.

    Habe ich ja letztendlich auch so umgesetzt.


    Ich habe meinen Code für das Bild jetzt etwas erweitert: class="float-right float-right-xs"


    Zitat


    Dennoch bekomme ich ein unterhalb des Textes gesetztes Bild immer noch nicht gefloatet.

    Und wenn ich es oberhalb des Textes setze, kann es zwar ganz normal rechts gefloatet, es rutsch aber natürlich nicht unter den Text, wenn man kein float setzt.


    christine2 : Hast du in der Klasse weitere Formatierungen drin stehen oder irgendwie übergeordnet im Template. Ich habe auf Protostar umgeschaltet. Es gelingt mir dennoch nicht.

  • Hmm., habe, wie gesagt, Deinen Code so übernommen, siehe #5, eben halt mit dem letzten </p>.

    Erweiterte Formatierungen, nö, glaub nicht bzw. nicht bewusst.

    Verwende eigentlich nur das Protostar. Obiges ist auf einer Testseite, da murkse ich halt rum.


    Zu den erweiterten Classen: class="float-right float-right-xs" etc., kann ich nichts sagen. Muss ich erst ausprobieren. Hab auch keine media queries extra reingeschrieben, da das Protostar automatisch umgebrochen hat. Siehe auch oben screenshot.


    Normalerweise mache ich das so: Text schreiben, Cursor, wo Bild, mit JCE einfügen. Dort kann man ja auch floaten.


    Liebe Grüße

    Christine

  • Hab auch keine media queries extra reingeschrieben, da das Protostar automatisch umgebrochen hat. Siehe auch oben screenshot.


    Der Unterschied könnte dann sein, dass das Bild auf deinem ersten Sreenshot gar nicht gefloatet ist, sondern Text und Bild einfach nur hintereinanderhängen, was gleich ausschaut, sofern man nur mit einem Einzeiler testet. Das kann ich reproduzieren.

    Könntest du statt der einzelnen Textzeile mal einen Mehrzeiler verwenden, damit das Floating erkennbar ist.


    Denn: Ich hatte im Code meine eigene Klasse eingesetzt und kein style="float: right;" im <img> stehen, was bei dir dann fehlen würde, wenn du den Code exakt übernommen hast.


    Das mit den media-queries habe ich nun im Griff. Es geht nur noch darum, wie man rechts floatet, wenn erst Text und dann Bild im Code stehen.

  • Hallo Anka,


    huch, Danke für Deine Assistenz 8) Grad erst gelesen, weil ich davor im Probieren war. Erzähl es mal:

    Zitat

    Könntest du statt der einzelnen Textzeile mal einen Mehrzeiler verwenden, damit das Floating erkennbar ist.

    Tja, da fing das Dilemma an :-) Mobil mäßig war es wunderbar. Desktop: Jo, Bild runter gerutscht.

    Also mit Deinem Code.


    Die von Re:Later angegebene Utilities-Klassen kenne ich nicht & habe ich noch nicht probiert. Muss ich erst studieren.


    Dann hab ich halt wie ich es sonst im Protostar öfters gemacht habe. Mit divs. Kein float reingegeben.

    Ist halt "nur" im Protostärchen:



    Genug Text? :-)


    Code
    <div class="row-fluid">
    <div class="span6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</div>
    <div class="span6"><img src="/pfad/images/bildordner/bild_von_frueher.jpg" alt="bild von frueher" width="400" height="101" /></div>
    </div> </div>

    OT: Stattdessen früher auch mal andere Klasse genommen, um diese ev. formatieren/ansprechen zu können.


    Liebe Grüße

    Christine

  • Hab jetzt nicht alle Beiträge gelesen (nur die ersten drei). Falls schon beantwortet, bitte ich um Entschuldigung.

    Generell (einerlei ob Bootstrap 3 oder 4) gibt es mehrere Klassen für die Floats und somit auch Breakpoints. Somit kannst du per CSS-Klasse einfach festlegen, wann drei, wann zwei Bereiche nebeneinander stehen sollen, etc.

    Schau mal hier für Details:

    http://holdirbootstrap.de/css/#grid-options



    Axel

  • Jetzt will ich auch mitspielen. Anscheinend hat JoomlaWunder doch BS2 im Einsatz?

    Ein Link zur Seite wär natürlich zielführend, aber da wir alle im Nebel stochern werfe ich eine Seite in den Ring, bei der es einfach gelöst ist: https://langer-faden.de/.

    Wie Indigo66 geschrieben hat: Mit Media-Queries die 100% fürs Bild erzwingen, dann muss der Text nach unten.

  • Hallo Christiane,


    sehr schöne, schlichte Seite mit Protostar. Hab es ein wenig durchgespielt.


    Die Seite dürfte ein Blog sein. Wie gewohnt, wieder mit screenshots :-)



    Im Beitrag ist natürlich nur der Text (das "Weiterlesen" habe ich weggelassen).


    Desktop Ansicht:



    So, jetzt kommt das "Aber":


    Mobile Version:



    Code
    <div class="pull-right item-image"> <img
    src="/xyz/images/bildordner/schmetterling_02.png" alt="" itemprop="image"/> </div>
    <div itemprop="articleBody">
    Ein Beispiel mit .pull-right.item-image<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. AeneanLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </div>
    </div>

    Es ist so, dass der Kollege schrieb:

    Zitat

    Rechts gefloatete Bilder sollen auf einem kleinen Display jedoch unterhalb vom Text erscheinen.

    Dass das Bild unterhalb vom Text erscheint, gelang mir mit #13 (kein Blog).


    Liebe Grüße

    Christine

  • Die Seite wird gerade lokal aktualisiert und auf das Template J51_Novah umgestellt. Da steht mir normal BS2 zur Verfügung.


    Da die Problematik lediglich 2 Beiträge betrifft, wollte ich da jetzt nicht so viel am Template/System ändern und keine höhere BS-Version einsetzen.

    Eine Lösung wie in #13 ist eine gute Möglichkeit

    .

    Leider schauen die Grid-Systeme, wie auch immer sie heißen mögen, immer alle so tabellenhaft aus (wen wundert's!). vain


    Die Anfangsidee (siehe auch #9), mittels einer einfachen "media-query"-gesteuerten Klasse , das Floaten erst ab einer bestimmten Bildschirmbreite zu verwenden, wäre am einfachsten umzusetzen, insbesondere wenn später jemand Bilder und Texte ergänzen möchte, der sich damit wenig auskennt. Derjenige braucht dann ja nur dem Bild die Klasse(n) zuzufügen und abschließend ein clear setzen.

    Allerdings scheint es dann in der Tat nicht möglich zu sein, ein Bild beim Floating-Verzicht unterhalb des Textes anzeigen zu lassen.

    Das müsste man dann halt einkalkulieren.


    Danke für Eure Ideen, Tipps und Links!


    Ich werde dann noch ein wenig testen und sobald die Seite online ist, kann ich ja einen Link nachreichen.