Basic Web Design Tutorial Part 11

Centering the page and adding borders with CSS

Here is example 12 showing the next stage. The CSS file is here.

So, what’s new? Firstly the page has been centered by including this code in the CSS BODY section:
margin-left: auto;
margin-right: auto;
width: 800px;

This makes the whole page 800 pixels wide and centers it in the browser window.

I’ve also styled the TABLE tag so that it has no border and puts no padding or margin around it’s contents. Basically padding is extra space around an item but inside it’s border. A margin is space around the item but outside the border. This article (especially the diagram) explains in more detail.

Margins, borders can be set around the whole object or just one side (you’ll see that in a moment). There are different units you can use, for now I’m using “px” for pixels.
TABLE {
border-collapse: collapse;
padding: 0px;
margin: 0px;
}

This is a condensed method of putting a 1 pixel solid border in black around the table that contains everything (note: “everything” is my name for the TABLE tag, not a special CSS name).
TABLE.everything {
border: 1px solid #000;
}

Note: one of the best CSS tricks I’ve learned so far is to use this method to put a brightly coloured border around a page element if it’s not positioning the way I’d like. Then I can see exactly what’s going on.

Next I make everything in the table move to the top (notice in the last page how bad the links on the left look hanging in space?) This will apply to all TDs in the page unless another rule supercedes it.
TD {
vertical-align: top;
padding: 8px;
margin: 0px;
}

Let’s skip a few lines. Note that I align the text in the footer section (again “footer” is my name for that section, I could have called it “bob” or “cheeseypuffs” but I thought “footer” was clearer).

The link area on the left has a separating line from the rest of the page. Here’s how it’s done: a one pixel solid black border on it’s right side.
TD.linksbox {
border-right: 1px solid #000;
}

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Leave a Comment