Log in

View Full Version : Facebook bottom bar.


ipuck
04-18-2008, 05:32 PM
Hello

I'm looking for a script to add a bar at the bottom of the page like facebook. See image attachment.
boogyman
04-18-2008, 06:04 PM
are you talking about the Friends online, the open book or the silhouette&green dot
ipuck
04-18-2008, 06:10 PM
I talking about the actually bar where, if I can get it, I'll be able to add links or short cuts to a different parts of my site. It will be like a second main menu, without cluttering my main menu.
Nile
04-18-2008, 06:11 PM
He just wants to know how to make it.
Try this code:


<style type="text/css">
#bottom {
width: 98.5%;
position: fixed;
bottom: 0px;
background: #18f8f8;
text-align: center;
}
</style>
<div id="bottom">Stuff goes here</div>
ipuck
04-18-2008, 06:17 PM
Excellent thanks.
cordoprod
05-15-2008, 05:20 PM
In firefox it follows the page when you scroll, in IE7 you have to scroll to the bottom to see it.. how do i fix that?
mburt
05-15-2008, 08:21 PM
<!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>
crirus
05-14-2009, 07:08 AM
use CSS classes below depending on the position



.k_float{z-index:9999999;position: fixed !important;position:absolute;}
#kampylink img{border: 0;}
.k_top{top:0px;_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.scrollTop : document.body.scrollTop);}
.k_bottom{bottom:0px;_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.scrollTop + (document.documentElement.clientHeight-this.clientHeight) - 1 : document.body.scrollTop + (document.body.clientHeight-this.clientHeight) - 1);}
.k_right{right:0px;}
.k_bottom_28{*top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.scrollTop + (document.documentElement.clientHeight-this.clientHeight) - 28 : document.body.scrollTop + (document.body.clientHeight-this.clientHeight) - 28)}
Medyman
05-14-2009, 02:15 PM
use CSS classes below depending on the position



.k_float{z-index:9999999;position: fixed !important;position:absolute;}
#kampylink img{border: 0;}
.k_top{top:0px;_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.scrollTop : document.body.scrollTop);}
.k_bottom{bottom:0px;_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.scrollTop + (document.documentElement.clientHeight-this.clientHeight) - 1 : document.body.scrollTop + (document.body.clientHeight-this.clientHeight) - 1);}
.k_right{right:0px;}
.k_bottom_28{*top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.scrollTop + (document.documentElement.clientHeight-this.clientHeight) - 28 : document.body.scrollTop + (document.body.clientHeight-this.clientHeight) - 28)}



That's really overkill. You don't need all those IE-specific expressions in there.
xmla
04-10-2010, 01:55 AM
index.html or whatever.


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Bottom Facebook Bar</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->
</head>
<body>

<div id="content">
Main Page content
</div>

<div id="footer">
<div class="content">
### Left Content
<div style="float: right">
### Right Content
</div>
</div>
</div>

</body>
</html>


style.css ( primary CSS File )


body {
margin: 0px 0px 0px 0px;
background-color: #EDEBE2;
color : #000000;
padding: 0 0 36px 0;
}
body, input, select, textarea, td, th, optgroup {
font-family: Tahoma,Arial,Helvetica,sans-serif;
font-size: 11px;
}
th {
text-align: left;
}

a:link, a:visited, a:active, a:hover {
color: black;
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

#footer {
bottom: 0;
left: 0;
width: 100%;
height: 32px;

border-top: 1px solid #BEBCB5;
background-color: white;
padding: 0px;
}
#footer .content {
padding: 8px;
}
@media screen{
#footer{
position: fixed;
}
}

#footer a:link, #footer a:visited, #footer a:active, #footer a:hover {
color: black;
font-weight: normal;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}


ie6.css ( haven't we stop supporting this browser yet. HTML 5 !!! )


#footer {
position: absolute;
}
#content .block .content {
width: 95%;
}


~ Cheers

M
XMLA
BLiZZaRD
04-10-2010, 02:47 AM
Not to be rude... but first post ever here, and you are going to revive an almost 1 year old topic? Interesting...
prionkor
05-17-2010, 08:04 PM
Here is a tutorial. check this out...

http://www.bennadel.com/blog/1740-Building-A-Fixed-Position-Bottom-Menu-Bar-ala-FaceBook-.htm
djr33
05-17-2010, 08:22 PM
This discussion is 3 years old. I'm closing it. If someone wants to ask a new question on the topic, go ahead.
But please take a look at the date before replying.
However, the post may be useful if someone else comes across this when they have the same question.