search

springers54 / reiki

0 stars 0 forks source link

Umfließen von Bildern und anschließende Überschriften #220

Closed springers54 closed 5 years ago

springers54 commented 5 years ago

Super, jetzt verstehe, was das eigentliche Problem ist:

Ich habe mal euer CSS deaktiviert und nun sieht man das Problem - dieser Abstand unterhalb des Bildes. Die orange Fläche ist ja dabei der "margin" des Bildes.

image

Damit ihr auch nachvollziehen könnt, warum dieser Abstand teilweise notwendig ist:

image

Der sorgt eben für den Abstand zwischen Bild und Überschrift.

Lösung: der Abstand muss weg, damit der normale Fließtext etwa dichter am Bild fließt. Dafür braucht die Überschrift extra einen Abstand nach oben. Aber eben nur diese eine Überschrift und zwar dann, wenn sie direkt nach dem Absatz kommt, welches das gefloatet Bild hat. SO: image

Leider lässt sich sowas nicht automatisieren (Nur mit zusätzlichen JS, aber das ist nicht wirklich gut). Die Überschrift braucht also eine extra Klasse.

Wenn ihr damit einverstanden seid, passe ich es an und füge die Klasse erstmal nur auf https://zen-reiki.de/lehrer/sylvia-springer/ ein. Ihr könnt es dann gern auf allen anderen notwendigen Seiten einsetzen.

Aber Achtung! Dadurch, dass dann der untere Abstand beim Bild global entfernt wird, werden auch alle anderen Seiten beeinflusst, d.h. die Abstände unter dem gefloateten Bild verschwinden und der Text/Überschriften könnten überall zu sehr "dran kleben".

Originally posted by @joergsteinhauer in https://github.com/springers54/reiki/issues/198#issuecomment-473699140

springers54 commented 5 years ago

Unser Vorschlag:

Dann klebt es ein bisschen, aber nicht ganz so. Diese Extraklasse ist ja die Klasse vorn, die wird nur nach gefloateten Absätzen verwendet.

Ansonsten werden wir uns bemühen, die Texte so zu schreiben, dass wir das Problem umgehen, sonst gibt es dad Problem

joergsteinhauer commented 5 years ago

Den Abstand nach unten beim bild habe ich gelassen. Allerdings wieder dieser wieder von eurem Custom CSS deaktiviert: image

Ich fasse euer CSS nicht an.

joergsteinhauer commented 5 years ago

Der Überschrift nach einem geloateten Absatz einen zusätzlichen Abstand nach oben geben. Dieser könnte als Kompromiss die Hälfte des normalen Abstandes sein.

Erstmal möchte ich korrigieren: nicht der Absatz ist gefloatet, sondern das Bild im Absatz. Ist so ziemlich wichtig, dies zu unterscheiden. Aber ich denke wir wissen alle, was gemeint ist...

Nun, habe ich diese Seite zum Testen genommen und für Anschauungszwecke einen Absatz vor der zweiten Überschrift raus genommen, sodass diese Überschrift nun wieder am Bild "klebt". Dieses Problem muss ja gelöst werden.

image

zu 2: Wie man sieht, hat die Überschrift bereits einen Abstand nach oben (orange Fläche). Klebt aber trotzdem am Bild, weil dieser durch den float aus dem Dokumentenfluss "raus genommen" wurde. Somit fließen ALLE Elemente um dieses Bild, die nach dem Bild und dessen Elternelement (in diesem Fall die rot markierte Fläche bei 1) kommen.

Man kann hier also keinen Abstand einfügen, der dann für den Abstand nach oben zum Bild sorgt.

Der Leerraum muss durch Inhalt gefüllt werden, z.b. durch Text (was ihr auch nun gemacht habt). Funktioniert dann nur, wenn sich die globale Seitenbreite nicht ändert.

joergsteinhauer commented 5 years ago

Ganz hässlich wirds dabei auf Seiten mit TOC, z.b. https://zen-reiki.de/lehrer/test-joerg/

Hier ist der TOC Block in der Desktop Ansicht ebenfalls (rechts) gefloatet. Es entstehen also an beiden Seite Float-Probleme. Wenn man auf der Seite nun viele Überschriften hat, ist der TOC Block sehr hoch und "reißt" große Löcher in die Seite.

Hier ein Extrembeispiel: image

Das gleiche würde passieren, wenn das Bild hochkant ziemlich hoch wäre.

Wir haben hier ganz einfach ein UX Problem. Die Elemente müssten komplett anders angeordnet werden. Die kommen sich in die Quere.

Elemente sind:

Wie ich schon mal gesagt habe, gäbe es (z.z. aus meiner Sicht) folgende Möglichkeiten:

  1. Überschriften um das Bild umfließen lassen (die einfachste Variante) image

  2. TOC woanders platzieren bzw. nicht floaten. So viele Stellen gibt es nicht, aber man könnte was probieren image

  3. TOC komplett entfernen. Braucht man das? Ich aus meiner persönlichen User-Experience nutze sowas nie. Aber ich bin nicht euer Zielgruppe. Nur so, als Idee.

springers54 commented 5 years ago

Im Sinne der Vereinfachung nehmen wir das TOC komplett raus. Ich habe hier bei meinen Seiten ohnehin schon den Weg beschritten, die Seite in Unterseiten zu splitten und das kann jeder Lehrer machen. An einer anderen Stelle hatten wir das nicht verwendet.

joergsteinhauer commented 5 years ago

Wunderbar, das macht einiges einfacher.

Nun bleibt das letzte Problem offen: die "Löcher", die entstehen, wenn der erste Textblock zu kurz ist: https://gyazo.com/9ec587206c7ac0571fff3c1cd2852e52

Da die Überschrift "Kindheit, Schule, Studium" den clear-fix hat, also nicht um das Bild rum fließt, bleibt diese bei Desktop so weit unten.

Lösungen:

  1. ersten Textblock größer machen https://gyazo.com/f5d0b0edd13d203a07eb4f4719421ca9
  2. Überschrift um das Bild umfließen lassen. Dabei müsste das Bild wieder einen Abstand nach unten bekommen https://gyazo.com/85079a8f3940597c1749b27685d77c40
springers54 commented 5 years ago

Der Weißraum stört uns nicht. Wichtig ist, dass die Überschrift nicht am Bild klebt und nicht umfließt. Also müsste dann alles erledigt sein?

joergsteinhauer commented 5 years ago

Na das ist super, dann ist jetzt alles erledigt.

Wichtig ist die kein-ueberlauf Klasse im Absatz, welches das gefloatete Bild enthält:

image

Die danach kommende Überschrift braucht keine clear-fix Klasse.

Kann man heir alles gut nachsehen: https://zen-reiki.de/lehrer/test-joerg/ Diese Testseite kann gern gelöscht werden, sobald ihr die Struktur für euch festgehalten habt.

joergsteinhauer commented 5 years ago

Übrigens, wenn man mehrere Absätze vorne weg hat, braucht nur der letzte Absatz die kein-ueberlauf Klasse: image