fesan Posted August 22, 2009 Share Posted August 22, 2009 Hi... I've spent several hours now trying to place my footer at the bottom of my page(not the screen). I have tried to use only a picture, a background, and a div with a background image. But still it won't place it self in the bottom of the page. I've followed several tutorials and none of them work. Now I have set up this tutorial: http://www.themaninblue.com/writing/perspective/2005/08/29/ with no other code that whats in the tutorial. But when i implement it to my code the foother either ends up beneath my logo or at the bottom of the screen and not the page. I Read somewhere that the values that make a footer depends on the values on all the other divs as well. Well not all but the position: value. Can someone tell me what I'm doing wrong?? Thanks in advance! HTLM code: <body> <div id="wrap"> <div id="logo_bg"><img src="img_set/logo.png" width="700" height="150" /></div> <div id="meny"><img src="img_set/menu_choise.png" width="215" height="276" /></div> <div id="main"> <?php include("switch.php"); ?> </div> </div> <div id="footer"></div> </body> CSS Code: @charset "iso-8859-1"; /* CSS Document */ html{ height:100%; } body { height:100%; padding: 0px; margin: 0px; background-color: #F4D09B; } #wrap { position: relative; min-height: 100%; padding-bottom: 9em; } * html #nonFooter { height: 100%; } #logo { top: 10px; left: 0px; background-image: url(../img_set/logo_shadow.png); background-repeat: repeat-x; } #logo_bg { background-image: url(../img_set/logo_bg.png); background-repeat: repeat-x; height:163px; } #meny { position:absolute; height: auto; width: 200px; top: 192px; left: 42px; } #main { position:absolute; height: auto; width: 631px; left: 300px; } #footer { background-image:url(../img_set/bottom-whole.png); background-repeat:repeat-x; position: relative; margin-top: -7.5em; } Quote Link to comment Share on other sites More sharing options...
lostprophetpunk Posted August 22, 2009 Share Posted August 22, 2009 You can put your code as this... #footer { position: absolute; bottom: 0px; } Then simply put 'margin: auto;' in your wrap div. Also...you are missing from your HTML the ending tag for the 'wrap' div. Quote Link to comment Share on other sites More sharing options...
fesan Posted August 22, 2009 Author Share Posted August 22, 2009 Added the values to #footer, but still no good. Now the footer is gone, not in the page at all. This is what frustrates me... This should be easy, to place a div at the bottom of the page regarding the length of the contents. And there is not missing a closing tag for the wrap div. Count again! Quote Link to comment Share on other sites More sharing options...
lostprophetpunk Posted August 22, 2009 Share Posted August 22, 2009 Added the values to #footer, but still no good. Now the footer is gone, not in the page at all. This is what frustrates me... This should be easy, to place a div at the bottom of the page regarding the length of the contents. And there is not missing a closing tag for the wrap div. Count again! Sorry, I forgot to mention that you have to specify a height for the footer. Also, stick the footer in the wrap if the wrap is wrapping the rest of the content. Quote Link to comment Share on other sites More sharing options...
haku Posted August 22, 2009 Share Posted August 22, 2009 your problem is that you are using absolute positioning for the main content. You shouldn't do this, as it causes problems that compound the more you add. You are seeing some of those problems right now. Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted August 23, 2009 Share Posted August 23, 2009 your problem is that you are using absolute positioning for the main content. You shouldn't do this, as it causes problems that compound the more you add. You are seeing some of those problems right now. He's exactly right. Absolute positioning won't work with the sticky footer css. You could possibly hack it using some fancy relative positioning, but it's not worth your time. Scrap the project and start over. Quote Link to comment Share on other sites More sharing options...
fesan Posted August 23, 2009 Author Share Posted August 23, 2009 OK.... Thanks for the help guys!! Now I, changed it all around. Now all my positions are not set, so the divs take out one complete row. The footer is now adjusting to the contents of the main div, and it never rises up from the bottom, but when the content of the main is none or 1 line or so, the footer is way down there. How can i then get the footer to stay just above the screen, but not a px, to much?? @charset "iso-8859-1"; /* CSS Document */ html{ height:100%; } body { height:100%; padding: 0px; margin: 0px; background-color: #F4D09B; } * html #main { height: 100%; } #logo { top: 10px; left: 0px; background-image: url(../img_set/logo_shadow.png); background-repeat: repeat-x; } #logo_bg { background-image: url(../img_set/logo_bg.png); background-repeat: repeat-x; height:163px; } #meny { margin-left:40px; } #main { margin-left:75px; height: auto; min-height:100%; width: 631px; left: 300px; } #footer { margin-left:90px; bottom:0px; padding-bottom:-124px; } <div id="logo_bg"><img src="img_set/logo.png" width="700" height="150" /></div> <div id="meny"><img src="img_set/meny.png" width="766" height="64" border="0" usemap="#Map" /></div> <div id="main"><?php include("switch.php"); ?></div> <div id="footer"><img src="img_set/footer.png" width="600" height="100" /></div> Quote Link to comment Share on other sites More sharing options...
haku Posted August 24, 2009 Share Posted August 24, 2009 Not sure exactly what you mean - can you show a screenshot of the problem? Quote Link to comment Share on other sites More sharing options...
fesan Posted August 24, 2009 Author Share Posted August 24, 2009 jupp.... You can take a peak at http://www.fesan.cc And as you see on the first page you arrive on the footer is good. But if you click the link photo: http://www.fesan.cc/index.php?page=photo The footer is way bellow the bootom of the page and not at the bottom of the screen, maby it is impossible to get it both ways, not too high not too low. Never satisfied! Quote Link to comment Share on other sites More sharing options...
haku Posted August 24, 2009 Share Posted August 24, 2009 Google 'sticky footers' - it's not exactly what you want, but tiy might like it better than what you have. Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted August 25, 2009 Share Posted August 25, 2009 the problem is that #main shouldn't have 100% height! That makes it more than 100% when you add the other divs too! You need to be the wrapper/container div have 100% width. Google is your friend. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.