Hallo Shopware Gemeinde, habe ein header_teaser erstellt, diesen in der CSS “absolut” gesetzt. Trotzdem wird dieser Teaser unter diversen Auflösungen anders angezeigt, mal zu weit rechts oder links. Kann mir jemand einen Tipp geben? Danke. Gruß
Kann mir denn niemand einen Tipp geben?
Positionierungswerte beziehen sich auf das nächsthöhere Element, dessen Positionierung NICHT static ist. In deinem Fall würde ich mal schauen, ob eines der Eltern-Elemente den Verschiebungs-effekt verusacht. Gruß, Bbene
1 „Gefällt mir“
Die CSS sieht so aus: /** Header teaser styling */ .header_teaser { position: absolute; left: 400px; top: 50px; } .header_teaser .column { float: left; width: 130px; font-size: 11px; color: #999; padding: 0 15px; } .header_teaser .last_column { border-right: 0 none } Die index.tpl {block name=‘frontend_index_actions’}
{s name=“IndexTeaserShippingFree”} Kostenloser Versand
ab 20{/s}
{s name=“IndexTeaserRevocation”} 14 Tage
Rückgaberecht{/s}
Kann es sein, dass du einen Denkfehler hast? Wenn der Header left: 400px; hat, dann sitzt der vom linken Fensterrand ja immer 400px weg. D.h. dass du Verschiebungen hast, je nach Auflösung. Ich kenne das mit negativem margin. Du hast z.B. ein Element mit der breite von 1000px und willst dies immer zentriert in der Mitte haben. postion: absolute; left: 50%; margin-left: -500px;
1 „Gefällt mir“
dein CSS sagt, dass dein header IMMER 400px vom linken rand entfernt ist…wenn dann der Rest deiner Seite zentriert sitzt, kommt es natürlich zu differenzen. falls du eine einfache zentrierung damit erreichen willst, dann müsstest du es entweder machen wie von ottscho beschrieben, oder element{ width:500px; margin: auto ; margin-top:50px; }
Hallo, war natürlich ein Denkfehler meinerseits. Vielen Dank. Gruß