Page 1 of 5 In this tutorial, we will remove all the design elements from the recently released North Pole JumpStart and take a look at how it was constructed in a step-by-step process. The elements we will be concerned about in this walk-through are:
The five elements listed above are the structural elements within the design and it is these elements we will be investigating as we work our way through this tutorial. Think of this as a companion guide for the North Pole Jumpstart.
Download the North Pole JumpStart.
We'll begin at the body selector. As different browsers place different sets of default values on the body - as well as other elements - it is good practice to zero them off. The margin and padding values on the body are the ones that are most likely to cause a problem with your layout, and we can zero the border value for good measure.
With these three values set to zero we have a "clean" starting point in that all the browsers that are likely to visit our site will have their default margin/padding/border values reset to zero. This provides us with a consistent starting point for the position of our wrapper div, which is the first element within the body of our page. Once we have zeroed off the body element we can position the wrapper where we would like it by setting margins within that selector; we'll look at this technique a little later in this tutorial.
Imagine this scenario: You have zeroed off your margin and border values but you have forgotten to zero the padding value, what are the consequences of this oversight likely to be? In truth the consequences will vary. Let's take Firefox or Internet Explorer as our first example. In either of these browsers you will pay no penalty for your oversight as neither carry a default padding value on the body element, so you would get away with not zeroing the padding for those browsers. Now let's assume that your next visitor is browsing with Opera. Opera carries a default padding value on the body element and your oversight in this instance will affect the placement of your wrapper div. How so? Let's take a look.
The wrapper div will take its position from the padding that exists on the body element. In the case of Opera, your wrapper will be in a slightly different position to where it will be seen in other browsers. Not a show stopper, but your wrapper will not be placed in the position that you required when you began to layout your design, which may compound problems with your layout later on. As always, cross-browser consistency is the target, so zeroing these elements to provide a level starting point is simply the best approach.
body {
margin: 0; /* zeroes the margins on the body */
padding: 0; /* zeroes the padding on the body ~ Opera carries a default padding and requires this zeroing */
border: 0; /* zeroes off any existing border */
Image 1: Opera with the default padding
In Image 1 above, you can see the extra space that is caused by Opera's default body padding settings when compared with Firefox on the left-hand side of that image. In Image 2 below, you can see Opera with the default padding removed from the body.
Image 2: Opera with the default padding removed
text-align: center; /* Hack to center the wrapper in IE5.x pc
*/
min-width: 770px; /* Prevents the body becoming narrower than our wrapper div - keeps the content from disappearing off the left edge with Gecko browsers */
}
The remainder of the body selector that we are concerned with in this tutorial are both fixes for display problems.
text-align: center;
Obviously we don't want all our text aligned in the center of our divs, but as the comment says, this is in fact a hack to fix a display problem in IE 5.x PC. The 5.x versions of Internet Explorer cannot center an element in the desired manner, fortunately another incorrect behaviour that exists within IE5.x provides us with an easy workaround for centering the wrapper div. The text-align: center; should of course only work on text, but not in IE5.x it doesn't! It goes for it big-time and throws everything into the center, including our wrapper div which, while incorrect, actually works for us and centers our wrapper. That's the first problem out of the way.
min-width: 770px;
The min-width property is pretty self-explanatory. Although not supported in Internet Explorer, in its natural state it does prevent a bug in Gecko browsers — Firefox, Mozilla, Netscape 7.x etc. — where the content can disappear off the left edge of the screen if the browser is resized narrower than our content. When this happens, no scrollbar is provided to access the content that disappears to the left of the browser's viewport, so it is lost to the viewer unless they increase the width of their browser. It is good practice to include the min-width property on the body tag. Internet Explorer can support the min-width property with a little help from some JavaScript. A quick search on Google should provide you with an open-source script that you can use if you think it is needed.
Time to move on to the wrapper div.
Keywords
CSS, positioning, CSS-P, float, clear, position
