Hallo Leute!
Es geht wieder einmal um diese und diese Seite. Wobei die 2. Seite eine Kopie der 1. Seite ist und das Template von JP Qbar auf Helix Ultimate zu Testzwecken getauscht wurde.
Es stören vor allem 2 Probleme;
1. In den Beiträgen in der Mitte ist unmittelbar nach dem Piktogramm ein Zeilenumbruch
Das Original sieht so aus
und die Kopie so
2. Die Beiträge werden aus für mich unerklärlichen Gründen eingezogen.
Gibt es irgendwo Einstellungen die dieses Verhalten verursachen?
Wolfgang
Gibt es irgendwo Einstellungen die dieses Verhalten verursachen?
Hat einfach was mit Schriftgrößen, Zeilenhöhen, Margins usw. der beiden Blöcke (Bild und Text zu tun). Bei deinem Original hast halt "Glück", dass du eine Bildschirmgröße verwendest, wo der Text rechts gerade noch eben so am linken Block festhakelt.
Hier z.B. Smartphone-Ansicht der Originalansicht:
Deshalb bevorzuge ich (wenn ich darf) Bilder rechts (EDIT: oder drüber/drunter) statt links, um den Text-Lesefluss nicht zu stören..
EDIT: Immer mal wieder im Firefox Extras > Web-Entwickler > Bildschirmgrößen testen verwenden, um Überraschungen und sinnloses Detailgefrickel zu vermeiden.
Ich verstehe überhaupt nicht, was das mit dem Zeilenumbruch unmittelbar nach dem Piktogramm des Fussballers zu tun haben soll - aber vielleicht komme ich noch dahinter.
Überhaupt verstehe ich nicht warum die Anordnung der Beiträge in der Mitte so
ist und sich in der Kopie
so
darstellt.
Das liegt am display: block für den IMG in der template.css Zeile 55.
Alles anzeigenÜberhaupt verstehe ich nicht warum die Anordnung der Beiträge in der Mitte so
....
ist und sich in der Kopie
so
...
darstellt.
Weil das zwei verschiedene Templates sind 
.
Das liegt am display: block für den IMG in der template.css Zeile 55.
OK - DAS Problem hab ich beseitigt - Danke
Weil das zwei verschiedene Templates sind
Ist mir schon klar - unklar ist mir aber woher diese willkürlichen Einzüge kommen.
Ah OK, das mit dem Piktogram hab ich überlesen. Ist meins natürlich hinfällig
Ist mir schon klar - unklar ist mir aber woher diese willkürlichen Einzüge kommen.
Die verursachst du selber durch deine Inline-Stile, die du individuell in jedem dieser Blöcke setzt.
Siehe mein Bild: Du hast ein Bild mit reichlich Inline-Stilen bestückt. Darunter z.B. ein margin-bottom (gelber Rand im Bild) Zusätzlich floatet das Bild links. Heißt für folgende Elemente, sie "hakeln am gelben Rand fest".
Dein altes Template hat sich darum gekümmert, dass die Blöcke genügend Abstand haben und das float auflösen.
Beim neuen wundere ich mich gerade, dass das zwar einige CSS-Klassen im HTML gestreut sind, aber im CSS-Datei und Inspektor gar nichts davon zu finden ist, was formatieren würde. Bist sicher, dass alle nötigen CSS-Dateien geladen werden? Schaut für mich jedenfalls komisch aus.
Der margin-bottom wurde von dir im Editor für das Bild eingesetzt. Das nennt sich dann "Inline-Stil".
<img style="margin-right: 20px; margin-bottom: 20px; vertical-align: top; float: left;" src="/images/union/Radsport/2019_Beiträge/Flachau_01.jpg" alt="News Rad" width="150" height="101">Das Template lädt Bootstrap-4-CSS, aber im HTML sehe ich fast nichts, was das dann auch nutzt.
Diese Einzüge kommen meiner Meinung nach davon, dass der Weiterleselink innerhalb eines DIVs gesetzt wurde. Das hat zur Folge, dass der DIV bei der Blogansicht nicht sauber geschlossen wird.
Allerdings irritiert mich der generierte HTML-Code der Seite ein bisschen. Der sieht überhaupt nicht nach Helixultimate aus. Verwendest du etwa eigene Overrides?