no własnie tego szukałem i szperałem, kombinowałem jak to zrobić, dokładnie o takie coś mi chodzi tylko szerokie po całości sklepu tak jak w oryginale :)
Tak Rad ale przy Twoim rozwiązaniu wychodziło mi tło pod stopką szare, z boku z obu stron od samej góry też szare,- nie wiedziałem jak zmienić boki na biało. Bobo o takie coś mi chodzi. A wiec jak to zrobić?
nie tak prosto. body ma szerokość strony (100%), container ma 960px. w tym momencie szare body da też szare paski po obu stronach containera. jeśli dasz container na 100% to dalsze elementy w nim, mające szerokości procentowe, też zmienią szerokość. najgorzej pójdzie przy mixach, gdzie kolumna ma pixele, a div obok procenty. dlatego trzeba trochę przekombinować. czyli container obłożyć jeszcze jednym divem. użyłem 'masterContainer'. i dałem mu szerokość 100% bez zmiany normalnego containera (960px). teraz ten masterContainer ma szerokość strony i jest biały, ale jest kicha, bo górny pasek ma szrokość containera. dlatego background z containera trzeba przenieść do masterContainera. voila, już jest pasek górny na całą szerokość. teraz stopka jest wąska. dlatego ciach ją piętro niżej, czyli pod container - ale jeszcze w masterContainer. i już mamy dwa szerokie paski: jeden na górze, jeden na dole. ale jeśli jakaś strona ma tylko jedno zdanie, to dolny cienki pasek jest w połowie strony i nie wypełnia jej do samego dołu. i po to teraz ten bitmap. określam wysokość body na 100%, i daję mu szary pixel jako wypełniacz. biały masterContainer zakrywa szarość do końca zawartości strony, czyli do stopki. stopka i górny pasek mają szerokość masterContainera, a zwykły container ma już tylko 960px. pod masterContainerem jest jeszcze wypełniacz koloru stopki idący do końca body, który ma wysokość całej strony.
w css dodane: body{background:#fff url('img/footer_1px.bmp');} i zrób sobie takiego bitmapka o kolorze stopki i wymiarze 1x1 px. html, body{height:100%;} #masterContainer{width:100%;margin:0 auto;padding:0;background:#fff;background:#fff url('img/bg.gif') repeat-x left top;} (tu background jest przeniesiony z container'a)
w container.tpl NAD: <div id="container"> dodać <div id="masterContainer"> i NAD </body> dodać
(to zakończenie masterContainera.) następnie CAŁY div id=foot, przenieść piętro niżej, czyli NAD ten dodany przed chwilą </div>
ok, trochę nie wiem w którym dokładnie to miejscu powklejać, ale jakoś dojdę. Dzięki boboo Ty jeden tu na forum najwięcej pomagasz, większość ma to gdzieś. Dzieki!
w default.css gdzieś u góry dodaj: html, body{height:100%;} body{background:#'tu daj background z #foot';} #masterContainer{width:100%;margin:0 auto;padding:0;background:#fff url('img/bg.gif') repeat-x left top;} teraz w container.tpl NAD <div id="container"> dodaj: <div id="masterContainer"> i na dole NAD </body> dodaj: </div> teraz mam nadzieję, że masz edytor, który pokazuje koniec i początek tag'ów. po prostu weź CAŁY <div id="foot"> i przenieś go NAD: </div> </body>
zrobiłem to trochę inaczej w samym tylko default.css podmieniłem linię: body{padding:0;background:#fff url('img/bg.gif') repeat-x left top;text-align:center;} na: html, body{height:100%;} body{background:#f3f2f1;} #container{width:100%;margin:0 auto;padding:0;background:#fff url('img/bg.gif') repeat-x left top;} i działa ;) tylko jest jeden minus :( w IE6 z którego jeszcze garstka osób korzysta, strona ucieka na lewy bok tak jak na foto pod linkiem: http://www.fotoszok.pl/upload/dfe97014.jpg
Działa! w ie6 wyświetla się już dobrze wystarczyło dopisać na końcu: text-align:center; cały kod w default.css powinien wyglądać: html, body{height:100%;} body{background:#f3f2f1;} #container{width:100%;margin:0 auto;padding:0;background:#fff url('img/bg.gif') repeat-x left top;text-align:center;}
wystarczy: body{background:#f3f2f1;} #container{width:100%;margin:0 auto;padding:0;background:#fff url('img/bg.gif') repeat-x left top;text-align:center;} po kilku testach stwierdziłem że: html, body{height:100%;} nie jest potrzebne
