6 replies [Last post]
skhan007
Offline
newbie
Bangladesh
Last seen: 6 years 2 weeks ago
Bangladesh
Joined: 2008-12-04
Posts: 3
Points: 0

Dear All,

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.

-S.Khan

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 3 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

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.

IE6 and below also simply need Javascript to do this, and they still don't do it really well. It calculates how far from the top of the document the browser bottom is. Meaning you can scroll down forever and ever : )

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.

I can post a link to either of my static builds of the sites where I have this (where you can also see the problem in browsers that can't go wider than 800 px) if you want. The Javascript is in the CSS using IE-only CSS expressions.

I'm no expert, but I fake one on teh Internets

skhan007
Offline
newbie
Bangladesh
Last seen: 6 years 2 weeks ago
Bangladesh
Joined: 2008-12-04
Posts: 3
Points: 0

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.

-S.Khan

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 3 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

OK. So you can look at it

OK.

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>

<span style="font-weight:bold">100% height stuff</span>
html, body {
  height: 100%;
}
 
body {
/*...stuff here...*/
  position: relative; /*stabiliseren van IE*/
}
 
#container, #navigation {
  min-width: 760px;
  position: relative; <span style="font-weight:bold"> this you need on your footer, position: relative;</span>
}
 
/*IE6 hack for min-width... skipped*/
 
#container {
  min-height: 100%; <span style="font-weight:bold">100% height model again</span>
  font: normal 1em/1.5em arial, helvetica, sans-serif;
}
* html #container {
  height: 100%; /*IE6*/
}
<span style="font-weight:bold">here's footer:</span>
#navigation {
  width: 100%;
  background-color: #34769a;
  border-top: 1px solid #fff;
  position: fixed; 
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
 
<span style="font-weight:bold">IE6 and below don't understand position: fixed... if you need to support them,
you'll need this... does NOT work on browsers who have Javascript turned off!</span>
* html #navigation {
  position: absolute;
  width: 100%;/*IE5.5*/
  bottom: 0;
  left: 0;
  overflow: visible; <span style="font-weight:bold">earlier had overflow: hidden on various things... you might not need this line</span>
  top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}<span style="font-weight:bold">that was the CSS Expression for position: fixed at the bottom of the page.  I don't Javascript so this
is a copy and not necessarily the best code to get the effect, but it works</span>
 
<span style="font-weight:bold">the rest is my menu inside.</span>
#navmenu {
  margin: 0 auto;
  position: relative;
  z-index: 10;
  width: 50em;<span style="font-weight:bold">so I could center it within #navigation</span>
}
 
	#navmenu li {
	  display: inline;
	  padding: 0 5px;
	  background-color: #34769a;
	}
	 #navmenu a {
	  font: bold 16px/36px baskerville, times, "times new roman", serif;
	  text-decoration: underline;
  	  text-align: center;
	  color: #fff;
	  white-space: nowrap;
	}
	#navmenu a:focus, #navmenu a:hover, #navmenu a:active {
  	  color: #a9076a;
	}

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.

I'm no expert, but I fake one on teh Internets

skhan007
Offline
newbie
Bangladesh
Last seen: 6 years 2 weeks ago
Bangladesh
Joined: 2008-12-04
Posts: 3
Points: 0

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.

-S.Khan

Cornflakes
Cornflakes's picture
Offline
newbie
Southern Tennessee, USA
Last seen: 5 years 19 weeks ago
Southern Tennessee, USA
Timezone: GMT-5
Joined: 2009-08-03
Posts: 1
Points: 0

Thanks!!

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! Smile

Thank you! -c :thumbsup:

Programmertobe
Offline
newbie
Last seen: 5 years 13 weeks ago
Joined: 2009-09-18
Posts: 1
Points: 0

thank you thank you thank

thank you thank you thank you!!!