[div] szablon strony na div, stopka na dole strony Opcje

[Olimpia_ona]

Witam, jak wielu ostatnio postanowiłam nauczyć się przygotowywać strony na divach, wiele o tym czytałam i nawet parę szablonów mi wyszło, niestety w tym szablonie napotkałam problem i nie wiem jak z niego wybrnąć. Prawdopodobnie źle pojmuje te divy.

Zacznę od tego co chcę osiągnąć: poniżej efekt z użyciem tabel (użyłam dwóch tabel do skonstruowania szablonu)
(IMG:http://images41.fotosik.pl/511/3b1838706c67cbe0.jpg)

natomiast, gdy użyje samych div'ów nie mogę spowodować prawidłowego zachowania się stopki (<div id="MY_CP4">MY_CP4</div> oraz <div id="MY_CP7">MY_CP7</div>)

Efekt na rysunkach to - stopka podchodzi do góry, nie pozostaje na dole strony
(IMG:http://images41.fotosik.pl/511/efb32a50cfe3c949.jpg)

a gdy tekstu jest za dużo to div z dolnym tłem oraz z lewym i prawym bokiem strony nie obniża się:
(IMG:http://images39.fotosik.pl/512/1ad2909612ae7d81.jpg)

i wklejam kod strony oparty na div

[HTML] pobierz, plaintext 
<div id="MY_tlodol">
    <div id="MY_cialo">  
        <div id="MY_LEWYBOK">LB</div>
        <div id="MY_PRAWYBOK">PB</div>
        <div id="MY_LOGO">MY_LOGO</div>
        <div id="MY_CP6">MY_CP6</div>
        <div id="MY_SEARCH">MY_SEARCH</div>
        <div id="MY_CP8">MY_CP8</div>
        <div id="MY_CP3">MY_CP3</div>
        <div id="MY_MENU">
            MY_MENU<br />MY_MENU<br />MY_MENU<br />MY_MENU<br />MY_MENU<br />MY_MENU<br />
            MY_MENU<br />MENU1<br />MENU<br />MENU<br />MENU<br />MENU<br />MENU<br />MENU<br />MENU8<br />
        </div>
        <div id="MY_CP">MY_CP</div>
        <div id="MY_CP2">MY_CP2</div>
        <div id="MY_CP4">MY_CP4</div>
        <div id="MY_CP7">MY_CP7</div>     
    </div> 
</div>
[HTML] pobierz, plaintext 

i css do tego:

[HTML] pobierz, plaintext 
html, body
{
    margin:0px;
    padding:0px;
    font-family: tahoma, verdana, arial;
    background-image: url(images/tlogora.jpg);
    background-repeat: repeat-x;
    color:#5C5C5C;
    font-size:11px;
    height:100%;
}
 
#MY_tlodol 
{ 
    width:100%; height:100%;
    background-image: url(images/tlodol.gif);
    background-repeat: repeat-x;
    background-position:center bottom;
}
 
#MY_cialo { width:1000px; height:100%; margin-left:auto; margin-right:auto;}
#MY_LEWYBOK  { background-color:Aqua; width: 20px; height: 100%; float: left; }
#MY_PRAWYBOK { background-color:Purple; width: 20px; height:100%; float: right;}
#MY_LOGO     { background-color:Black; width: 565px; height: 125px; float: left;}
#MY_CP6      { background-color:Blue; width: 395px; height: 55px; float: left;}
#MY_SEARCH   { background-color:Fuchsia; width: 395px; height: 70px; float: left;}
#MY_CP8      { background-color:Gray; width: 960px; height: 45px; float: left; }
#MY_CP3      { background-color:Green; width: 960px; height: 192px; float: left; margin-bottom:3px;}
#MY_MENU     { background-color:Lime; width: 245px; float: left; margin-right:8px; }
#MY_CP       { background-color:Maroon; width: 450px; float: left; margin-right:12px;}
#MY_CP2      { background-color:Navy; width: 245px; float: left;}
#MY_CP4      { background-color:Olive; width: 960px; height:55px; float: left; margin-top:10px;}
#MY_CP7      { background-color:Orange; width: 960px; height:40px; float: left;}
[HTML] pobierz, plaintext 

Czy znajdzie się tu jakiś dobry człowiek, który mi wyjasni co robię źle?

[Damonsson]

Wstaw gdzieś online.

Tak na oko tylko, spróbuj dodać overflow:hidden do aqua i purple i tego tlo dol, a co do stopki to pewnie (IMG:style_emoticons/default/czarodziej.gif) CSS sticky footer (IMG:style_emoticons/default/czarodziej.gif)

to tlo dol, mozesz dac do body jako multiple-backgrounds, chyba bedzie wygodniej.

Ten post edytował Damonsson 9.01.2011, 17:58:12