Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html][css] Foot
Forum PHP.pl > Forum > Przedszkole
Rewil
Kiedyś próbowałem zrozumieć jak zrobić takie przyleganie, ale po prostu mi nie wychodzi. Wersja jest taka że albo rozwala stronę, albo stopka leci drugie tyle w dół, albo przylega do góry przeglądarki. Takiego foot'a potrzebuje zastosować na tej stronie: Klik. Wyrównanie statyczne, na zasadzie że zawsze przylega do dołu przeglądarki jeszcze umiem zrobić, ale jak przychodzi większa zawartość, to ta stopka tam zostaje ;>.
piotrooo89
może podasz trochę kodu? jakis link do strony? bo jak Ci mamy pomóc?
pedro84
Google.pl => CSS Sticky footer
Rewil
Cytat
może podasz trochę kodu? jakis link do strony? bo jak Ci mamy pomóc?

Link podany był u góry. Link do strony

  1. body{
  2. background:url('obrazki/bg.PNG') repeat-x;
  3. background-color: #690321;
  4. font-family:Arial;
  5. font-size: 11px;
  6. padding:0;
  7. margin:0;
  8. }
  9.  
  10.  
  11. .szerokosc{
  12. margin: 0 Auto;
  13. width: 900px;
  14. height:auto;
  15. }
  16.  
  17. #box_lewy{
  18. float:left;
  19. width:200px;
  20. height:auto;
  21. margin:0 auto;
  22. }
  23.  
  24. #tresc{
  25. float:left;
  26. width:700px;
  27. }
  28.  
  29. #stopka{
  30. width:900px;
  31. height:39px;
  32. float:left;
  33. background-image:url('obrazki/stopka.PNG');
  34. font-size:11px;
  35. color:#797979;
  36. }
  37.  


  1. <div class="szerokosc">
  2. <div id="box_lewy">
  3. menu boczne
  4. </div>
  5. <div id="tresc">
  6. zawartosc
  7. </div>
  8. <div id="stopka">
  9. Cała stopka przesunięta do dołu jeśli treść i box nie mają wystarczającej zawartości
  10. </div>
  11. </div>
krzysztof_kf
Witam możesz podać więcej szczegółów bo nie do końca rozumiem co chcesz uzyskać pozdrawiam .
Rewil
Być może masz małą rozdzielczość monitora.


Jak pedro napisał, "CSS Sticky footer" tyle że ja tego nie mogę jakoś podłączyć do tego projektu.

Tak wyszło po zastosowaniu kodu przypuszczalnie robiącego to co zamierzam.
Kliknij by zobaczyć link.
pedro84
Tutaj masz najlepsze rozwiązanie, nie powinieneś mieć z tym problemów jak znasz podstawy.
krzysztof_kf
Dla diva stopka dodaj

  1.  
  2. #stopka {
  3. position: fixed;
  4. bottom: 0;
pedro84
Cytat(krzysztof_kf @ 2.05.2010, 19:05:25 ) *
Dla diva stopka dodaj

  1.  
  2. #stopka {
  3. position: fixed;
  4. bottom: 0;

questionmark.gif Przecież jemu nie o to chodzi...
Rewil
Dzięki za linka, ale mimo to nie działa mi dalej ;<. Css'a umiem podstawy mimo to nie rozumiem na jakiej zasadzie to oddala, powinny w css'ie być ify, działania na liczbach czy coś w tym stylu winksmiley.jpg.
Link do aktualnego postępu
Jak widać próbowałem nawet używać te same nazwy i kopiując ten sam kod do mojego css'a.
krzysztof_kf
Podaj jaką rozdzielczością jest ten problem ? stopka ma przylegać do samego dołu okna przeglądarki nawet jeśli jest mało postów tak ?
pedro84
Cytat(krzysztof_kf @ 2.05.2010, 21:43:44 ) *
Podaj jaką rozdzielczością jest ten problem ? stopka ma przylegać do samego dołu okna przeglądarki nawet jeśli jest mało postów tak ?

Pod każdą, sprawdzone :-)

Stopka ma być cały czas na dole strony != okna przeglądarki.
Rewil
No jak jest za mało postów to do dołu przegląrki, tam gdzie się kończy okno strony. A jeżeli jest więcej postów to ma przylegać do ostatniego posta bo wtedy powstaje suwak i jedzie się dalej niż przeglądarka.
krzysztof_kf
Cytat(Rewil @ 2.05.2010, 21:57:59 ) *
No jak jest za mało postów to do dołu przegląrki, tam gdzie się kończy okno strony. A jeżeli jest więcej postów to ma przylegać do ostatniego posta bo wtedy powstaje suwak i jedzie się dalej niż przeglądarka.



A czytałaś mój post wcześniej ?

  1.  
  2. #stopka {
  3. position: fixed;
  4. bottom: 0;


zawsze będziesz miał na dole stopkę eh ?
Rewil
No prawda, ale jak zmniejszysz okno to stopka nachodzi na posty, a ma się porostu zatrzymać przed nimi ;>.
pedro84
Cytat(Rewil @ 2.05.2010, 22:13:54 ) *
No prawda, ale jak zmniejszysz okno to stopka nachodzi na posty, a ma się porostu zatrzymać przed nimi ;>.

Czyli generalizując, ma być cały czas na dole strony, po zawartością, bez względu na to, ile tej zawartości jest. Wykorzystaj ten przykład co ci dałem, przejrzyj jego źródła (są tam linki).
Rewil
Cytat(piotrooo89 @ 2.05.2010, 13:30:33 ) *
może podasz trochę kodu? jakis link do strony? bo jak Ci mamy pomóc?

Problem rozwiązany.

  1. *{
  2. margin: 0;
  3. padding: 0;
  4. }
  5.  
  6. html, body{
  7. height: 100%; /* Required */
  8. }
  9.  
  10. #srodek_strony {
  11. margin: 0 auto;
  12. width: 900px;
  13. position: relative;
  14. min-height: 100%; /* For Modern Browsers */
  15. height: auto !important; /* For Modern Browsers */
  16. height: 100%; /* For IE */
  17. overflow:hidden;
  18. }
  19.  
  20. #stopka {
  21. width: 100%;
  22. position: absolute;
  23. bottom: 0 !important;
  24. bottom: -1px; /* For Certain IE widths */
  25. height: 40px;
  26. }


  1. <div id="srodek_strony">
  2. Zawartość strony.
  3. <div id="stopka">
  4. Jakiś tekst na stopce.
  5. </div>
  6. </div>
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.