Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Stopka u dolu strony
Forum PHP.pl > Forum > Przedszkole
Raven1122
Witam, kombinowalem nad "Sticky Footer" no i wykombinowalem cos takiego:

www.emes-systems.pl/test/css/style.css

Stopka znajduje sie juz na dole strony gdy za malo tresci, lecz jak juz jest za duzo tresci, czyli pojawia sie scroller. Jakies rozwiazania?
Mega_88
Twój link nie działa, ale ja jak chce uzyskać efekt o którym piszesz korzystam z JS. Wytnij co nie potrzebne czyli .fancybox i #myList, a reszte wedlug swoich potrzeb.

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $('.fancybox').fancybox();
  4. $('#myList').listnav({
  5. includeAll: true,
  6. includeOther: false,
  7. flagDisabled: true,
  8. noMatchText: 'Brak wyników',
  9. showCounts: true,
  10. cookieName: 'moja-lista'
  11. });
  12.  
  13. var myHeight = 0;
  14. if( typeof( window.innerHeight ) == 'number' ) {
  15. myHeight = window.innerHeight;
  16. } else if( document.documentElement && document.documentElement.clientHeight ) {
  17. myHeight = document.documentElement.clientHeight;
  18. } else if( document.body && document.body.clientHeight ) {
  19. myHeight = document.body.clientHeight;
  20. }
  21.  
  22. var top = $('#top').height();
  23. var middle = $('#middle').height();
  24. if(myHeight>(top+middle+100)) { $('#footer').css({"position":"absolute","bottom":0}); }
  25.  
  26. $(window).resize(function() {
  27. var myHeight = 0;
  28. if( typeof( window.innerHeight ) == 'number' ) {
  29. myHeight = window.innerHeight;
  30. } else if( document.documentElement && document.documentElement.clientHeight ) {
  31. myHeight = document.documentElement.clientHeight;
  32. } else if( document.body && document.body.clientHeight ) {
  33. myHeight = document.body.clientHeight;
  34. }
  35.  
  36. var top = $('#top').height();
  37. var middle = $('#middle').height();
  38. if(myHeight>(top+middle+100)) { $('#footer').css({"position":"absolute","bottom":0}); }
  39. else $('#footer').css({"position":"static","bottom":"auto"});
  40. });
  41. });
Raven1122
juz link dziala, bo edytowalem ale nie bardzo ogarniam js ;p
pedro84
Cytat(Raven1122 @ 29.01.2012, 19:29:08 ) *
Witam, kombinowalem nad "Sticky Footer" no i wykombinowalem cos takiego:

www.emes-systems.pl/test/css/style.css

Stopka znajduje sie juz na dole strony gdy za malo tresci, lecz jak juz jest za duzo tresci, czyli pojawia sie scroller. Jakies rozwiazania?

http://www.cssstickyfooter.com/

Przeczytaj, zrozum i zastosuj.
Raven1122
Czytalem, ale jakos nie dziala ;p
pedro84
Cytat(Raven1122 @ 29.01.2012, 19:59:48 ) *
Czytalem, ale jakos nie dziala ;p

Po rzuceniu okiem w Twój styl widać, że:
a) nie czytałeś
cool.gif nie zrozumiałeś

Jeśli a, czytaj jeszcze raz.
Jeśli b, czytaj do skutku, nikt za Ciebie tego nie zrozumie.
Raven1122
Czytalem, tyle ze t jest swiezy styl, bo tamten juz edytowalem. Takie pytanie, mam zrobic nowe divy, czy zastosowac to na swoich?

www.emes-systems.pl/test/

Bo zastosowaniu tego sticky footer

Refresh
Damonsson
Ale zaraz...zaraz...tobie chodzi o to żeby stopka była ZAWSZE widoczna na ekranie (przyklejona do okna przeglądarki)?

To wtedy nie jest sticky footer.
ShadowD
Jeśli chcesz stopkę przyklejoną do dołu i zawsze widoczną tak jak top na cmsss.pl to position absolute, bottom:0px...
prowseed
Zawsze widoczna? To raczej position: fixed;
I wlasnie to ja rozumiem pod pojeciem sticky footer.
Natomiast jesli chcesz stopke ktora zawsze jest na dole niezaleznie od rozdzielczosci, to tak jak powiedzial przedmowca + margines dolny dla calej tresci by nie zakrywala przypadkiem czegos.
Raven1122
emes-systems.pl/test/?page=cennik

Stopka zostala dziwnie w miejscu ;p

Damonsson sorr, nie oto chodzilo, chodzi mi o sticky foooter
pedro84
Weź się chłopie ogarnij i zdecyduj co Ty chcesz!

Jeśli sticky footer, to ją po prostu zimplementuj w swoim kodzie.
Raven1122
Pedro -.-" WCIAZ MOWIE ZE CHCE STICKY FOOTER, A WY MI NARZUCACIE ZE JA CHCE ZAWSZE U DOLU PRZEGLADARKI. Nie ja chce tylko zeby zawsze bylo u dolu strony, nie wazne ile tresci, zawsze bedzie u dolu (nie okna przegladarki)

EDIT //
Jak implementuje to mi sie cala strona rozjezdza
CuteOne
To chyba mylisz pojęcia... w dodatku obwiniasz innych, że nie rozumieją Twojego BŁĘDU - ogarnij się

U góry ktoś podał ci link do odpowiedniej strony gdzie masz napisane w jaki sposób go zaimplemetować , więc powiem ponownie - ogarnij się
Raven1122
Pytalem sie, czy mam zrobic nowe divy, czy zastosowac to na swoich?
Bo jak to robie to cala strona mi sie rozwala
CuteOne
Opcje:
1. Znasz HTML i wiesz gdzie leży problem
2. Piszesz sobie stronę testową np. index2.html gdzie wkleisz kod z tamtego linku. Następnie stopniowo dodajesz kod ze swojego macierzystego kodu aż zobaczysz, że coś jest nie tak. I już wiesz co trzeba naprawić
3. Przepisujesz wszystko na nowo ;D
Raven1122
tongue.gif Jak mozecie, to looknijcie moj CSS, robilem tak o : Kod Wraper dawalem do #container, #main jako #content no i Footer do footer, co jest zle? ;p

CSS zaktualizowany jest w srodku ten kod, wiec co teraz jest zle? ;p
pedro84
Potrafisz przeczytaj i zrozumieć parenaście linijek CSS? Przecież to ręce opadają.

Gdzie Ty niby dodałeś ten kod?
Raven1122
Divy:
#container, #content, #footer i na samej gorze * i body
lobopol
Zrób tak jak ci CuteOne napisał, skopiuj całą stronę sticky footer i dodawaj kolejne elementy. Prościej tego nie zrobisz.
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.