Weblabor

Javítottad? Mert nálam most jó, legalábbis nem változik semmi, ha átméretezem a böngészőt (Opera 12).

Ez egy gyakori probléma az olyan, manapság elterjedt – nem reszponzív – designoknál, ahol az egyes fix szélességű szekcióik egy teljes szélességű ún. konténer-elemben vannak, és a háttér ez utóbbiak számára van beállítva, így az kétoldalt is folytatódik. Kis méretben azonban, amikor a böngészőablak keskenyebb, mint a szekciók szélessége (ez leggyakrabban 960px), vízszintes görgetés esetén a konténer háttere (legyen az kép vagy egyszerű szín) már nem fog látszódni, hanem az így előbukkanó tartalom mögött a BODY elem háttere fog megjelenni. Ennek oka, hogy a konténer alapértelmezett szélessége 100%, ami a böngészőablakhoz igazodik, tehát 800px-es böngészőszélesség esetén az is 800px lesz, meg jobbra görgetve az oldalt az ezen már túlnyúló belső elem mögött (160px szélesen) így nem lesz háttér.

A megoldás: a konténer elemeknek (jelen esetben elég a "wrapper" ID-jű DIV-nek) egy minimális szélességet kell megadni, ami egyenlő a szekciók meghatározott szélességével (a hivatkozott példában ez 1366 px). Amennyiben a deklarált szélességű elemeknél "margin" (ill. "padding", ha a "box-sizing" CSS-tulajdonság értéke nem "border-box"), vagy valamely szülőjüknél "padding" van beállítva, ezek oldalirányú méreteit hozzá kell adnunk a konténer minimális szélességéhez.Javaslom egyébként, hogy 1366 pixelnél mindenképp kisebb szélességet adj meg a belső elemeknek, hiszen egy hagyományos felbontás esetén még számolni kell a gördítősáv szélességével is (nagyjából 24 pixel).