Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css, jquery] Problem ze stopka
Forum PHP.pl > Forum > Po stronie przeglądarki
swiezak
Witam.
Mam problem, z ktorym nie potrafie sobie poradzic.
Znalazlem nastepujacy artykul: http://ryanfait.com/resources/footer-stick...bottom-of-page/
Chcialbym, aby stopka w postaci fioletowego paska z napisem "projekt i wykonanie" zawsze wyswietlala sie na samym dole strony, niezaleznie od rozdzielczosci.

Moj szablon strony w HTML przedstawia sie nastepujaco:
  1. <div id="layout">
  2.  
  3. <img src="upload/images/bcg/5.jpg" id="bg" alt="" />
  4.  
  5. <div id="center">
  6.  
  7. <!-- htmlTop start -->
  8. <div id="center_top"></div>
  9. <!-- htmlTop end -->
  10.  
  11. <!-- htmlContent start -->
  12. <div id="center_mid">
  13.  
  14. <!-- htmlLeftMenu start -->
  15. <div id="left_wrapper">
  16.  
  17. <div id="left">
  18. <img src="images/menu_logo.png" width="100%" height="100%" title="" alt="" />
  19.  
  20. <div id="LeftMenu2JS" class="menuanimate">
  21.  
  22. <div id="leftMenuLine"></div>
  23.  
  24. </div>
  25.  
  26. </div>
  27.  
  28. </div>
  29. <!-- htmlLeftMenu end -->
  30.  
  31. <div id="content_subpage" class="divanimate"></div>
  32.  
  33. </div>
  34. <!-- htmlContent end -->
  35.  
  36. </div>
  37.  
  38. <div id="push"></div>
  39.  
  40. </div>
  41.  
  42. <!-- htmlFooter start -->
  43. <div id="footer">
  44. <div id="footer_top">
  45. <div id="footer_text_right">WYKONANIE <a href="http://www.x.pl" class="screenshot" rel="images/logo_puzzle.png"><span style="color: #7f6e87">x</span></a></div>
  46. </div>
  47. </div>
  48. <!-- htmlFooter end -->
  49.  
  50. </body>
  51. </html>


  1. * { margin: 0; padding: 0; }
  2.  
  3. html, body {
  4. height: 100%;
  5.  
  6. font-family: Tahoma, Arial, Helvetica, sans-serif;
  7. font-size: 12px;
  8. text-align: left;
  9. color: #000;
  10. }
  11.  
  12. #bg { position: fixed; top: 0; left: 0; }
  13. .bgwidth { width: 100%; }
  14. .bgheight { height: 100%; }
  15.  
  16. #layout {
  17. margin: auto;
  18. width: 100%;
  19. min-height: 100%;
  20. height: auto !important;
  21. height: 100%;
  22.  
  23. overflow: hidden;
  24. text-align: center;
  25. }
  26.  
  27. #center {
  28. margin: 0 auto;
  29. width: 1199px;
  30. height: auto;
  31. overflow: hidden;
  32. background: url('../images/top/top_bottom.png') no-repeat center 402px;
  33.  
  34. position: relative;
  35. }
  36.  
  37. #center_top {
  38. margin: 0 auto;
  39. width: 1199px;
  40. height: auto;
  41. overflow: hidden;
  42.  
  43. position: relative;
  44. }
  45.  
  46. #center_top img {
  47. display: block;
  48. }
  49.  
  50. #center_mid {
  51. margin: 0 auto;
  52. padding-top: 30px;
  53. width: 1002px;
  54. height: auto;
  55. overflow: hidden;
  56.  
  57. position: relative;
  58. }
  59.  
  60. #left_wrapper {
  61. float: left;
  62. width: 280px;
  63. min-height: 540px;
  64. height: auto !important;
  65. height: 540px;
  66. text-align: left;
  67.  
  68. position: relative;
  69. }
  70.  
  71. #left {
  72. float: left;
  73. margin-top: -30px;
  74. width: 100%;
  75. min-height: 30%;
  76. height: auto !important;
  77. height: 30%;
  78. text-align: left;
  79.  
  80. position: relative;
  81. }
  82.  
  83. #content_subpage {
  84. margin-top: 20px;
  85. float: left;
  86. width: 650px;
  87. min-height: 210px;
  88. height: auto !important;
  89. height: 210px;
  90. text-align: left;
  91. background: url('../images/text_box.png') repeat;
  92.  
  93. position: relative;
  94. margin-left: 70px;
  95. }
  96.  
  97. #footer {
  98. margin: auto;
  99. clear: both;
  100. overflow: hidden;
  101. width: 100%;
  102. height: auto;
  103. background: url('../images/f_bcg.png') repeat-x top left;
  104.  
  105. position: relative;
  106. }
  107.  
  108. #footer_top {
  109. margin: 0 auto;
  110. width: 1199px;
  111. height: 15px;
  112. color: #fff;
  113. }
  114.  
  115. #footer_text_right {
  116. float: right;
  117. position: relative;
  118. width: 300px;
  119. height: 15px;
  120. line-height: 15px;
  121. padding: 0 110px 5px 0;
  122. color: #7f6e87;
  123. font-size: 9px;
  124. text-align: right;
  125. }


Ktos pomoze? Bylbym wdzieczny za wszelkie wskazowki.
s1518
Jeśli chodzi o stopke na dole strony to jeden z przykladow w google jak to zrobic: http://www.webmasterworld.com/css/4015931.htm

Ale powiem Ci, ze malo kto sie bawi w taki sztuczki.
swiezak
Klient sie uparl na stopke na samym dole ekranu przegladarki i nie moge mu tego wyperswadowac.
Zreszta zobaczcie sami jak to wyglada na chwile obecna: http://www.macdeco.webgroup.pl
Damonsson
No a gdzie ma być stopka jak nie na samym dole? Po środku?

Przeczytaj jakiś porządny artykuł o css sticky footer i problem z głowy.
morthan
może tak:


  1. #footer {
  2. background: url("../images/f_bcg.png") repeat-x scroll left top transparent;
  3. bottom: 0;
  4. clear: both;
  5. height: auto;
  6. margin: auto;
  7. overflow: hidden;
  8. position: fixed;
  9. width: 100%;
  10. }
swiezak
Dzieki za pomoc. Stopka w tej chwili jest juz usytuowana w odpowiednim miejscu.
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.