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>
3. (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!
Related posts:
- Jquery Super Tip! Automatically highlight the links/menu of the current page with 1 line of code
- Super Tip: Pass Arguments in your Python Bindings using Lambda Functions
- Unix Super Tip: How to CHMOD all your files recursively
- Super Tool: (Probably) the best SQLite Editor/IDE for web development and production use
Still can't see what you're looking for?
