TalkPHP - View Single Post

Rhinos · 08-19-2009, 05:57 PM

Ok this is right out of the facebook CSS (I used firebug to inspect the bottom bar):

Code:

body #presence {
  bottom: 0;
  color: #111111;
  font-size: 11px;
  height: 25px;
  padding: 0;
  position: fixed;
  right: 0;
  width: 100%;
  z-index: 99;
}

What you see here is that instead of using absolute positioning, they use fixed positioning. This will keep it in place regardless of scrolling.

The z-index is used so that it stays above the other content on the page (and any embedded flash that may be on the page).

On facebook they also have another div inside the div that uses the above code that is 100% width and uses a margin to make the gaps on the left and right of the bar.

08-19-2009, 05:57 PM	#4 (permalink)
Rhinos The Wanderer Join Date: Aug 2009 Posts: 17 Thanks: 0	Ok this is right out of the facebook CSS (I used firebug to inspect the bottom bar): Code: body #presence { bottom: 0; color: #111111; font-size: 11px; height: 25px; padding: 0; position: fixed; right: 0; width: 100%; z-index: 99; } What you see here is that instead of using absolute positioning, they use fixed positioning. This will keep it in place regardless of scrolling. The z-index is used so that it stays above the other content on the page (and any embedded flash that may be on the page). On facebook they also have another div inside the div that uses the above code that is 100% width and uses a margin to make the gaps on the left and right of the bar.