Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Stopka na samym dole przegladarki!
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
metal
23.06.2007, 12:08:50
Witam!

Chcialbym aby stopka na mojej stronce stopka byla na samym dole przegladarki. Zrobilem tak ale gdy wprowadze wiecej tekstu tak aby na stronce pojawil sie pasek pionowy przewijania to w firefoxie stopka nie jest rozpychana przez cala strone tylko zostaje w tym samym miejscu. Pod IE 7 oraz Opera dziala ok.

oto screen: http://img220.imageshack.us/my.php?image=firebugud2.jpg

Jak temu zaradzic?

kod HTML
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
  4. <link rel="stylesheet" href="style.css" type="text/css" />
  5. </head>
  6. <body>
  7.  
  8. 	<div id="container">
  9. 		<div id="bannerTop"></div>
  10.  
  11. 		<div id="menuTop"></div>
  12.  
  13. 		<div id="content">
  14. 			<div id="menuLeft">
  15. 				fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br><br>
  16. 				fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>fdasfdasfasd<br>
  17. 			</div>
  18.  
  19. 			<div id="main">sadasdasdasdasd</div>
  20. 		</div>
  21.  
  22. 		<p style="clear: both; font-size: 0px; margin: 0px; padding: 0px;"></p>
  23.  
  24. 		<div id="footer"></div>
  25.  
  26. 	</div>
  27.  
  28. </body>
  29. </html>
[HTML] pobierz, plaintext



KOD CSS:

[HTML] pobierz, plaintext 
  1. html {
  2. 	width: 100%;
  3. 	min-height: 100%;
  4. 	height: 100%!important;
  5. 	height: 100%;
  6. 	margin: 0px;
  7. 	padding: 0px;
  8. 	text-align: center;
  9. }
  10.  
  11. body {
  12. 	width: 100%;
  13. 	min-height: 100%;
  14. 	height: 100%!important;
  15. 	height: 100%;
  16. 	margin: 0px;
  17. 	padding: 0px;
  18. 	text-align: center;
  19. }
  20.  
  21. div#container {
  22. 	margin :auto;
  23. 	width: 1000px;
  24. 	min-height: 100%;
  25. 	height: 100%!important;
  26. 	height: 100%;
  27. 	text-align: center;
  28. 	position: relative;
  29. }
  30.  
  31. div#bannerTop {
  32. 	width: 1000px;
  33. 	height: 150px;
  34. 	background-image: url('tpl/images/bannerTop.gif');
  35. 	margin: auto;
  36. }
  37.  
  38. div#menuTop {
  39. 	width: 1000px;
  40. 	height: 30px;
  41. 	background-color: #00ff00;
  42. 	margin: auto;
  43. }
  44.  
  45. div#content {
  46. 	width: 1000px;
  47. 	min-height: 500px;
  48. 	height: auto!important;
  49. 	height: 500px;
  50. 	margin: auto;
  51. 	background-color: #ff0000;
  52. 	position: relative;
  53. }
  54.  
  55. div#menuLeft {
  56. 	float: left;
  57. 	width: 150px;
  58. 	min-height: 500px;
  59. 	height: auto!important;
  60. 	height: 500px;
  61. 	background-color: #00ff00;
  62. }
  63.  
  64. div#main {
  65. 	float: left;
  66. 	width: 850px;
  67. 	min-height: 500px;
  68. 	height: auto!important;
  69. 	height: 500px;
  70. 	background-color: #ffffff;
  71. }
  72.  
  73. div#footer {
  74. 	clear: both;
  75. 	width: 1000px;
  76. 	height: 40px;
  77. 	margin: auto;
  78. 	background-color: #0000ff;
  79. 	position: absolute;
  80. 	left: auto!important;
  81. 	left: 0px;
  82. 	bottom: 0px;
  83. }
[HTML] pobierz, plaintext



Z gory dzieki za pomoc!

pozdrawiam
METAL


--------------------
tworzenie stron www - webview
guzi25
23.06.2007, 14:07:10
div#footer {
clear: both;
width: 1000px;
height: 40px;
margin: auto;
background-color: #0000ff;
margin:0px auto;
}

styl dla stopki i bedzie dobrze, namieszane masz troche w stylach:)

http://blog.html.it/layoutgala/

Tu masz gotowe layouty jest i twoj ->http://blog.html.it/layoutgala/LayoutGala36.html smile.gif
Pozdrawiam
metal
23.06.2007, 17:51:41
Ale mi nie o to chodzi.

W tym przykladowym layoucie ktory pokazales czarna stopka jest zawsze przyklejona do reszty strony nawet tak jak w tym przypadku jest mala ilosc tresci na stronie. Mi chodzi o to aby moja stopka w takim wypadku byla na samym dole okna przegladarki.

Na screenie zobacz jak moja strona wyglada gdy jest malo tresci:
http://img525.imageshack.us/my.php?image=efektre2.jpg

Ale gdy tresci jest duzo to w FF mam wlasnie problem ktory jest widoczny na screenie w pierwszym poscie.



--------------------
tworzenie stron www - webview
abc667
23.06.2007, 18:11:49
no wg mnie zachowuje się tak jak powinno, 

[HTML] pobierz, plaintext 
  1. position: fixed;
[HTML] pobierz, plaintext


tak ma być
gekon
25.06.2007, 21:24:45
http://ryanfait.com/sticky-footer/ - czytaj z kodu.
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.