Fixed Footers without JavaScript
This footer behaviour is not a new idea; I’ve seen it on a few sites over the years, the most well known probably being version 7 of Shaun Inman’s site. Take a look at the ‘Work’ page with JavaScript enabled, then disabled to see the effect in action.
I suspect that this behaviour, which can look great in the right situation, has not been widely adopted because existing solutions have always relied on JavaScript for what should be a simple presentation issue.
The technique described in this article is purely a CSS solution and works in all modern browsers, tested down to IE5.5.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.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>
*, body {margin: 0; padding: 0; position: static;}
#wrapper {display: block; position: absolute; min-height: 100%; background: #eee;}
#content {display: block; background: #ddd; margin-bottom: 3.3em; padding: 1em; width: 600px; border-bottom: 1px solid #bebebe;}
#footer {position: absolute; display: block; bottom: 0; display: block; background: #ccc; padding: 1em; border-top: 1px solid #c6c6c6; width: 600px;}
h1, p {margin-bottom: 20px;}
</style>
<!--[if lt IE 7]>
<style>
body, #wrapper {height: 100%;}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="content">
<h1>Fixed Footers without JavaScript</h1>
<p><strong>This is a nice and easy solution to those unsightly gaps below your footers and while it won't be appropriate for every site, it might come in handy from time to time.</strong></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ullamcorper ligula sed mauris. Maecenas sed lectus ac urna egestas mollis. Vestibulum ac tellus in augue pellentesque suscipit. </p>
<p>Praesent non sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id erat. Nullam pretium, orci in mollis consequat, nunc tellus vulputate augue, vitae scelerisque massa arcu sed lacus. Nam tincidunt. Donec ut tortor. Morbi sapien nunc, adipiscing non, pulvinar ut, consequat ac, tellus. Sed vitae turpis vel ipsum convallis mollis. Phasellus eget urna nec odio condimentum blandit. Morbi vel enim. Suspendisse eget erat nec ipsum vulputate luctus. Nullam molestie. Proin in velit a nibh condimentum dapibus.</p>
</div>
<div id="footer"> this is the footer</div>
</div>
</body>
</html>
January 27th, 2009 - 16:59
http://www.php-help.ro/mootools-12-javascript-examples/mootools-12-image-slider-slideitmoo/#overall