justinbriggs1 Posted September 7, 2010 Share Posted September 7, 2010 Hey everyone, my site needs a static header (doesn't move), with the content scrolling underneath. I thought this could be done without any iframes, but I can't seem to remember the best way to do it. I have attached an image for reference. Thanks,JW Link to comment Share on other sites More sharing options...
Synook Posted September 7, 2010 Share Posted September 7, 2010 You just make the portion you want scrollable to be overflow:auto, with some code to stop it from exceeding the height of the window. Link to comment Share on other sites More sharing options...
Guest reshaba Posted September 7, 2010 Share Posted September 7, 2010 Synook is right!.. You can place the static header in a table and place the content in a separate table with in a div. Fix the height & width of the div according to ur requirement. But never forget to set the style='overflow:auto;' Link to comment Share on other sites More sharing options...
thescientist Posted September 7, 2010 Share Posted September 7, 2010 Synook is right!.. You can place the static header in a table and place the content in a separate table with in a div. Fix the height & width of the div according to ur requirement. But never forget to set the style='overflow:auto;'I would advise against the majority of that advice. Your suggestion of the use of tables in this situation is considered against best practices and is unsemantic. Tables should only be used for tabular data. Your suggestion for using the div could be part of the solution, just leave the tables out of it.btw, to the OP, I really like that header, especially how the icons at the top are "drawn" Link to comment Share on other sites More sharing options...
justinbriggs1 Posted September 7, 2010 Author Share Posted September 7, 2010 Thanks for the complement and all of your suggestions. I'll post back once I do some experimenting. In the meantime, can anyone provide a link to a site that does this specifically? Both me and my designer know we have seen it done, but can't seem to remember where we saw it. Thanks again. Link to comment Share on other sites More sharing options...
thescientist Posted September 7, 2010 Share Posted September 7, 2010 it shouldn't be that hard to implemement.HTML <div id="header"> <img src="header.jpg" alt=""/></div><div id="content"> <p>scrollable content (add lots of it so it exceeds the div's height)</p></div> CSS #header{ height: 100px;}#content{ height: 200px; overflow: auto;} Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.