Log in

View Full Version : static css footer at the bottom of windows


ayi_102
01-20-2009, 11:46 PM
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



<!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: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 28px
}

BODY {
font-size: 12px;
text-align: center;
}
-->
</style>
</head>
<body >
<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>

</br></br></br></br></br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br></br></br></br></br>

</body>

</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
bluewalrus
01-21-2009, 12:59 AM
you want fixed not absolute


#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
}