Log in

View Full Version : 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
<!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:



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