Advanced Search

Results 1 to 3 of 3

Thread: Static toolbar at the bottom of the page

  1. #1
    Join Date
    Sep 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Static toolbar at the bottom of the page

    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 !

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Nov 2008
    Posts
    40
    Thanks
    2
    Thanked 8 Times in 8 Posts

    Default

    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>

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
  •