Float floatet auf dem Handy nicht wie ich will

[Harald Effenberg]

Hi!

Ich habe ein Problem mit der Darstellung von

https://www.effenberg.de/termine.htm

auf dem Handy.

Auf dem Laptop sieht alles aus wie es soll, dank

.terminbild {float:right; margin-left:1em; width:320px;}

Auf dem Handy auch, bis auf das unterste Bild, das sich über den vorher
stehenden Text schiebt. Wie kann ich das verhindern?

Was ich möchte:

Laptop (und das funktioniert ja auch):

Termin 1 Terminbild 1

Termin 2

Termin 3

Termin 4 Terminbild 4

Termin 5 Terminbild 5

Termin 6

Handy:

Terminbild 1
Termin 1
Termin 2
Termin 3
Terminbild 4
Termin 4
Terminbild 5
Termin 5
Termin 6

Statt dessen habe ich auf dem Handy unten

TTeerrmmiinnbild45

Und ich finde nicht raus, woran es liegt bzw. wie ich es verhindern kann.

TIA und viele Grüße aus der Quarantäne
Harald
--
Aktuelles (März 2022) Synchron-Demo
als schlecht gelaunter Elfenvater:
https://www.effenberg.de/demos/synchron-demo-pops-the-elf.mp4

[Claus Reibenstein]

Harald Effenberg schrieb am 22.03.2022 um 09:40:

> Ich habe ein Problem mit der Darstellung von
>
> https://www.effenberg.de/termine.htm
>
> auf dem Handy.
>
> Auf dem Laptop sieht alles aus wie es soll, dank
>
> .terminbild {float:right; margin-left:1em; width:320px;}
>
> Auf dem Handy auch, bis auf das unterste Bild, das sich über den vorher
> stehenden Text schiebt. Wie kann ich das verhindern?

Ich habe mir das mal auf meinem Sony Xperia mit Vivaldi angeschaut und
kann dort Dein Problem nachvollziehen, aber nur im Hochformat. Sobald
ich das Smartphone auf quer drehe, ist alles in Ordnung.

Die Bilder nehmen im Hochformat die volle Breite ein. Eventuell ist das
die Ursache für Dein Problem.

Es könnte aber auch an dem Fehler in Zeile 650 liegen, den der Validator
des WWW-Konsortiums <https://validator.w3.org/> ausspuckt.

Gruß
Claus

[Harald Effenberg]

Am 22.03.2022 um 11:41 schrieb Claus Reibenstein:
> Harald Effenberg schrieb am 22.03.2022 um 09:40:
>
>> Ich habe ein Problem mit der Darstellung von
>>
>> https://www.effenberg.de/termine.htm
>>
>> auf dem Handy.

>> Auf dem Handy auch, bis auf das unterste Bild, das sich über den vorher
>> stehenden Text schiebt. Wie kann ich das verhindern?

> Ich habe mir das mal auf meinem Sony Xperia mit Vivaldi angeschaut und
> kann dort Dein Problem nachvollziehen, aber nur im Hochformat. Sobald
> ich das Smartphone auf quer drehe, ist alles in Ordnung.

Ja, immerhin, so ist es ja auch gedacht.

> Die Bilder nehmen im Hochformat die volle Breite ein. Eventuell ist das
> die Ursache für Dein Problem.

Glaube ich nicht. Bei den anderen beiden Bildern funktioniert es ja. Das
Bild von "Ein seltsames Paar" rutscht unter den vorhergehenden Text.
Warum kann das Bild von "Das Blaue vom Himmel" das nicht, sondern
verdeckt den vorhergehenden Text?

> Es könnte aber auch an dem Fehler in Zeile 650 liegen, den der Validator
> des WWW-Konsortiums <https://validator.w3.org/> ausspuckt.

Ups. Danke. Aber leider: Daran lag's auch nicht.

Viele Grüße
Harald
--
Synchron-Demo
als bösester Fisch der 7 Weltmeere:
https://www.effenberg.de/demos/synchron-demo-tentakelfisch.mp4

[Arno Welzel]

Harald Effenberg:

> Hi!
>
> Ich habe ein Problem mit der Darstellung von
>
> https://www.effenberg.de/termine.htm
>
> auf dem Handy.
>
> Auf dem Laptop sieht alles aus wie es soll, dank
>
> .terminbild {float:right; margin-left:1em; width:320px;}
>
> Auf dem Handy auch, bis auf das unterste Bild, das sich über den vorher
> stehenden Text schiebt. Wie kann ich das verhindern?

[...]

> Und ich finde nicht raus, woran es liegt bzw. wie ich es verhindern kann.

Auch in der mobilen Ansicht haben die Bilder:

.terminbild {
float: right;
margin-left: 1em;
width: 320px;
}

D.h. sie floaten nach wie vor wodurch der Text natürlich hineinragt.

Du musst für mobile Ansicht float schon ausschalten. Auch würde ich da
eine relative Breite angeben und keine absolute:

.terminbild {
margin-left: 1em;
width: 100%;
}

Nachdem ich deinem CSS nirgends @media zu finden ist, nehme ich an, dass
Du das Thema "Responsive Design" bisher ignoriert hast.


--
Arno Welzel
https://arnowelzel.de

[Harald Effenberg]

Am 22.03.2022 um 21:35 schrieb Arno Welzel:
> Harald Effenberg:

>> Ich habe ein Problem mit der Darstellung von
>>
>> https://www.effenberg.de/termine.htm
>>
>> auf dem Handy.
>>
>> Auf dem Laptop sieht alles aus wie es soll, dank
>>
>> .terminbild {float:right; margin-left:1em; width:320px;}
>>
>> Auf dem Handy auch, bis auf das unterste Bild, das sich über den vorher
>> stehenden Text schiebt. Wie kann ich das verhindern?
> [...]
>> Und ich finde nicht raus, woran es liegt bzw. wie ich es verhindern kann.

> Du musst für mobile Ansicht float schon ausschalten.

Bis jetzt konnte ich meine Seiten immer so basteln, dass sie auf jedem
Gerät zufriedenstellend funktioniert haben. Es wurmt mich, dass ich
jetzt an diesem einen Bild scheitern soll.
Vielleicht lasse ich es notfalls weg. :-(

> Nachdem ich deinem CSS nirgends @media zu finden ist, nehme ich an, dass
> Du das Thema "Responsive Design" bisher ignoriert hast.

Ack. Klingt nach viel Arbeit. Und, wie gesagt: Bisher ging es auch ohne.
Könnte ein Projekt sein, wenn ich in Rente gehe.
Ich komme einfach nicht dahinter, warum es bei dem Bild darüber
funktioniert aber beim untersten Bild nicht...

Viele Grüße
Harald
--
Noch bis 27.03.2022 in der Komödie im Winterhuder Fährhaus:
Mit Petra Kleinert und Reinhold Kammerer in
https://www.effenberg.de/das-huhn-auf-dem-ruecken.php

[Harald Effenberg]

Am 23.03.2022 um 19:42 schrieb Harald "Ingrid" Effenberg:
> Am 22.03.2022 um 21:35 schrieb Arno Welzel:
>> Harald Effenberg:
>
>>> Ich habe ein Problem mit der Darstellung von
>>>
>>> https://www.effenberg.de/termine.htm
>>>
>>> auf dem Handy.
>>>
>>> Auf dem Laptop sieht alles aus wie es soll, dank
>>>
>>> .terminbild {float:right; margin-left:1em; width:320px;}
>>>
>>> Auf dem Handy auch, bis auf das unterste Bild, das sich über den vorher
>>> stehenden Text schiebt. Wie kann ich das verhindern?
>> [...]
>>> Und ich finde nicht raus, woran es liegt bzw. wie ich es verhindern
>>> kann.
>
>> Du musst für mobile Ansicht float schon ausschalten.

Ich hatte natürlich, bevor ich hier gepostet habe, schon alles mögliche
versucht. Als erstes alle Varianten von
style="clear:right;"
die mir eingefallen sind.

Aber ich habe keine Variante gefunden, die funktioniert. Der Text
floatet dann zwar in der Desktop-Ansicht nicht mehr, wie er soll, aber
in der Mobil-Ansicht schiebt sich das Bild immer noch hinter den Text.
Was verstehe ich da falsch an "float:right" und "clear:right"?

Ich mache es jetzt erstmal mit der hässlichen Notlösung
<div style="margin-top:6em;">

Vermutlich muss ich mich doch bei Gelegenheit mit Responsive Design
beschäftigen...

Viele Grüße
Harald
--
"Dixitque Deus: fiat lux. Et facta est lux. (...)
Bitte, Daddy, warum wollte Gott ein kleines italienisches Auto und die
Seife der Filmstars, und warum bekam er nur die Seife?"
Salman Rushdie

[Arno Welzel]

Harald Effenberg:

> Am 22.03.2022 um 21:35 schrieb Arno Welzel:
>> Harald Effenberg:
>
>>> Ich habe ein Problem mit der Darstellung von
>>>
>>> https://www.effenberg.de/termine.htm

[...]

>> Nachdem ich deinem CSS nirgends @media zu finden ist, nehme ich an, dass
>> Du das Thema "Responsive Design" bisher ignoriert hast.
>
> Ack. Klingt nach viel Arbeit. Und, wie gesagt: Bisher ging es auch ohne.
> Könnte ein Projekt sein, wenn ich in Rente gehe.
> Ich komme einfach nicht dahinter, warum es bei dem Bild darüber
> funktioniert aber beim untersten Bild nicht...

Generell sind floats keine gute Idee für mehrspaltiges Design, was sich
an die verfügbare Breite anpassen soll. Genau deshalb wurden
media-queries eingeführt, damit man das Layout bei Bedarf durch
angepasste Regeln für schmalere oder deutlich breitere Viewports
anpassen kann. Es gibt halt nicht immer das ideale Layout, was in jeder
beliebigen Größe automatisch richtig ist.

[Peter J. Holzer]

On 2022-03-22 08:40, Harald Effenberg <har...@effenberg.de> wrote:
> Ich habe ein Problem mit der Darstellung von
>
> https://www.effenberg.de/termine.htm
>
> auf dem Handy.
>
> Auf dem Laptop sieht alles aus wie es soll, dank
>
> .terminbild {float:right; margin-left:1em; width:320px;}
>
> Auf dem Handy auch, bis auf das unterste Bild, das sich über den vorher
> stehenden Text schiebt. Wie kann ich das verhindern?

[...]

>
> Und ich finde nicht raus, woran es liegt bzw. wie ich es verhindern kann.

Das div davor hat style="height: 240px" gesetzt. Das reicht bei
schmalem Fenster nicht für den Inhalt, als ragt der Inhalt unten raus
und überschneidet sich mit dem folgenden div.

Vermeide solche fixen Größen, vor allem in der Höhe: Die sollte sich
immer an den Inhalt anpassen. Wenn das aus irgendeinem Grund nicht
möglich oder sinnvoll ist, behandle den Overflow, z.B. mit einem
Scrollbar.

hp

PS: font-size: 80%? Bitte nicht. Normaler Text sollte immer die
Default-Größe haben. Größer skalieren ist manchmal sinnvoll, aber
kleiner ist immer nur ärgerlich.