dalewb Posted January 29, 2007 Share Posted January 29, 2007 Hi,To forestall what I think might be a kneejerk reaction on what is for sure a common topic here, I have done some research into this subject. Footerstick and footerstickalt don't function nearly as well as what Bungie did with their website - and darn if I can understand how they did it. Does anyone here know how they managed to construct their footer and make it stick to the bottom of the web browser window in such a rock-solid way? I mean, it doesn't jerk with the window movement, as if it is part of the browser itself.Footerstickalt is cool, but if the content of your website is longer than the browser window, the footer will be attached to the end of the document - it won't hover over it like the footer does at bungie.net.The closest I got to an answer was a technical document at http://msdn2.microsoft.com/en-us/library/ms978497.aspx, but it merely goes over the backend part of the site, not its design.Thanks! Link to comment Share on other sites More sharing options...
feck Posted January 31, 2007 Share Posted January 31, 2007 looking at their style sheet they look to have positioned the footer twice: <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb"><head><title> New Document </title><link rel="stylesheet" type="text/css" href="styles.css"/></head><body><div id="header"><h1>Hello From Inside the fixed header</h1></div><!--header--><div id="content"><h2>This is another header</h2><p>This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. This is some text from inside a paragraph. </p></div> <!-- content --><div id="footer"><p>This paragraph is inside a fixed footer div</p></div> <!-- footer --></body></html> And the style-sheet: body { font-family: serif;}body>div#footer,body>div#header { position:fixed; left: 0; color:blue; width: 100%; padding: 5px; border: 3px solid black; background-color:white; text-align: center;}#header,#footer{ position: absolute; }#footer{ bottom: 0;}#header{ top:0; margin-bottom: 5px;}#content { margin-top: 100px;} Link to comment Share on other sites More sharing options...
dalewb Posted February 10, 2007 Author Share Posted February 10, 2007 Hey thanks for posting that! After a day I just assumed no one was going to respond and I wasn't informed anyone had replied. I can tell you have much better understanding of CSS than the average Joe. For example "body>div#footer,body>div#header {" is something I've never seen before in VERY mature 7 months of programming with CSS . I really am not sure what that line is doing, or why it is structured that way.This is super cool - thanks man! Link to comment Share on other sites More sharing options...
dalewb Posted February 10, 2007 Author Share Posted February 10, 2007 .. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now