Static toolbar at the bottom of the page

**Elson** · 09-04-2009, 06:27 AM

I am looking for a way to create a toolbar that will stay at the bottom of the page .
For example :
www.wibaya.com
www.sitesuites.ning.com

Can anyone here teach me or provide me with the javascript code that can make a toolbar like that . If you have the code that makes my HTML content to become static at the bottom please let me see .

Thank you very much !

**vwphillips** · 09-04-2009, 09:17 AM

Code:

<!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>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
  position:fixed;bottom:0px;width:100%;height:50px;background-Color:red;
}

/*]]>*/
</style></head>

<body>
<div style="height:2000px;" ></div>
<div id="tst" ></div>
</body>

</html>

**MJH** · 09-04-2009, 11:19 AM

Elson:

position: fixed doesn't work in IE6, so you need to provide for that, like this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">	


	

</script>
<style type="text/css">

	 body {height: 1500px; background-color: #f5f5f5;}
	.fixedPosition {position: fixed; bottom: 3px; left: 3%; height: 25px; width: 95%;	
		        border: 1px solid black; background-color: #f0fff0; text-align: center;
		        font-family: arial; font-size: 12pt; font-weight: bold; color: black; 
			padding-top: 10px; cursor: pointer;}

</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">

	.fixedPosition {position: absolute; 		
		        top: expression(document.documentElement.scrollTop + document.documentElement.clientHeight - this.clientHeight - 5 + "px");}			

</style>
<![endif] 
<![endif]--> 
</head>
	<body>
		<div class="fixedPosition">Something Here</div>
	</body>
</html>

Thread: Static toolbar at the bottom of the page

Thread Tools

Search Thread

Static toolbar at the bottom of the page

Bookmarks

Bookmarks

Posting Permissions