My Easy way to make "Sticky Footers" with CSS.
I saw someone asking for this in the hiring section, but it's so easy that I will
post my code to do it here.
This is an easy way to make those footers that always float at the bottom of
your webpage even when the surfer scrolls like on youtube when viewing your playlist.
This is the "framework" code. Just place your footer HTML inside the DIV tags.
If you tried it before and it didn't work then maybe you didn't use a Doctype tag.
Internet explorer needs the Doctype for this to work.
The html for a page to do this is below and notice that the Doctype tag
comes first before the HTML tag.
Also note that if you have javascript/css doing things on your web page then
this Doctype tag can change the way these things work in some cases, so
you need to re-check everything to make sure it still works.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.pos_fixed
{
position:fixed;
bottom:0px;
right:0px;
}
</style>
</head>
<body bgcolor=black text=white>
<br>data data data data<br>
<br>data data data data<br>
<div class="pos_fixed" style="width:100%;background-color:darkgreen;border:solid yellow 1px;">
<center>This is the footer that does not scroll. Place any HTML you like here.</center>
</div>
</body>
</html>
That's it; the key to this is in the CSS style sheet :
You must set the position to "fixed".
Then you must set the x and y position of the DIV tag using "bottom:" and "right:"
(you could alternatively use "top:" and "left:").
In the above "bottom:0px" means : place the Div data at position of zero pixels from the
bottom.
"right:0px" means place the Div data at position of zero pixels from the right.
You can use positive or negative numbers also like "bottom:-10px";
Play with it because it works kind of opposite of what some might think.
post my code to do it here.
This is an easy way to make those footers that always float at the bottom of
your webpage even when the surfer scrolls like on youtube when viewing your playlist.
This is the "framework" code. Just place your footer HTML inside the DIV tags.
If you tried it before and it didn't work then maybe you didn't use a Doctype tag.
Internet explorer needs the Doctype for this to work.
The html for a page to do this is below and notice that the Doctype tag
comes first before the HTML tag.
Also note that if you have javascript/css doing things on your web page then
this Doctype tag can change the way these things work in some cases, so
you need to re-check everything to make sure it still works.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.pos_fixed
{
position:fixed;
bottom:0px;
right:0px;
}
</style>
</head>
<body bgcolor=black text=white>
<br>data data data data<br>
<br>data data data data<br>
<div class="pos_fixed" style="width:100%;background-color:darkgreen;border:solid yellow 1px;">
<center>This is the footer that does not scroll. Place any HTML you like here.</center>
</div>
</body>
</html>
That's it; the key to this is in the CSS style sheet :
You must set the position to "fixed".
Then you must set the x and y position of the DIV tag using "bottom:" and "right:"
(you could alternatively use "top:" and "left:").
In the above "bottom:0px" means : place the Div data at position of zero pixels from the
bottom.
"right:0px" means place the Div data at position of zero pixels from the right.
You can use positive or negative numbers also like "bottom:-10px";
Play with it because it works kind of opposite of what some might think.
Comment