css layout with html5

index5.html and css/style5.css

Let's add some content to the footer, and style it. We'll place a specially styled paragraph and a list, as well as copyright and contact information. Replace the blank footer section of index.html with this:

Since the newly added elements are all contained within the "footer" element we'll be able to address them with custom CSS rules easily.

For the styling, we'll use a relatively new technique made possible by CSS3 - built-in gradients! For newer browsers, it's no longer necessary to create a gradient image file and load it in as a background (though you'll still need to do that to make older browsers happy).

Start by making the same background color change to the footer element that we made to the nav element above (i.e. replace your placeholder color). Let's also make the text white and add an additional rule that will let us give a different color to links found within the footer area:

We've provided a gradient image (img/blue_fade.png) created in Photoshop to make older browsers happy.

The key to making your gradient match the color palette of the site is to make one end of the gradient have the same color as another element in the design. In this case, our gradient uses the blue of the nav area background on one end, fading to a darker shade of the same color.

Since you're using a modern browser, you'll want to test the background image without the newer CSS3 technique first, so you can see how it will look for the rest of the world. Add this to your footer rule:

Why is the footer height set to 120px here rather than 140px? Even though the "footer" element is specified as 120px high, it's going to be taller than that in practice, thanks to box math - our stylesheet is putting 10px of padding inside the footer, so the real height is 140px!

Now to build a similar gradient using CSS3, which newer browsers will use automatically. In the future, when we decide there's enough browser support for CSS3 gradients out there, we can drop the background-image declaration. Because CSS3 isn't fully baked into the spec yet, we need to use a set of rules specific to various specific browsers. See the four similar background-image lines below? As you're working out your colors, only one of those is going to apply to the browser you're currently developing with. Safari and Chrome users should use the "webkit" line, Firefox developers should focus on "moz," Internet Explorer people should use "ms" and Opera devs should use the "o" line.

Once you've got the colors dialed in for the browser you're currently using, simply copy and paste the same values into to the other three lines, so your gradients will look exactly the same in all modern browsers. There's a lot more you can do with CSS3 gradients, but this is plenty for our purposes.

Your footer should now look like this:

A nice start, but all of that text hanging off the bottom of the footer needs fixing. Rather than have the "About" text go all the way across the footer, let's give it a set width and "float" it left, so other content in the footer wraps around it. Meanwhile, we'll float the contact list to the right side. Just as we did when creating the initial page layout, we'll need to put a "clear:both" on the footercopy rule so it doesn't try and jam itself up into the sections above. Here's the complete set of footer rules you'll need. This is slightly fiddly stuff - you'll need to tweak these rules to match your needs.