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; } Quote Link to comment Share on other sites More sharing options...
Hardwarez Posted March 6, 2008 Author Share Posted March 6, 2008 I meant position: fixed; Quote Link to comment Share on other sites More sharing options...
haku Posted March 7, 2008 Share Posted March 7, 2008 Got a link? Quote Link to comment 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. 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.