Super Tip! How to Create that floating Facebook toolbar at the bottom of the page!


Help! I’d like to create a toolbar similar to facebook that is locked in the bottom of the screen.

Introduction Facebook is such a great website – usability, features, speed, you name it, facebook has it. One of facebook’s most useful feature is the toolbar that is being displayed to the bottom of the page. This post is made to do just about that. Follow these easy steps to create a Facebook-toolbar clone in no time at all!

_Solution_ Using the following steps, you would be able to duplicate the look of the Facebook toolbar. 1.) First, copy the following css and paste them inside your <header> tag.

html { height: 100%; } body { height: 100%; } #wrapper { position: relative; min-height: 100%; } * html #wrapper { height: 100%; } #content { padding-bottom: 25px; } #toolbar_outer { bottom:0; color:#111111; font-size:11px; height:25px; padding:0; position:fixed; right:0; width:100%; z-index:99; } #toolbar_outer { position: relative; margin-top: -26px; } #toolbar { background:#aaa; border-right:1px solid #b5b5b5; overflow:visible !important; margin-left:15px; margin-right:15px; position:relative; } #toolbar ul { height: 25px; background: #e5e5e5; border-top: 1px solid #eee; border-left: 1px solid #ddd; } #toolbar ul li { float: left; padding: 5px; font: normal 110% "lucida grande", tahoma, verdana, arial; border-right: 1px solid #aaa;}

Important: The only drawback here is you’ll need to know the height of your toolbar (not really a problem, you should know that anyway). I’ve highlighted the properties above that you will probably want to edit.

2.) Finally, Paste this in your <body> tag.

    <div id=”wrapper”>        <div id="content">          <!– Your Content Goes Here –>        </div>     </div>     <div id="toolbar_outer">       <div id="toolbar">       <!– Toolbar –>        <ul>          <li>Applications</li>        </ul>       </div>     </div>
  1. (Optional) You can also download everything above here.

Well, that’s everything there is to it really! Don’t forget to thumb this up and share with others!

2 Comments on “Super Tip! How to Create that floating Facebook toolbar at the bottom of the page!”

  1. 1 Ray said at 2:29 AM on April 6th, 2010:

    really now? how about your e-guru huh.. how was it.. ??? 😀

  2. 2 keithics said at 8:08 PM on July 3rd, 2010:

    thanks! I need this one. works great on IE6.

Leave a Reply