HOUR 14:Harnessing the Power of CSS Layouts
If you preview the page in your browser at this point, you notice three things: First,
the header graphic you spent so much time aligning earlier is nowhere to be seen.
Second, all the text is bunched together; that is, there is no breathing room between
the paragraphs, headings, and blockquotes, except for the h2 headings. This might
look like a big problem, but it is exactly what you want: If the different selector
boxes are stacked directly on top of one another (meaning there is no breathing
room between the paragraphs, headings, and so on), the browser is not making any
assumptions about your styles if you do not provide a style. In other words, your
page looks the same in all browsers. Third, the text has reverted to the Times New
Roman font. This is because you deleted the old body styles that contained the
font-familydefinition for the entire page. This last one is the easiest one to fix, so
let’s do it before you get into the meat of things: Find the second body style in the
layout.css style sheet (the one that has the background tile image defined), open the
Modify Style dialog, and set font-family to Arial, Helvetica, sans-serif. Click OK to
apply the change, and the font switches back to Arial.
Applying the New Framework to the
Now that you have attached the new style sheet, you can apply the new framework
to the page. Most of it is already there because you added it in Hour 13, but some
elements are still missing:
1. With default.html open in Split view, find the
<body>tag in the Code area, and
create a new line directly below it before the #wrapper div. On the new line,
insert a new div with the ID #centeredBG. When you close the tag, IntelliSense
automatically inserts an end </div> tag. Cut it out as before, scroll to the bot-
tom of the code page where the #mainContent and#wrapper divs are being
closed, create a new line directly over the </body> end tag, and paste in the
</div>end tag, giving it the comment <!-- END #centeredBG -->.
2. Find the
<h1>tag that contains the heading you previously inserted. Create a
new line directly above it, and insert a new div with the ID #header. Place the
closing</div> tag on a new line directly after the <h1> tag.
Save and preview the page in your browser, and you see that the page now has the
corkboard background off the top and the header has plenty of space before the
page content begins (see Figure 14.14).