Can you please tell me how do I create a fixed DIV at the bottom of a page even if the page scrolls just like Facebook's bottom menu? I shall be making this DIV into a menu. Also, the Facebook menu is flicker-less. I saw in some webpages, where the menu stays at the bottom, but flickers a lot. I wanted to know how to create a flicker-less DIV.
They're not the best of
They're not the best of ideas, as I've got one of those footers on two sites with menus. The danger with them is that they don't allow the scrollbar to scroll if your menu is wider than the browser window.
But basically what you want is a footer which is the direct child of the body (and if you're smarter than me, you'll stick it AFTER the container box which is holding the rest of your page) and set to position: fixed, bottom: 0; left: 0; and maybe right: 0 for kicks. That's basically it.
Please post the link of the static pages so that I can check it.
Dear Stomme poes,
Yes, please post the link of the static pages so that I can have a look at the menu.
Thank you for the reply.
OK. So you can look at it
So you can look at it in use, here's an example page.
I'm using a 100% height model with this page, and I've never tried a fixed footer in a page that wasn't, so I'll include that code too:
...doctype, head-title-head... <body> <div id="navigation"><span style="font-weight:bold">this is my footer... used to be called "footer" but it's not, really</span> <ul id="navmenu"> <li><a id="skipnav" href="main.pl#content">Home</a></li> <li><a href="main.pl?page=zoeken">Zoeken</a></li> <li><a href="main.pl?page=contact">Contact</a></li> <li><a href="main.pl?page=voorwaarden">Voorwaarden</a></li> <li><a href="main.pl?page=adverteren">Adverteren</a></li> <li><a href="main.pl?page=nieuws">Nieuws</a></li> <li><a href="main.pl?page=makelaars">Samenwerkende organisaties</a></li> <li><a href="main.pl?page=links">Links</a></li> </ul> </div> <div id="container"> ...rest of the page here... </div> </body> </html>
Floating the anchors like I normally do wasn't so great here.
Take the page from the link and shrink your browser. Yes, I have a min-width so scrollbars appear if you try to get slimmer than 800px wide-- however notice how the footer doesn't scroll. I actually have left some things out of the menu that I am told must be added in-- likely this will mean I will have a two-row menu, otherwise information is lost on smaller resolutions (yes, I build for them).
Another issue is, even though I have the footer as the first child of the body, even setting it as the last child of the body didn't help for IE with JS turned off. The footer should just sit at the bottom of the #container in normal CSS, right? But it doesn't. It tends to sit at the bottom of the SCREEN and stick there, obscuring content in the middle of the document.
Which is why you'll need to be doing some strong testing with this and be very careful.
Thank you very very much for the fixed DIV menu at screen bottom
Dear Stomme poes,
Thank you very very much. I really appreciate your help regarding this issue.
Hi, I'm just a random person who found this thread on google...I created an account just to thank you for this. It was the perfect solution for my problem. Dare I say it? ...Genius!
Thank you! -c :thumbsup:
thank you thank you thank
thank you thank you thank you!!!