Problematische Bildplatzierungen in COD
Hallo zusammen,
aktuell setze ich eine kleine Website basierend auf dem Template "Contao Official Demo" um (Link entfernt).
Dabei bin ich auf Probleme mit der Platzierung von Bildern gestoßen. Obwohl diese als "oben rechts im Fließtext" eingesetzt sind, schieben sie sich zu weit nach oben, teilweise auch über die Share-Buttons. Mal abgesehen von einem zu großen linken Padding oder Margin bei kleineren Viewports.
Mir ist aufgefallen, dass sie im Quelltext vor der Überschrift eingebunden werden. War das schon immer so oder hat sich im Template was geändert in Contao 3? Könnte evtl. die Überschrift nicht richtig gestaltet sein?
Über Anregungen würde ich mich freuen!
Danke&Gruß Alex
Liste der Anhänge anzeigen (Anzahl: 1)
Herzlichen Dank für Eure Antworten!
Zitat:
Das liegt aber an dem Styling von den Share Buttons, nicht am Bild. Diese sind viel zu weit nach unten versetzt.
Stimmt, top:78px; - hatte ich glatt übersehen. :o
Zitat:
Das kann ich nicht nachvollziehen. Beschreibe genauer, wo man das sehen kann.
Wenn man eine News in der Detailansicht aufruft und den Viewport z.B. auf 767px verkleinert. Das Padding/Margin scheint sich bei der Überschrift links und bei der Bildunterschrift rechts auszuwirken - angenommen, das Bild wäre der Maßstab.
Zitat:
Wenn ich mir die Demo und meine eigenen Projekte anschaue dann werden die Bilder noch immer nach der Überschrift gerendert. Wie hast Du das Bild eingebunden? In der Demo sind die Bilder definitiv über die Checkbox add image (Bild hinzufügen) eingebunden und nicht über den Tiny (Editor).
Das ist seltsam. Auf der Startseite stimmt das für die normalen Artikel, aber in der Newsliste kommt die h2 nach dem Bild. Und auf der Seite des Kapellchens stimmt es wieder nicht, die h2 kommt da nach dem Bild. Die sind aber identisch eingebunden wie hier:
Anhang 20097
Weil das mach ich immer so :D
Zitat:
Sind angepasste Templates im Einsatz?
Nein, an dieser Stelle nicht. Es gibt nur eins für die Kacheln auf der Vorstandsseite und das mitgelieferte ce_player_responsive.html.
Gruß Alex
Liste der Anhänge anzeigen (Anzahl: 1)
Zitat:
Zitat von
Andreas
Nein, dafür sind ja die "Bildgrößen" da.
Sorry, da hab ich Dich falsch verstanden. Ich dachte, Du wolltest das rein über CSS lösen.
Das Problem ist, dass dem img ja noch ein padding und ein border zugewiesen wird, insgesamt 6px. Daher war meine ursprüngliche Idee, dem Bild die Größe Viewport-6px zu geben. Das kann aber ja nicht funktionieren, solange der Viewport noch breiter ist als #wrapper bzw. #main .inside.
Es hilft aber leider auch nicht, .image_container eine max-with von 100% zu geben, daher meine Schwierigkeiten:
Anhang 20113