Blog

Posts tagged with “HTML”

Stupid CSS Tricks: The Simple Sticky Footer

Ok, I've seen a lot of techniques for Sticky footers, but haven't seen one as simple as mine. It uses the bare minimum mark-up and CSS possible.

First, here is the HTML required:

<!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=utf-8" />
<title>Sticky Footers Rock</title>
<link rel="stylesheet" type="text/css" href="[where you store css]" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="[where you store IE6 specific css]" />
<![endif]-->
</head>

<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>

As you can see, there's nothing special in there. Besides the conditionally commented IE6 stylesheet, there are three DIVs to split the layout, and that's it. Nothing a decent web designer wouldn't already have in a page anyway. In fact, only two of those DIVs are required. The "header" DIV is only there because it usually exists in a design. It's superflous to this example. One thing that is vitally important though — assuming you care about IE6 — is the <!DOCTYPE> decleration. What doctype you use is up to you, so long as it triggers "almost standards mode" in IE6.

Next we will look at the base CSS required. You can add more as you see fit. I've commented the code to explain why each line needed:

HTML {
height:100%;
/* allows body to grow to full window height */
}
BODY {
position:relative;
/* otherwise footer will position itself in relation to window height */
min-height:100%;
/* makes page start out at least as tall as the browser window */
margin:0;
padding:0;
/* not strictly required but useful. reset to push body to edges of browser window */
}
#footer {
position:absolute;
bottom:0px;
/* these two lines will force footer to the bottom of the page. */
height:XXX;
/*set to whatever you want */
}
#content {
padding-bottom:XXX;
/* must match or exceed the footer height, so bottom-most content doesn't float bellow footer */
overflow:hidden;
/* this will contain any floated elements and push the footer down below them
NOTE: do not add a height to this element, or this will fail */
}

Next, we add a single rule to the conditionally commented IE6 stylesheet:

BODY {
height:100%;
/* hack for IE6 that doesn't recognize min-height. */
}

That's it. We're done. Here's a demo with some minimal extra CSS and content to illustrate the technique.

One caveat with IE6: this will work as is on static content pages, but IE6 will not move the footer down when extra content is added or removed dynamically. Instead it will float where it originally sat regarless of the new content size. To work around this, simply pop the footer's style position to 'static' and back (either directly with <element>.style.position, or by adding then removing a new class) after making the dynamic changes and IE6 will behave as expected.

Also, some more knowledgeable of you may be tempted to skip the conditionally commented CSS and instead "hack" the original BODY rule decleration as follows:

BODY {
position:relative;
/* otherwise footer will position itself in relation to window height */
min-height:100%;
/* makes page start out at least as tall as the browser window */
height:auto !important;
/* make non-IE6 browsers ignore the next line */
height:100%;
/* hack for IE6 that doesn't recognize min-height. */
margin:0;
padding:0;
/* not strictly required but useful. reset to push body to edges of browser window */
}

While this will work, it does add unneeded CSS that other browsers need to parse. It's my personal oppinion that IE6 should be the only one doing heavy lifting, CSS wise, since it's the one we're having to work around.

Tags: , ,
2010.02.08 12:00 PM | Permalink 0 Comments

CSS Resizable "Background" Image Technique

Resize this page. The background will remain the same width as the window. The technique uses an actual image tag and its own fixed position div wrapper to pull off the effect. This will probably make semantic-web nazis' heads explode, but at least it doesn't use tables. The image will remain at the top of the page however, so having the image end in a single color at the bottom, matched by a similar color for the body background would probably finish this off quite nicely. If you need the image to center, use the tables technique linked above. Here's the basic CSS to pull this off in IE7, IE8, Firefox, Safari, Opera and Chrome:

HTML {
height:100%;
width:100%;
}
BODY {
min-height:100%;
width:100%;
margin:0;
padding:0;
}

#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
}
#bgimg {
width:100%;
}

And this is all the HTML you need to add to the top of the page (above any "wrapper" div you may be using):

<div id="bg">
<img id="bgimg" src="[URL_TO_YOUR_IMAGE]"
alt="background image" width="0" />
</div>

To find out how to make this work in IE6, look at the source code of The Demo page

Tags: , ,
2009.08.21 11:14 PM | Permalink 0 Comments
← Previous Page 2 of 2