[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

[Olimpia_ona]

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.

Ponieważ nie miałam gdzie tego wstawić online sama kombinowałam. Ehh... po 1h czy 2h (straciłam rachubę) coś wykombinowałam używając trochę tego sticky footer. Stopka teraz jest tak jak powinna - na dole. Czyli efekt osiągnięty, chodź nie jestem do końca zadowolona, gdyż jeszcze nie do końca to rozumiem, tzn. nie umiałam spowodować, by mój <div id="content"> również miał 100% wysokości i musiałam wymuszać pewne przesunięcia div'ów atrybutem min-height.
Jak by ktoś był zainteresowany to wklejam szablon
html

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="pl-PL" lang="pl-PL" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <link rel="stylesheet" type="text/css" href="div.css" />
</head>
<body>
 
     <div class="MY_cialo">
       <div id="content">
          <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
            MY_MENU<br />MENU1<br />MENU<br />MENU<br />MENU<br />MENU<br />MENU<br />MENU
          </div>
          <div id="MY_CP">MY_CP</div>
          <div id="MY_CP2">MY_CP2</div>
       </div>
       <div class="push"></div>
     </div>
     <div class="footer">
             <div id="MY_CP4">MY_CP4</div>
             <div id="MY_CP7">MY_CP7</div>
     </div>
 
</body>
</html>
[HTML] pobierz, plaintext 

i css

[HTML] pobierz, plaintext 
* {
    margin: 0;
}
html, body {
    height: 100%;
    font-family: tahoma, verdana, arial;
    background-image: url(images/tlogora.jpg);
    background-repeat: repeat-x;
    color:#5C5C5C;
    font-size:11px;
}
 
.MY_cialo {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -105px;
    background-image: url(images/tlodol.gif);
    background-repeat: repeat-x;
    background-position:center bottom;
}
 
#content { width:1000px; margin:auto;}
 
#MY_LEWYBOK  { background-color:Aqua; width: 20px; min-height: 370px; float: left; }
#MY_PRAWYBOK { background-color:Purple; width: 20px; min-height: 370px; 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;}
 
.footer, .push {
 clear:both;
 height: 105px;
 width: 960px;
 margin:auto;
}
 
#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