HTML and CSS RSS HTML and CSS RSS

static css footer at the bottom of windows

Thread Solved

•
•
Join Date: Nov 2008
Posts: 27
Reputation: ayi_102 is an unknown quantity at this point 
Solved Threads: 0
ayi_102 ayi_102 is offline Offline
Light Poster

static css footer at the bottom of windows

 
0
  #1
Jan 20th, 2009
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2008
Posts: 76
Reputation: ccube921 is an unknown quantity at this point 
Solved Threads: 6
ccube921 ccube921 is offline Offline
Junior Poster in Training

Re: static css footer at the bottom of windows

 
1
  #2
Jan 20th, 2009
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).
If I have been helpful add to my reputation!
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 164
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: static css footer at the bottom of windows

 
0
  #3
Jan 21st, 2009
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.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2008
Posts: 27
Reputation: ayi_102 is an unknown quantity at this point 
Solved Threads: 0
ayi_102 ayi_102 is offline Offline
Light Poster

Re: static css footer at the bottom of windows

 
0
  #4
Jan 21st, 2009
thank you

i change from absolute to fixed and it works perfect
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC