Member Avatar for ayi_102

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

  • 3 Contributors
  • 3 Replies
  • 152 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ayi_102
Member Avatar for ccube921

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).

Member Avatar for MidiMagic

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.

Member Avatar for ayi_102

thank you

i change from absolute to fixed and it works perfect

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.