[GELÖST] Graue Fläche unter Footer

Nachdem ich ein wenig mein Template angepasst habe musste ich feststellen das ich eine graue Fläche unter dem Footer habe die sich nicht identifizieren lässt. Ursache unbekannt. Weiß jemand vielleicht wo ich anfangen könnte zu suchen? Link zum Bild

Hi, schau dir am besten mal in der CSS den “body” und “html” an.

Ja habe ich. Höhenangaben gibt es dort keine.

Ich weiss nicht genau ob’s daran liegt, aber hast Du evtl. ein Bild eingefügt? Z.B. Hintergrundbild? Ich hatte das auch mal und da hatte ich links unten ein Bild eingefügt und die Positionierung stimmte nicht. Vielleicht ist es Dein Hintergrund??

du musst das padding in der css wo du den hg eingefügt hast beim body anpassen. das grau was du siehst ist standard als hg farbe. z.b. in der green.css bei body { padding-top: 3px; auf 0px und wenns nicht hilft dann mach ein body { padding: 3px; draus ansonsten hast du ein falsches css für das hg bild angegeben ! lg

so wie es auf dem foto aussieht hört das Template da einfach auf und der Browser bzw. Aktive-Desktop füllt das mit grau auf weil die Bildschirmauflösung so groß ist. Ich würde mal einfach ein paar Leerzeilen am ende einfügen und das Verhalten beobachten.

Hi, ich hatte das Problem auch. Das lag bei mir am Shopware Footer. Habe das ganze so in meiner CSS angepasst: .shopware\_footer { margin: 0 auto; } Grüße

Also mit br’s lässt sich der Bereich verringern. und das Hintergrundbild das eigentlich viel größer ist wird sichtbar. Es liegt also hinter der grauen Fläche. Die anderen erwähnten Sachen wie padding verändern oder margin im footer haben keine Abhilfe gebracht.

Kann ich mal nen Link zu deiner Seite bekommen? Grüße

Im Prinzip kann das eigentlich jeder. Ich bitte nur um Verständnis das der Shop noch nicht fertig gestellt ist. http://www.werny-handel.net Die graue Fläche kommt aber auch woanders her denn das grau ist bei mir nicht als bg Farbe eingetragen.

Hallo werny, das Problem ist, dass das „body“-Tag nicht den kompletter Browser (Viewport) ausfüllt, sondern sich an der Höhe des Contents richtet. Du musst das Hintergrundbild auf das „html“-Tag setzen und nicht auf das „body“-Tag. Damit das Bild dann auch noch ordentlich skaliert wird gibt es in CSS3 die Eigenschaft „background-size“, womit man sowas steuern kann. Beispiel: html { /\*\* Sets the background image \*/ background: url(images/bg.jpg) no-repeat center center fixed; /\*\* Safari / Chrome \*/ -webkit-background-size: cover; /\*\* Firefox \*/ -moz-background-size: cover; /\*\* Opera \*/ -o-background-size: cover; /\*\* W3C standard format \*/ background-size: cover; /\*\* IE 6-7 \*/ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.images/bg.jpg', sizingMethod='scale'); /\*\* IE 8-9 \*/ -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale')"; } P.S.: Die graue Hintergrundfarbe wird in der colors.css auf das „html“-Element gesetzt :wink: Viele Grüße, Stephan Pohl :shopware:

Inwiefern funktioniert das CSS 3 auch bei älteren Browsern? Wenn ich das Hintergrundbild auf den html tag definiere funktioniert alles erstmal tadellos aber das skalieren wäre trotzdem eine Option für neuere Browser. Kann ich beides nutzen?

Hallo werny, CSS3 setzt auf CSS 2.1 komplett auf. Wenn ein Browser eine CSS3 Eigenschaft nicht unterstützt wird diese einfach ignoriert. Die von mir gepostete Lösung ist komplett Cross-Browser konform, so dass du damit auch im IE kein Problem bekommen solltest. Zur Veranschaulichung habe ich das Code-Snippet in meinen letzten Post durch kommentiert. Viele Grüße, Stephan Pohl :shopware: