Hardwarez Posted March 6, 2008 Share Posted March 6, 2008 ??? I need my header, navigation buttons, and footer to stay put when scrolling. When I set header to not scroll it all falls apart Here is what I have: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <style type="text/css"> html, body { height: 100%; } #container { min-height: 100%; position: relative; } #header { margin:0; padding:0; background-color:gray; color:white; z-index: 3; } #nav { position: absolute; top:37px; float:left; width:100%; float:left; margin:0; padding:0; border-left:1px solid gray; z-index: 3; } #footer { height: 10px; width: 100%; position: absolute; top:59px; margin:0; padding:0; background-color:gray; color:white; z-index: 3; } #content { position: absolute; top:80px; } </style> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="author" content="Mr ME"> <title>WTF</title> </head> <body> <div id="container"> <div id="header"><h1 class="header">Productivity</h1></div> <div id="nav" align="center"> <input type="submit" name=btn value="A Button"> <input type="submit" name=btn value="Another Button"> <input type="submit" name=btn value="Log Out"> </div> <div id="footer"></div> <div id="content"> This is where the content goes... Will be many many pages of ' stuff ' </div> </div> </body> </html> Looks like I want it at that point, but when I add position:absolute; to the header, nav, and footer it all falls apart... Well to be more clear its all fine until I add it to the header. #header { margin:0; padding:0; background-color:gray; color:white; z-index: 3; position:absolute; } Link to comment https://forums.phpfreaks.com/topic/94732-i-need-my-header-navigation-buttons-and-footer-to-stay-put-when-scrolling/ Share on other sites More sharing options...
Hardwarez Posted March 6, 2008 Author Share Posted March 6, 2008 I meant position: fixed; Link to comment https://forums.phpfreaks.com/topic/94732-i-need-my-header-navigation-buttons-and-footer-to-stay-put-when-scrolling/#findComment-485032 Share on other sites More sharing options...
haku Posted March 7, 2008 Share Posted March 7, 2008 Got a link? Link to comment https://forums.phpfreaks.com/topic/94732-i-need-my-header-navigation-buttons-and-footer-to-stay-put-when-scrolling/#findComment-485720 Share on other sites More sharing options...
eddierosenthal Posted March 9, 2008 Share Posted March 9, 2008 use position fixed and give it a top and left position to fix it to. Link to comment https://forums.phpfreaks.com/topic/94732-i-need-my-header-navigation-buttons-and-footer-to-stay-put-when-scrolling/#findComment-487889 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.