943,692 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > static css footer at the bottom of windows
Ad:
Permalink
Jan 20th, 2009
0

static css footer at the bottom of windows

Expand Post »
i found a css code that make my toolbar stay in the bottom of the page

but it is not working when there is scrolling on the page

the toolbar is floating, the position is not absolute bottom

this is piece of my code

HTML and CSS Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. <!--
  8. #footer   {
  9. color: #ffffff;
  10. font-size: 14px;
  11. font-family: Verdana, Geneva, Arial, sans-serif;
  12. background-color: blue;
  13. text-align: center;
  14. position: absolute;
  15. bottom: 0px;
  16. left: 0px;
  17. width: 100%;
  18. height: 28px
  19. }
  20.  
  21. BODY {
  22. font-size: 12px;
  23. text-align: center;
  24. }
  25. -->
  26. </style>
  27. </head>
  28. <body >
  29. <div id="footer">
  30.  
  31. <table>
  32.  
  33. <td>
  34. <select name="select1">
  35. <option value="">Font Family</option>
  36. <option value="Arial">Arial</option>
  37. <option value="Helvetica">Helvetica</option>
  38. <option value="Tahoma">Tahoma</option>
  39. <option value="Times New Roman">Times New Roman</option>
  40. <option value="Verdana">Verdana</option>
  41. </select>
  42. </td>
  43.  
  44. <td>
  45. <select name="select2">
  46. <option value="">Font Color</option>
  47. <option value="Black">Black</option>
  48. <option value="Blue">Blue</option>
  49. <option value="Green">Green</option>
  50. <option value="Orange">Orange</option>
  51. <option value="red">Red</option>
  52. <option value="Violet">Violet</option>
  53. <option value="Yellow">Yellow</option>
  54. </select>
  55. </td>
  56.  
  57. <td>
  58. <select name="select3">
  59. <option value="">Background Color</option>
  60. <option value="Blue">Blue</option>
  61. <option value="Green">Green</option>
  62. <option value="Orange">Orange</option>
  63. <option value="Red">Red</option>
  64. <option value="Violet">Violet</option>
  65. <option value="Yellow">Yellow</option>
  66. </select>
  67. </td>
  68.  
  69. <td>
  70. <select name="select4">
  71. <option value="">Font Size</option>
  72. <option value="x-small">X-Small</option>
  73. <option value="small">Small</option>
  74. <option value="medium">Medium</option>
  75. <option value="large">Large</option>
  76. <option value="x-large">X-Large</option>
  77. <option value="xx-Large">XX-Large</option>
  78. </select>
  79. </td>
  80.  
  81. <td>
  82. <button>Reset</button>
  83. </td>
  84.  
  85. </table>
  86.  
  87. </div>
  88.  
  89. </br></br></br></br></br></br></br></br></br></br></br></br></br></br>
  90. </br></br></br></br></br></br></br></br></br></br></br></br></br></br>
  91. </br></br></br></br></br></br></br></br></br></br></br></br></br></br>
  92. </br></br></br></br></br></br></br></br></br></br></br></br></br></br>
  93. </br></br></br></br></br></br></br></br></br></br></br></br></br></br>
  94. </br></br></br></br></br></br></br></br></br></br></br></br></br></br>
  95.  
  96. </body>
  97.  
  98. </html>

the toolbar is floating when you scroll
it is not staying at the bottom of the page

this is an example that i found on website
http://www.bdadyslexia.org.uk/

the footer toolbar keep stay in the bottom of the page
even you try to scroll down

any ideas?

thank you

ayi
Similar Threads
Reputation Points: 10
Solved Threads: 0
Light Poster
ayi_102 is offline Offline
27 posts
since Nov 2008
Permalink
Jan 20th, 2009
1

Re: static css footer at the bottom of windows

Hello ayi, I see that you wrote:
position:absolute
well, I tested this and if you change that to position:fixed; it works fine, in my code I made a big green div to demonstrate the scrolling, here it is:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#footer   {
color: #ffffff;
font-size: 14px;
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: blue;
text-align: center;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 28px
}
#cont
{
background-color:green;
height:1000px;
width: 500px;
}
BODY {
font-size: 12px;
text-align: center;
}
</style>
</head>
<body>
<div id="cont">
</div>
<div id="footer">

<table>

<td>
<select name="select1">
<option value="">Font Family</option>
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
</select>
</td>

<td>
<select name="select2">
<option value="">Font Color</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Orange">Orange</option>
<option value="red">Red</option>
<option value="Violet">Violet</option>
<option value="Yellow">Yellow</option>
</select>
</td>

<td>
<select name="select3">
<option value="">Background Color</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Orange">Orange</option>
<option value="Red">Red</option>
<option value="Violet">Violet</option>
<option value="Yellow">Yellow</option>
</select>
</td>

<td>
<select name="select4">
<option value="">Font Size</option>
<option value="x-small">X-Small</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="x-large">X-Large</option>
<option value="xx-Large">XX-Large</option>
</select>
</td>

<td>
<button>Reset</button>
</td>

</table>

</div>

</body>

</html>

That should work (in Firefox at least).
Reputation Points: 13
Solved Threads: 6
Junior Poster in Training
ccube921 is offline Offline
93 posts
since Oct 2008
Permalink
Jan 21st, 2009
0

Re: static css footer at the bottom of windows

Actually, it can't be done in a way that works on all browsers, screen resolutions, and window sizes.

The internet is not designed to look like a Windows program. There is no provision for using either the window size or footers. The web is NOT intended to be used in this manner.

What is causing this sudden demand for footers on web pages?

They have never been possible in a browser-independent manner. All of the tricks used to try to get this fail on at least one browser.
Last edited by MidiMagic; Jan 21st, 2009 at 1:10 am.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Permalink
Jan 21st, 2009
0

Re: static css footer at the bottom of windows

thank you

i change from absolute to fixed and it works perfect
Reputation Points: 10
Solved Threads: 0
Light Poster
ayi_102 is offline Offline
27 posts
since Nov 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Image overlaps table below
Next Thread in HTML and CSS Forum Timeline: Sending Form Fields to Database





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC