Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Facebook bottom bar.

  1. #1
    Join Date
    Aug 2006
    Posts
    6
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default Facebook bottom bar.

    Hello

    I'm looking for a script to add a bar at the bottom of the page like facebook. See image attachment.

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

    hmsnacker123 (04-20-2008)

  3. #2
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    are you talking about the Friends online, the open book or the silhouette&green dot

  4. #3
    Join Date
    Aug 2006
    Posts
    6
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default

    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.

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

    hmsnacker123 (04-20-2008)

  6. #4
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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>
    Jeremy | jfein.net

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

    hmsnacker123 (04-20-2008)

  8. #5
    Join Date
    Aug 2006
    Posts
    6
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default

    Excellent thanks.

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

    hmsnacker123 (04-20-2008)

  10. #6
    Join Date
    May 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  11. #7
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

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

  12. #8
    Join Date
    May 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

  13. #9
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Quote Originally Posted by crirus View Post
    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.

  14. #10
    Join Date
    Apr 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Facebook CSS Bottom Bar

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •