[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)


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


a gdy tekstu jest za dużo to div z dolnym tłem oraz z lewym i prawym bokiem strony nie obniża się:


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 CSS sticky footer

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 CSS sticky footer

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 

[Sylwesterx]

A nie działało zwiększenie czy zmniejszenie margin-top ? I czy próbowałaś używać "position:absolute;" ? Robiłem z 2-3 miesiące temu stronkę swoją na css i divach i wszystko mi się ładnie trzyma http://sylwester.xpag.pl/style.css

Ten post edytował Sylwesterx 10.01.2011, 18:37:27

[Olimpia_ona]

... css i divach i wszystko mi się ładnie trzyma http://sylwester.xpag.pl/style.css

Sylwesterx bez obrazy, ale Twoja strona jest bardzo amatorska, tła są stworzone na sztywno, spróbuj dodać dużo tekstu w prawej kolumnie lub w kolumnie z treścią, treść wyjdzie poza obrazek, który dałeś w tle.
W każdym razie ja robiłam stronę/skórkę pod CMSa, gdzie nie ma takich ograniczeń tj. jak klient wklei sobie dużo treści np. w prawą kolumnę to wszystko będzie dobrze wyglądać.

No ale nic, człowiek całe życie się uczy. Ciągle jakieś problemy są do rozwiązania.

Pozdrawiam

[Sylwesterx]

Sylwesterx bez obrazy, ale Twoja strona jest bardzo amatorska, tła są stworzone na sztywno, spróbuj dodać dużo tekstu w prawej kolumnie lub w kolumnie z treścią, treść wyjdzie poza obrazek, który dałeś w tle.
W każdym razie ja robiłam stronę/skórkę pod CMSa, gdzie nie ma takich ograniczeń tj. jak klient wklei sobie dużo treści np. w prawą kolumnę to wszystko będzie dobrze wyglądać.

No ale nic, człowiek całe życie się uczy. Ciągle jakieś problemy są do rozwiązania.

Pozdrawiam

Hmmm, odpowiem w punktach.
1. Nie widzę u siebie prawej kolumny(co najwyżej środkowa i nie nazwał bym tego kolumną).
2. Tworzyłem to tak, że nic mi nie wyjeżdża(dokładniej się przyjrzyj).
3. Amatorska ? Możesz mi sprecyzować ? Ja bym nazwał amatorkąu ciebie) stronka na tabelkach i próby przerobienia 'tego czegoś', na divy; divy nazwane polsko-angielsko-jakieś; brak meta, sorry 2 są! O tytule nie wspominając; i nie patrząc, czy zakodowane jest to w ze standardami W3C jak na (X)HTML.
Takie 'kolorowanki' robiłem na początku nauki z książką...

PS.:CMS ?! A to dobre+ Możesz w skrócie opowiedzieć na forum co w nim będzie ? Ktoś tu ma super ego. Aha i jeszcze dodam, jestem amatorem, nikt mnie tego nie uczył, to jakby moje hobby, ale nie przesadzajmy...

Ten post edytował Sylwesterx 10.01.2011, 21:55:25

[Olimpia_ona]

Hmmm, odpowiem w punktach.
1. Nie widzę u siebie prawej kolumny(co najwyżej środkowa i nie nazwał bym tego kolumną).
2. Tworzyłem to tak, że nic mi nie wyjeżdża(dokładniej się przyjrzyj).
3. Amatorska ? Możesz mi sprecyzować ? Ja bym nazwał amatorkąu ciebie) stronka na tabelkach i próby przerobienia 'tego czegoś', na divy; divy nazwane polsko-angielsko-jakieś; brak meta, sorry 2 są! O tytule nie wspominając; i nie patrząc, czy zakodowane jest to w ze standardami W3C jak na (X)HTML.
Takie 'kolorowanki' robiłem na początku nauki z książką...

PS.:CMS ?! A to dobre+ Możesz w skrócie opowiedzieć na forum co w nim będzie ? Ktoś tu ma super ego. Aha i jeszcze dodam, jestem amatorem, nikt mnie tego nie uczył, to jakby moje hobby, ale nie przesadzajmy...

Sylwesterx nie chciałam Cię obrazić, może zbyt luzacko napisałam "bez obrazy". Naprawdę moją intencją było podzielenie się uwagami, które miały być tylko podpowiedzią na co zwracać uwagę przy tworzeniu coraz lepszych stron.
Ad.1. Miałam na myśli lewą kolumnę oraz kolumnę z treścią. Mogłam to nazwać panel (lewy, z treścią, ale nazwałam kolumną, ważne by było zrozumiałe.)
Ad.2. Owszem nic Ci się nie rozjeżdża, ale gdy dodasz dużą ilość tekstu do kolumny z treścią (czy też lewej) to w końcu ten tekst wyjdzie poza obrazek. Tego staram się unikać w moich szablonach.
Ad.3. Amatorska - wiedziałam, że się obrazisz.. ehh.. mogłam użyć innego określenia, w każdym razie nazwałam ją amatorską ze względu na to co opisałam w pkt. ad.2. Moje problemy wzięły się właśnie z tego, że nie chciałam tworzyć szablonu, który jest w stanie przełknąć tylko określoną ilość tekstu.
Gdzie widzisz w moim przykładzie kod do którego przyczepiłby się walidator W3C? Teraz to Ty się czepiasz.
Pokolorowałam, bo nie mogłam se z tym poradzić, cóż nie twierdze, że jestem mistrzem świata

Ad. PS. Skórkę robię pod CMS DotNetNuke

I jeszcze raz podkreślę: nie uważam się za mistrza świata dla tego zadaje tu pytania.

To co ZGODA?

[Sylwesterx]

Zgoda Ale jeśli zastosuję suwaczek, w stylach diva nie wyjedzie mi ;P I jakoś nie mam zamiaru za dużo pisać.