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:
<div id="layout"> <img src="upload/images/bcg/5.jpg" id="bg" alt="" /> <div id="center"> <!-- htmlTop start --> <!-- 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> </div> </div> <!-- htmlLeftMenu end --> </div> <!-- htmlContent end --> </div> </div> <!-- htmlFooter start --> <div id="footer"> <div id="footer_top"> </div> </div> <!-- htmlFooter end --> </body> </html>
* { 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; }
Ktos pomoze? Bylbym wdzieczny za wszelkie wskazowki.