Today we will finally be building a functional page! Download these files and let’s get started:

DOWNLOAD:

thedesign.zip

PREVIEW:

http://www.mattsich.net/examples/thedesign/

Take a look at the preview of the page above. Try resizing the width of the page down… looks like the media queries I talked about a few posts back, right?

Unzip the file and you should have a folder named “thedesign” with an index.html document inside, a css folder, a js folder, and an images folder. When I make websites, I like to organize it

So why did I name the html document “index”? Well whenever a browser is directed to a directory (folder), it tries to find something to display. If it sees an index page, it opens it first.

If you look in the images folder, you will see the graphics that I cut up from our design (see last post).

Open the index file in your favorite editor and then go into the css folder and open the style.css. We will only be working with these. All the other files are part of the html5 boilerplate (which I talked about here).

THE HTML

Let’s look at the index file. I put in a nice bit of comments to explain what’s what but if you have followed the previous tutorials, it should all be more or less familiar.

Remember how I said that we want to separate our page into at least a header, content and footer? Well I’m not the only one who does this. In fact it’s been such a common practice that they make tags for two of them! The header and footer tags are new in html5. Because of this some older browsers don’t support them and that’s why we use the modernizer plugin (comes with the html5 boilerplate).

Notice that the header, main div and footer are all in a “container” div. This is used because we can then see how far the elements of the page go instead of just having the body tag which gives us the whole window. What I mean by this is that if there is very little content in a page, the footer will be much higher then the bottom of your window but we don’t want it to be blank. Keep this in mind and when we look at the css, you’ll see exactly what I mean.

THE CSS

So the first things you will see are the media queries. I always like to keep them at the top. Try resizing the window. If you have it at more then 1053 px, the column of content won’t get bigger… it will just stay in the middle. If you bring it down to under 1052, it will all shrink. Why did I use 1053 instead of simply 1000px? well I wanted to leave some space on the left and right so I did 1000px/.95 which gave me 1053. Basically what this means is I wanted to see “95% of what value will be 1000px?” So now it starts resizing at 1053

The three id divs I access the most in these media queries are the #main, #head, and #foot. The #head and #foot divs are inside the header and footer tags respectfully. I do this so that I can center them. I don’t center the header and footer tags because they have the background repeating on the x so I don’t want to constrain their size.

If you resize the window down, you will see that the pictures shrink. If you look in the media queries, you will see that they have 28.5% width each.. this is because their max width (see the ‘#main img’ property further down the page) has a max-width of 300px. If the max-width is 300px, the full width is 1000px and I want to keep the size relative to the changing width of the browser window, I give it a percentage of 300/1000.

I know that understanding how the background images are being used is hard so I made a little color coded chart to help you out:

Hopefully understanding how I got the background images to appear correctly with the css in the example code you have downloaded will make a little more sense with this.

How did I center some of the stuff though? Well there’s this trick I learned a while ago. If you have a container of some set width and you have a container inside it with a set width, then all you need to do to center the one inside is to add “margin: 0 auto 0;” to it. That little trick centers the item but as I stated, there are a few “if”s. You need to have the width of those div containers set to some value. Anyway… now you know how I centered those divs.

You may notice that I used “font-size: 2em;” I may not have gone over that…
“em”s are a unit of font measure that is generally 1em = 12pt = 16px = 100%. I used ems because they are more scaleable and therefore work better with mobile devices.

I’m looking at the code to see if there’s anything else I may have missed but can’t find anything. If I did miss something or you can’t seem to understand something, please leave a comment and I’ll try to clarify it by leaving a reply or by editing the post.

cheers,
Matt