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

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.

<p><img src="" .... class="float-right" ....>
<p>Text.............................................Text</p>

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ß)

Zitat von Re:Later

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

CSS

@media (max-width: 768px) {
.float-right-xs {
  float: none !important;
  width: 90%;
  height: auto;
  display:block;
  margin: 0 auto;
  }
}

@media (min-width: 769px) {
.float-right {
  float: right !important;
  }
}

Alles anzeigen

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.

Zitat von christine2

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.

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!).

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.