Problem jest następujący:
Mam stronę:
i plik ze stylami css:
@import url("reset.css"); body { font: 62.5%/2.2em Tahoma, Verdana, Arial, Helvetica, sans-serif; color: #000; } .container{ width: 900px; margin: 0 auto; position: relative; overflow:hidden; } #header{ height: 55px; background-image: url(../images/top-back2.jpg); background-repeat: repeat-x; } #header .container{ height: 55px; background-image: url(../images/top-back2.jpg); background-repeat: repeat-x; } /* TOP MENU */ #navigation li{ float: left; padding-right: 27px; text-transform: uppercase; font-size: 1.3em; font-weight: normal; } #navigation{ float:right; top:13px; padding-top: 13px; } #navigation li a{ color: #fff; } #navigation li a:hover,#navigation li.active a{ color: #2c2c2c; } /*-------------------*/ /*BANER*/ #banner{ height: 200px; background-color:blue; background-image: url(../images/topek.gif); background-repeat: repeat-y; background-position: 0px 100px; } #banner-in{ height:200px; background-color:transparent; background-image: url(../images/topek.gif); background-repeat: repeat-y; background-position: 100% 0px; } #banner-in .container{ height:200px; background-color: red; } /*-------------------*/
Chodzi o to że w miejscu gdzie ma znajdować się baner, strona po zmniejszeniu okna przeglądarki sie rozlatuje. Po prawej i lewej stronie czerwonego banera są dwa niebieskie paski. Gdy okno przeglądarki jest zmaksymalizowane wszystko jest ok, po zmniejszeniu te paski w ogole znikają. Co robię nie tak i jak to naprawić ?