Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [div] szablon strony na div
Forum PHP.pl > Forum > Po stronie przeglądarki
Olimpia_ona
9.01.2011, 14:44:28
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 
  1. <div id="MY_tlodol">
  2.     <div id="MY_cialo">  
  3.         <div id="MY_LEWYBOK">LB</div>
  4.         <div id="MY_PRAWYBOK">PB</div>
  5.         <div id="MY_LOGO">MY_LOGO</div>
  6.         <div id="MY_CP6">MY_CP6</div>
  7.         <div id="MY_SEARCH">MY_SEARCH</div>
  8.         <div id="MY_CP8">MY_CP8</div>
  9.         <div id="MY_CP3">MY_CP3</div>
  10.         <div id="MY_MENU">
  11.             MY_MENU<br />MY_MENU<br />MY_MENU<br />MY_MENU<br />MY_MENU<br />MY_MENU<br />
  12.             MY_MENU<br />MENU1<br />MENU<br />MENU<br />MENU<br />MENU<br />MENU<br />MENU<br />MENU8<br />
  13.         </div>
  14.         <div id="MY_CP">MY_CP</div>
  15.         <div id="MY_CP2">MY_CP2</div>
  16.         <div id="MY_CP4">MY_CP4</div>
  17.         <div id="MY_CP7">MY_CP7</div>     
  18.     </div> 
  19. </div>
[HTML] pobierz, plaintext


i css do tego:
[HTML] pobierz, plaintext 
  1. html, body
  2. {
  3.     margin:0px;
  4.     padding:0px;
  5.     font-family: tahoma, verdana, arial;
  6.     background-image: url(images/tlogora.jpg);
  7.     background-repeat: repeat-x;
  8.     color:#5C5C5C;
  9.     font-size:11px;
  10.     height:100%;
  11. }
  12.  
  13. #MY_tlodol 
  14. { 
  15.     width:100%; height:100%;
  16.     background-image: url(images/tlodol.gif);
  17.     background-repeat: repeat-x;
  18.     background-position:center bottom;
  19. }
  20.  
  21. #MY_cialo { width:1000px; height:100%; margin-left:auto; margin-right:auto;}
  22. #MY_LEWYBOK  { background-color:Aqua; width: 20px; height: 100%; float: left; }
  23. #MY_PRAWYBOK { background-color:Purple; width: 20px; height:100%; float: right;}
  24. #MY_LOGO     { background-color:Black; width: 565px; height: 125px; float: left;}
  25. #MY_CP6      { background-color:Blue; width: 395px; height: 55px; float: left;}
  26. #MY_SEARCH   { background-color:Fuchsia; width: 395px; height: 70px; float: left;}
  27. #MY_CP8      { background-color:Gray; width: 960px; height: 45px; float: left; }
  28. #MY_CP3      { background-color:Green; width: 960px; height: 192px; float: left; margin-bottom:3px;}
  29. #MY_MENU     { background-color:Lime; width: 245px; float: left; margin-right:8px; }
  30. #MY_CP       { background-color:Maroon; width: 450px; float: left; margin-right:12px;}
  31. #MY_CP2      { background-color:Navy; width: 245px; float: left;}
  32. #MY_CP4      { background-color:Olive; width: 960px; height:55px; float: left; margin-top:10px;}
  33. #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
9.01.2011, 17:55:24
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 czarodziej.gif CSS sticky footer czarodziej.gif

to tlo dol, mozesz dac do body jako multiple-backgrounds, chyba bedzie wygodniej.
Olimpia_ona
9.01.2011, 21:36:23
Cytat(Damonsson @ 9.01.2011, 17:55:24 ) *
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 czarodziej.gif CSS sticky footer 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 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xml:lang="pl-PL" lang="pl-PL" xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
  5.     <link rel="stylesheet" type="text/css" href="div.css" />
  6. </head>
  7. <body>
  8.  
  9.      <div class="MY_cialo">
  10.        <div id="content">
  11.           <div id="MY_LEWYBOK">LB</div>
  12.           <div id="MY_PRAWYBOK">PB</div>
  13.           <div id="MY_LOGO">MY_LOGO</div>
  14.           <div id="MY_CP6">MY_CP6</div>
  15.           <div id="MY_SEARCH">MY_SEARCH</div>
  16.           <div id="MY_CP8">MY_CP8</div>
  17.           <div id="MY_CP3">MY_CP3</div>
  18.           <div id="MY_MENU">
  19.             MY_MENU<br />MY_MENU<br />MY_MENU<br />MY_MENU<br />MY_MENU<br />MY_MENU
  20.             MY_MENU<br />MENU1<br />MENU<br />MENU<br />MENU<br />MENU<br />MENU<br />MENU
  21.           </div>
  22.           <div id="MY_CP">MY_CP</div>
  23.           <div id="MY_CP2">MY_CP2</div>
  24.        </div>
  25.        <div class="push"></div>
  26.      </div>
  27.      <div class="footer">
  28.              <div id="MY_CP4">MY_CP4</div>
  29.              <div id="MY_CP7">MY_CP7</div>
  30.      </div>
  31.  
  32. </body>
  33. </html>
[HTML] pobierz, plaintext


i css
[HTML] pobierz, plaintext 
  1. * {
  2.     margin: 0;
  3. }
  4. html, body {
  5.     height: 100%;
  6.     font-family: tahoma, verdana, arial;
  7.     background-image: url(images/tlogora.jpg);
  8.     background-repeat: repeat-x;
  9.     color:#5C5C5C;
  10.     font-size:11px;
  11. }
  12.  
  13. .MY_cialo {
  14.     min-height: 100%;
  15.     height: auto !important;
  16.     height: 100%;
  17.     margin: 0 auto -105px;
  18.     background-image: url(images/tlodol.gif);
  19.     background-repeat: repeat-x;
  20.     background-position:center bottom;
  21. }
  22.  
  23. #content { width:1000px; margin:auto;}
  24.  
  25. #MY_LEWYBOK  { background-color:Aqua; width: 20px; min-height: 370px; float: left; }
  26. #MY_PRAWYBOK { background-color:Purple; width: 20px; min-height: 370px; float: right;}
  27. #MY_LOGO     { background-color:Black; width: 565px; height: 125px; float: left;}
  28. #MY_CP6      { background-color:Blue; width: 395px; height: 55px; float: left;}
  29. #MY_SEARCH   { background-color:Fuchsia; width: 395px; height: 70px; float: left;}
  30. #MY_CP8      { background-color:Gray; width: 960px; height: 45px; float: left; }
  31. #MY_CP3      { background-color:Green; width: 960px; height: 192px; float: left; margin-bottom:3px;}
  32. #MY_MENU     { background-color:Lime; width: 245px; float: left; margin-right:8px; }
  33. #MY_CP       { background-color:Maroon; width: 450px; float: left; margin-right:12px;}
  34. #MY_CP2      { background-color:Navy; width: 245px; float: left;}
  35.  
  36. .footer, .push {
  37.  clear:both;
  38.  height: 105px;
  39.  width: 960px;
  40.  margin:auto;
  41. }
  42.  
  43. #MY_CP4      { background-color:Olive; width: 960px; height:55px; float: left; margin-top:10px;}
  44. #MY_CP7      { background-color:Orange; width: 960px; height:40px; float: left;}
  45.  
[HTML] pobierz, plaintext
Sylwesterx
10.01.2011, 18:32:06
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 biggrin.gif http://sylwester.xpag.pl/style.css
Olimpia_ona
10.01.2011, 19:42:28
Cytat(Sylwesterx @ 10.01.2011, 18:32:06 ) *
... css i divach i wszystko mi się ładnie trzyma biggrin.gif 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
10.01.2011, 21:38:46
Cytat(Olimpia_ona @ 10.01.2011, 19:42:28 ) *
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ąsad.gifu 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...
Olimpia_ona
11.01.2011, 21:17:57
Cytat(Sylwesterx @ 10.01.2011, 21:38:46 ) *
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ąsad.gifu 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 smile.gif

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

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

To co ZGODA? smile.gif
Sylwesterx
11.01.2011, 23:22:36
Zgoda winksmiley.jpg Ale jeśli zastosuję suwaczek, w stylach diva nie wyjedzie mi ;P I jakoś nie mam zamiaru za dużo pisać.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.