Geek Answers Handbook

How does Facebook hold this panel at the bottom of the page?

I love the way Facebook saves this panel at the bottom of the page.

Do you need cross ninja browser skills?

Their JavaScript / CSS files are huge, so it’s hard for me to narrow down the implementation (for training purposes).

+7
javascript css ajax toolbar
source share
4 answers

You can achieve the effect with CSS .

+8
source share

Here is a basic example. No, this does not require cross-browser ninja skills. =)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Facebook Bar</title> <style type="text/css"> body { margin: 0px; padding: 0px; overflow: hidden; } #page { margin: 10px; overflow: auto; height: 93%; } #bottom { width: 100%; background: #18f8f8; text-align: center; } </style> </head> <body> <div id="page"> Other stuff on page </div> <div id="bottom">Bottom stuff goes here</div> </body> </html>
+4
source share

It’s best to install Firebug and see how they did it. When I see interesting things on the Internet, Firebug is the best way to analyze its HTML structure, attached by CSS, and you can even directly modify the CSS / HTML structure to see how it changes. Everything you see on the website can simply be read. Remember that the source (HTML, CSS, JavaScript) comes with it :)

+1
source share

This solution does not work well for pages with content that goes beyond the browser window.

Try something like this:

 <div style="display: block; position: fixed; text-align: center; z-index:1000; bottom: 0; left: 0; width: 100%; color: #999999; clear: both; height: 15px; border-top-style: solid; border-top-width: 1px; border-top-color: #b5b6b5; background-repeat: repeat-x; border-right-style: solid; border-left-style: solid; border-right-width: 1px; border-left-width: 1px; border-right-color: #b5b6b5; border-left-color: #b5b6b5; background-color: #e7e7e7;"></div>
0
source share

More articles:


All Articles