[css, jquery] Problem ze stopka, Stopka zawsze na samym dole strony niezaleznie od rozdzielczosci Opcje

[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:

[HTML] pobierz, plaintext 
<div id="layout">
 
	<img src="upload/images/bcg/5.jpg" id="bg" alt="" />
 
	<div id="center">
 
		<!-- htmlTop start -->
		<div id="center_top"></div>
		<!-- htmlTop end -->
 
		<!-- htmlContent start -->
		<div id="center_mid">
 
			<!-- htmlLeftMenu start -->
			<div id="left_wrapper">
 
				<div id="left">
					<img src="images/menu_logo.png" width="100%" height="100%" title="" alt="" />
 
				        <div id="LeftMenu2JS" class="menuanimate">
 
					    <div id="leftMenuLine"></div>
 
				        </div>
 
				</div>
 
			</div>
			<!-- htmlLeftMenu end -->
 
		       <div id="content_subpage" class="divanimate"></div>
 
		</div>
		<!-- htmlContent end -->
 
	</div>
 
	<div id="push"></div>
 
</div>
 
<!-- htmlFooter start -->
<div id="footer">
	<div id="footer_top">
		<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>
	</div>
</div>
<!-- htmlFooter end -->
 
</body>
</html>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
* { margin: 0; padding: 0; }
 
html, body {
	height: 100%;
 
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: left;
	color: #000;
}
 
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
 
#layout {
	margin: auto;
	width: 100%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
 
	overflow: hidden;
	text-align: center;
}
 
#center {
	margin: 0 auto;
	width: 1199px;
	height: auto;
	overflow: hidden;
	background: url('../images/top/top_bottom.png') no-repeat center 402px;
 
	position: relative;
}
 
#center_top {
	margin: 0 auto;
	width: 1199px;
	height: auto;
	overflow: hidden;
 
	position: relative;
}
 
#center_top img {
	display: block;
}
 
#center_mid {
	margin: 0 auto;
	padding-top: 30px;
	width: 1002px;
	height: auto;
	overflow: hidden;
 
	position: relative;
}
 
#left_wrapper {
	float: left;
	width: 280px;
	min-height: 540px;
	height: auto !important;
	height: 540px;
	text-align: left;
 
	position: relative;
}
 
#left {
	float: left;
	margin-top: -30px;
	width: 100%;
	min-height: 30%;
	height: auto !important;
	height: 30%;
	text-align: left;
 
	position: relative;
}
 
#content_subpage {
	margin-top: 20px;
	float: left;
	width: 650px;
	min-height: 210px;
	height: auto !important;
	height: 210px;
	text-align: left;
	background: url('../images/text_box.png') repeat;
 
	position: relative;
	margin-left: 70px;
}
 
#footer {
	margin: auto;
	clear: both;
	overflow: hidden;
	width: 100%;
	height: auto;
	background: url('../images/f_bcg.png') repeat-x top left;
 
	position: relative;
}
 
#footer_top {
	margin: 0 auto;
	width: 1199px;
	height: 15px;
	color: #fff;
}
 
#footer_text_right {
	float: right;
	position: relative;
	width: 300px;
	height: 15px;
	line-height: 15px;
	padding: 0 110px 5px 0;
	color: #7f6e87;
	font-size: 9px;
	text-align: right;
}
[HTML] pobierz, plaintext 

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:

[HTML] pobierz, plaintext 
#footer {
    background: url("../images/f_bcg.png") repeat-x scroll left top transparent;
    bottom: 0;
    clear: both;
    height: auto;
    margin: auto;
    overflow: hidden;
    position: fixed;
    width: 100%;
}
[HTML] pobierz, plaintext 

[swiezak]

Dzieki za pomoc. Stopka w tej chwili jest juz usytuowana w odpowiednim miejscu.