here is the XHTML markup
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head>
<title>A CSS Sticky Footer</title>
<!-- The second stylesheet is to make things look pretty. The first one is only the important one. -->
<link rel="stylesheet" type="text/css" media="screen" href="layout.css" /> <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head> <body>
<div class="wrapper">
<div class="header"> <h1>CSS Sticky Footer</h1> </div>
<h2>A CSS sticky footer that just works</h2> <img src="browsers.gif" width="127" height="122" alt="Browser Icons" /> <p>We've all tried to use a <strong>sticky footer</strong> one time or another, but they never seem to come out right, do they? Well, the days of a hard to understand CSS-based <strong>sticky footer</strong> are thankfully over. In just a few simple CSS classes with minimal extra HTML markup, I've fashioned a <strong>sticky footer</strong> that even beginners can get a handle on. It's been tested in IE 5 and up, Firefox, Safari and Opera.</p> <h2>Usage of the CSS</h2> <p><q>Great! this is exactly what I'm looking for! Can I use it?</q></p> <p>Absolutely. There are no terms, licenses, fees or requirements. Use it as you will. If you find the kindness to link to me on your site, I'd appreciate it, but it's by no means necessary. Have fun, and don't be afraid to ask me any questions or send me your thoughts.</p> <p class="download"><a href="layout.css">View the CSS</a> or <a href="sticker.txt">download the HTML</a></p>
<div class="push"></div>
</div>
<div class="footer"> <p>Copyright © 2006-2007 Ryan Fait All rights reserved.<br /> You may not reproduce this example without written permission from Ryan Fait</p> </div>
<script type="text/javascript" src="http://www.google-analytics.com/urchin.js"></script>; <script type="text/javascript"> _uacct = "UA-271290-1"; urchinTracker(); </script>
</body></html>
here is the CSS
/*
STICKER - A valid, easy to use CSS sticky footer by Ryan Fait
This is the basic CSS you need along with the one extra emptydiv and the wrapper required to achieve the effect. I suggestthat you leave the * { margin: 0; } code in while testing andbuilding your site because margins do have a tendency to messthings up a bit. Have fun!
Copyright (c) 2006-2007 Ryan Fait
*/
* { margin: 0;}html, body { height: 100%;}.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */}.footer, .push { height: 4em; /* .push must be the same height as .footer */}
/*
TROUBLESHOOTING
I've received a few comments about vertical margins causing afew problems with the layout. If you want space betweenparagraphs or headers, use padding instead of margin. It's assimple as that.
*/
No comments:
Post a Comment