[css] pozycjonowanie

[dzbanek]

Witam

Po przeczytaniu kilku poradnikow i obejrzeniu kilkunastu filmow porzucilem zwykle (nvu) metody tworzenia stron i zainteresowalem sie css.

Zrobilem projekt w psd, zaczalem go ciac na kawalki i od razu napotkalem problemy, ktorych rozwiazania nie moge znalezc.

Taki efekt chcialbym uzyskac:



Daje pelny kod, dla latwiejszego wytkniecia mi wszystkich potkniec przy moich pierwszych krokach.

Moj index.html

Kod:

<div id="container">       
        <div id="info_tab">        
            <div id="header_tab">          
                <div id="header_tab_left"></div>
                <div id="header_tab_middle"></div>
                <div id="header_tab_right"></div>
            </div> <!-- header_tab -->    
            <div id="header">          
                <div id="header_top_left"></div>
                <div id="header_top"></div>
                <div id="header_top_right"></div>
            </div> <!-- header_tab -->      
        </div> <!-- info_tab -->               
    </div> <!-- container -->

i css:

Kod:

body {
    background-color: #e9f1fa;
    font 11px Segoe UI, Tahoma, Verdana, Arial, sans-serif;
}

#container {
    width: 90%;
    margin: 0 auto;
}

#header_tab {
    display: inline;
    float: left;
    width: 100%;
    margin: 0 auto;
}

#header {
    display: inline;
    float: left;
    width: 100%;
    margin: 0 auto;
    clear: both;
}

#header_tab_left{
    display: inline;
    float: left;
    width: 10px;
    height: 29px;
    background-image: url(images/header_tab_left.gif);
}

#header_tab_middle {
    display: inline;
    float: left;
    width: 72px;
    height: 29px;
    background-image: url(images/header_tab_middle.gif);
}

#header_tab_right {
    display: block;
    float: left;
    width: 29px;
    height: 29px;
    background-image: url(images/header_tab_right.gif);
}

#header_top_left {
    display: inline;
    float: left;
    width: 10px;
    height: 11px;
    background-image: url(images/header_top_left.gif);
}

#header_top {
    display: block;
    float: left;
    height: 11px;
    width: 90%;
    background-image: url(images/header_top.gif);
    background-repeat: repeat-x;
}

#header_top_right {
    display: inline;
    float: right;
    width: 10px;
    height: 11px;
    background-image: url(images/header_top_right.gif);
    clear: right;
}

Chcialbym, aby strona sie skalowala wraz z zwiekszaniem/zmiejszaniem rozmiaru okna, byla na srodku okna i miala troche miejsca po obu stronach.

Efekt, ktory uzyskalem:



Moj pierwszy problem: nie wiem, jak ustawic szerokosc #header_top, aby wpasowal sie pomiedzy #header_left a #header_right. Jego tlem jest obraz o szerokosci 1 piksela.

Drugi problem jest przy zmniejszaniu szerokosci okna przegladarki:



Wszytko sie rozjezdza. Strona bedzie uzyta w programie i czesto zmniejszana/zwiekszana. Oczywiscie az tak waska nie bedzie nigdy, ale chcialbym wiedziec, jak moge ograniczyc takie zachowanie.

Dziekuje za wszelka pomoc, rady i chocby kierunek poszukiwan rozwiazania moich pierwszych problemow.