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:

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

Code:

<!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

Code:

.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

Originally Posted by crirus

use CSS classes below depending on the position

Code:

.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.

Code:

<?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 )

Code:

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 !!! )

Code:

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

~ Cheers

M
XMLA

Thread: Facebook bottom bar.

Thread Tools

Search Thread

Facebook bottom bar.

The Following User Says Thank You to ipuck For This Useful Post:

The Following User Says Thank You to ipuck For This Useful Post:

The Following User Says Thank You to Nile For This Useful Post:

The Following User Says Thank You to ipuck For This Useful Post:

Facebook CSS Bottom Bar

Bookmarks

Bookmarks

Posting Permissions