search

springers54 / reiki

0 stars 0 forks source link

TOC in den Detailseiten Desktop und Mobil #219

Closed springers54 closed 5 years ago

springers54 commented 5 years ago

Ok, ich lasse den Abstand beim Bild.

clear-fix ist die gängige Bezeichnung für diese Phänomen. Es gibt wohl leider keine äquivalente deutsche Bezeichnung. Bevor wir hier weiter Diskutieren, bitte mal durchlesen: https://blog.kulturbanause.de/2013/03/clearfix-fuer-gefloatete-css-layouts/

Von mir aus vergebe ich für diese CSS Geschichte eine andere Klasse, sagt nur welche.

So wie ich sehe, ist es euch noch nicht ganz klar, wie float funktioniert und wie die Elemente, die direkt nach einem gefloateten Element kommen, wieder in den Dokumentenfluss "rein genommen werden" - nämlich durch die Anwendung des clear-fix. Das Thema ist auch nicht einfach.

Denn euer Vorschlag, die Klasse vorn zu schaffen, die einen Abstand nach oben erzeugt, funktioniert so nicht.

Ich habe aber auch tatsächlich selber was falsches behauptet (mich etwas vertan) - um den Abstand bei der Überschrift nach oben zu erzeugen, brauchen wir in dem Container, welches das gefloatete Bild inne hat, die CSS Eigenschaft overflow:hidden. Das ist die einzige Möglichkeit, den Abstand zu schaffen. Diese Eigenschaft hat auch Nebenwirkungen: alles, was aus dem Container per CSS "rausgeschoben" wäre, wäre abgeschnitten. Betrifft uns aber bei unserem Layout nicht, können wir also anwenden.

Euch ist aber bewusst, dass dabei ein Loch entsteht? image

Das liegt halt in der Natur des "floatings" - Der erste Textblock fließt um das Bild, danach wird dieses Umfließen wieder deaktiviert. Der nächste Elemente (Überschrift) beginnt links. Das Bild ist dabei auf breiten Bildschirmen höher als der Textblock -> Folge: Loch.

Diese Problematik ist breit bekannt und es gibt nur eine Lösung - inhaltliche. Man müsste relativ lange Texte haben, die bei jeder Auflösung das Bild umfließen. Oder das Bild kleiner machen. Oder die Überschriften ähnlich wie Textblock um das Bild umfließen lassen.

Ich habe nun mal die Klasse für overflow:hidden geschaffen, sie heißt kein-ueberlauf und bereits angewandt. Schaut mal, ob ihr das ganze versteht und so verwendet könnt/wollt.

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

joergsteinhauer commented 5 years ago

TOC wurde entfernt, Ticket erledigt. Schließen?