cornishpirate Posted March 30, 2008 Posted March 30, 2008 Here's the problem: If a page takes up less than its window (ie no scrolling) I want to put my footer block right at the bottom of the window. The latter part seems straightforward - see Example but I can't see how to correctly evaluate the condition! Any ideas?
Avec Posted March 30, 2008 Posted March 30, 2008 Probably fairly easy using CSS. CSS Position also try CSS Expert
♥FWR Media Posted March 30, 2008 Posted March 30, 2008 This any good? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Fix footer</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <style type="text/css" media="screen"> html, body { margin:0; padding:0; height:100%; } #container { min-height:100%; position:relative; } #header { background:#ff0; padding:10px; } #body { padding:10px; padding-bottom:60px; /* Height of the footer */ } #footer { position:absolute; bottom:0; width:100%; height:60px; /* Height of the footer */ background:#6cf; } </style> </head> <body> <div id="container"> <div id="header">header content</div> <div id="body">all content in here - including columns/sidebars if any </div> <div id="footer">This is the new bottom bar</div> </div> </body> </html> Ultimate SEO Urls 5 PRO - Multi Language Modern, Powerful SEO Urls KissMT Dynamic SEO Meta & Canonical Header Tags KissER Error Handling and Debugging KissIT Image Thumbnailer Security Pro - Querystring protection against hackers ( a KISS contribution ) If you found my post useful please click the "Like This" button to the right. Please only PM me for paid work.
Avec Posted March 30, 2008 Posted March 30, 2008 The added code belongs in the page not the CSS. The CSS code would be something like #container { position:absolute; left:100px; top:150px; } #footer { position, etc, etc
♥FWR Media Posted March 30, 2008 Posted March 30, 2008 The added code belongs in the page not the CSS. The CSS code would be something like #container { position:absolute; left:100px; top:150px; } #footer { position, etc, etc I offered a potential solution Jeffrey, all you are offering is links and odd corrections Ultimate SEO Urls 5 PRO - Multi Language Modern, Powerful SEO Urls KissMT Dynamic SEO Meta & Canonical Header Tags KissER Error Handling and Debugging KissIT Image Thumbnailer Security Pro - Querystring protection against hackers ( a KISS contribution ) If you found my post useful please click the "Like This" button to the right. Please only PM me for paid work.
cornishpirate Posted March 30, 2008 Author Posted March 30, 2008 Thanks everyone for your input. Robert: just tried yours - seems to handle exactly what I need. Will incorporate into osC tonight and give an update. Alan
Avec Posted March 30, 2008 Posted March 30, 2008 Actually, I added what I have done with div and CSS. I also added a link to help the OP further. Glad you got it working the way you wanted
cornishpirate Posted March 30, 2008 Author Posted March 30, 2008 Well, it works perfectly embedded in osC in Firefox and Safari, but IE7 positions footer at window base even when content is larger. Strange, as the testbed works.
cornishpirate Posted March 31, 2008 Author Posted March 31, 2008 Actually, I added what I have done with div and CSS. I also added a link to help the OP further. Glad you got it working the way you wanted Jeffrey Not sure what you mean here. Alan
Avec Posted March 31, 2008 Posted March 31, 2008 Not sure what you mean here. You can define various Div's in your CSS file, it looks like you are doing it differently - in the top of your html/php page. It uses the same code, but separates it into two parts. I initially did not realize you were doing it together, saw the DIV definitions and thought you were already working with the CSS. After looking at it, I see that is not the case. As long as it works for you and the FWR, then no need to change what you have.
cornishpirate Posted March 31, 2008 Author Posted March 31, 2008 Thanks - It now works. Trial & Error led me to getting DOCTYPE right. It clearly matters more to IE7 than Firefox or Safari (which by the way seems much faster than FF or IE7) Alan
Recommended Posts
Archived
This topic is now archived and is closed to further replies.