I like how Facebook keeps that toolbar on the bottom of the page.
Does that require cross-browser ninja skills?
Their JavaScript/CSS files are huge so I am having a hard time narrowing down the implementation (for learning purposes).
+3
A:
Here's a basic example. No, it doesn't require cross-browser ninja skillz. =)
<!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>
Derek Gathright
2009-07-31 21:21:31
is that how they implemented it exactly? (at a high level ofcourse)
mrblah
2009-07-31 21:35:06
It's the same concept, yes.
Derek Gathright
2009-07-31 22:02:19
+2
A:
The best is to install Firebug and see how they did it. When I see interesting things on the web, Firebug is the best way to analyze it's HTML structure, attached CSS and you can even directly modify the CSS/HTML structure to see how it changes. Everything you see on a website can be simply read. Remember, the source (HTML, CSS, JavaScript) gets delivered with it :)
Juri
2009-07-31 21:31:48
A:
That solution doesn't work well for pages that have content extending beyond the bottom of the browser window.
Try something like this instead:
<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>
Chaz
2009-09-25 16:02:19
Looks like your code got eaten. Use the "code" button (1010) to wrap it so it doesn't vanish.
S Pangborn
2009-10-06 21:19:38
A:
Can anyone provide an example that is cross-browser compatible? None of these work in IE 8.
Drew
2010-08-12 18:57:31