zanikające "boczki"

[ogor89]

Cześć,
nie bardzo wiem jak zatytułować wątek, więc administrację proszę w razie czego o zmianę tytułu. Mam taki kod:

Kod:

<!-- start sides -->
<div id="sides">
  <div id="sides_left"></div>
  <div id="sides_right"></div>
</div>
<!-- end sides -->

<!-- start main -->
<div id="page_wrapper">
  <div id="header">
    <div id="logo"></div>
    <div id="content"></div>
  </div>
</div>
<!-- end main -->

CSS:

Kod:

html, body {
    background:    rgb(50,50,50) url(tlo.png) repeat;
    color:        #000;
    margin:        auto;
    padding:        0;
    color:        black;
    font:            15px Verdana, Helvetica, sans-serif;
}

#sides{
/*    position:    static;
    z-index:        -1001;
*/    margin:        0 auto;
    padding:        0;
    width:        1160px;/*1170px;*/
    height:        649px;
    position:    center;
    background:    rgb(255,0,0);
}

#sides_left{
/*    position:    static;
    z-index:-1001;
*/    margin:0;
    padding:0;
    clear:    left;
    float:    left;
    width:        130px;
    height:        649px;
    background:    transparent url(naglowek_l.png) no-repeat;
}

#sides_right{
/*    position:    static;
    z-index:-1001;
*/    margin:0;
    padding:0;
    clear:    right;
    float:    right;
    width:        130px;
    height:        649px;
    background:    transparent url(naglowek_p.png) no-repeat;
}

#page_wrapper{
    position:    relative;
/*    z-index:            -100;*/
    top:            -649px;
    width:            900px;
    margin:            0 auto;
    padding:            0;
    clear:            both;
    background:    rgb(0,0,255);
}

#header{
    /*position:    static;
    z-index:        -100;*/
    width:        900px;
    height:        255px;
    background:    transparent url(naglowek.png) no-repeat;
}

#logo{
    
}

#content{

}

"page_wrapper" to właściwa treść strony z nagłówkiem, logiem, tekstem, itd. Ten div jest przesunięty w górę o wysokość dodatkowych boczków. Div-y "sides_left" i "sides_right" są szerzej niż główna kolumna (page_wrapper). Są to dodatkowe grafiki i chcę żeby "wychodziły" poza okno przeglądarki jeśli szerokość okna jest za mała żeby się wszystko pomieściło. Nie wiem jak to zrobić. Udało mi się uzyskać efekt, że główna kolumna zachowuje się tak jak chcę, ale ciągle mam kłopot z tymi dodatkami.
Screeny:

Chodzi o to, żeby te boczki wychodziły poza okno przeglądarki i nie było paska do przewijania na dole. Główna kolumna ma być cały czas widoczna i jeśli się nie zmieści to wtedy ma się pojawiać pasek.

[ogor89]

Zrzuty wstawiłem, a jeśli chodzi o uporządkowanie, to usunąłem zbędny tekst. A z tym makiem to z czego wnioskujesz? Jeśli z kodu, to wydarłem to z cmsa.

[Kartofelek]

Wrzucasz tą swoją wycentrowaną stronę w duży kontener który ma overflow:hidden. Twoja strona powinna mieć relatywne pozycjonowanie.
Dajesz do niej 2 divy pozycjonowane absolutnie, jeden na lewo drugi na prawo (width:100%, righ:0; itp). Oba mają 100% height. Był ostatnio podobny temat, tylko z jednym bokiem.

[ogor89]

Ok, ale czy wtedy te dwa boczki nie zostaną mi cały czas na ekranie? Mi chodzi o to, żeby one się przewijały razem ze stroną.
Możesz mi napisać kod, bo jakoś mi się wszystko zlewa razem bez głównej kolumny.

[Kartofelek]

http://www.webmastertalk.pl/css-background-nowy-problem-t-9192.html
Oczywiście u ciebie były by takie 2. Plus otoczka która by miała szerokość okna i overflow. Kwestia pokombinowania

[ogor89]

Jakoś mi ciągle nie wychodzi. Albo mi znikają boczki, albo całość. Poniżej daję zaktualizowany kod (bez Waszych podpowiedzi). Ciągle nie wiem jak zrobić przenikanie boczków i mam jeszcze jeden problem. Nie mogę ustawić marginesów. Logo przemieściłem za pomocą position:relative, ale czasem przydałoby się użyć marginesów, choćby w tekście. "test_content" ma margin:10px i różowe tło, a nie widać tego. Jest jeszcze kwestia wysokości strony. Niby wszystko ok, ale w dół mogę przewijać dość mocno, a tego nie chcę. Wiem, że robię jakieś głupie błędy. Pomóżcie, proszę, w tych trzech sprawach.

HTML

Kod:

{process_pagedata}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{cms_stylesheet}
</head>
<body>
<div id="page">
    <!-- start sides -->
    <div id="side_left"></div>
    <div id="side_right"></div>
    <!-- end sides -->
    
    <!-- start main -->
    <div id="page_wrapper">
        <!-- start header -->
        <div id="header">
            <div id="logo"></div>
            <!--div id="menu_upper">
                {menu loadprops=0 number_of_levels='2'}
                {*Ala ma kota!*}
            </div-->
        </div>
        <!-- end header -->
        
        <!-- start content -->
        <div id="test_content">
            safdasfldsgjkfdgkljflkadjfkfgsagsjfdksnadkgsfd
            {content}
        </div>
        <!-- end content -->
        
    </div>
    <!-- end main -->

</div>

</body>
</html>

CSS

Kod:

html, body {
    background:    rgb(50,50,50) url([[root_url]]/uploads/GoodMoto/tlo.png) repeat;
    color:        #000;
    margin:        auto;
    padding:        0;
    color:        black;
    font:            15px Verdana, Helvetica, sans-serif;
}

#page{
    overflow:    hidden;
    position:    relative;
    margin:        0 auto;
    padding:        0;
    width:        1160px;
    background:    black;
}

#side_left{
    margin:0;
    padding:0;
    clear:    left;
    float:    left;
    width:        130px;
    height:        649px;
    background:    red url([[root_url]]/uploads/GoodMoto/naglowek_l.png) no-repeat;
}

#side_right{
    margin:0;
    padding:0;
    clear:    right;
    float:    right;
    width:        130px;
    height:        649px;
    background:    green url([[root_url]]/uploads/GoodMoto/naglowek_p.png) no-repeat;
}

#page_wrapper{
    position:    relative;
    top:            -649px;
    width:            900px;
    margin:            0 auto;
    padding:            0;
    clear:            both;
    background:    rgb(0,0,255);
}

#header{
    width:        900px;
    height:        255px;
    background:    transparent url([[root_url]]/uploads/GoodMoto/naglowek.png) no-repeat;
}

#logo{
    position:    relative;
    top:    105px;
    left:    30px;
    padding:    0;
    margin:    0;
    width:    459px;
    height:    84px;
    background:    transparent url([[root_url]]/uploads/GoodMoto/logo.png) no-repeat;
}

/*start MENU*/
#menu_upper{
    height:    24px;
    margin:    0;
    background:    rgb(0,255,0);
}

ul, ul li {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

ul li {
    float: left;
}
}
/*end MENU*/



#test_content{
    background: rgb(255,127,127);
    padding: 10px;
    margin: 1000px;
}

[camelrafal]

żeś sobie strone wymyślił... doczepiłeś się do tych boczków i boczków(chociaż są okropne)

weź sobie jakieś fajne inne foto z motocyklem w temacie i ustaw całość jako tło i dopiero na to nakładaj elementy strony będzie łatwiej ładniej i wygodniej
no i najważniejsze boczki będą cały czas w miejscu bez względu na to czy przewijasz stronę

a co do marginesów to pewno masz display:block;
spróbuj zmienić atrybut display w "nadelemencie" (w twoim wypadku header) zawierającym obiekt któremu chcesz nadać margines
spróbuj może z display:table-cell; ?