• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 4. Building Liquid Layout Struct... > Site-Building Exercise: Creating the...

Site-Building Exercise: Creating the Shelter’s Inner-Page Layout Structure

In this exercise, you’ll build the liquid layout structure of the inner pages of the Beechwood Animal Shelter site. In the next chapter, you’ll tackle the construction of the home page—a somewhat more advanced layout because of the additional design elements it contains.

Figure 4.24. The design of the inner pages of the Beechwood Animal Shelter site. In this exercise, you’ll create the two-column layout structure and pave the way for the graphic elements that you’ll add in later chapters.


You’ll work with the exercise files from this book’s companion web site at www.flexiblewebbook.com. Download and unzip the file ch4_exercise.zip.

Preparing the Page

Open the file programs-start.html in your text or code editor of choice. The file already contains all the content of the Our Programs page, marked up semantically, but no divs to form the structure of the layout.

1.
Enter a new line below the opening body tag, and type the following:

   <div id="header">

2.
Locate <h1>Our Programs</h1> several lines down in the HTML. Enter a new line above this, and type </div> to close the header div you just created.

3.
Enter a new line between the closing div tag you just typed and <h1>Our Programs</h1>. Type the following:

   <div id="content-wrapper">
   <div id="content-main">

4.
Immediately following the h1 element is a single paragraph. Locate its closing tag and enter a new line beneath it. Type the following to close the main content div and its wrapper that you just created:

   </div>
   </div>

5.
Enter a new line beneath the last closing div tag you just typed, and type the following:

   <div id="nav-secondary">

6.
Locate <p>&copy; 2008 Beechwood Animal Shelter</p> right before the end of the page. Enter a new line above this, and type </div> to close the secondary navigation div you just created.

7.
Enter a new line after the closing div tag you just typed, and type:

   <div id="footer">

8.
Enter a new line after <p>&copy; 2008 Beechwood Animal Shelter</p>. Type </div> to close the footer div you just created.

You’ve now added all the basic structural divs that you’ll need to create the layout. The HTML within the body tags should look like this (most of the content has been removed to highlight the div placement):

<div id="header">
   <ul>
      <li>Skip to Main Content</li>
   ...
      <li><a href="/about/">About the Shelter</a></li>
   </ul>
</div>
<div id="content-wrapper">
   <div id="content-main">
      <h1>Our Programs</h1>
      ...
   </div>
</div>
<div id="nav-secondary">
   <ul>
      <li><a href="animal-rescue.html">Animal Rescue</a></li>
...
      <li><a href="#">Headline Three</a> <span>Date</span></li>
   </ul>
</div>
<div id="footer">
   <p>&copy; 2008 Beechwood Animal Shelter</p>
</div>

					  

Tip

As an optional step, you may want to indent the markup within each of the divs you added to make the HTML easier to read.


Adding Base Styles

Now it’s time to start applying the CSS that will turn this single-column page into a multi-column layout. First, though, you need to add a few base styles.

Tip

As mentioned earlier, it’s often easiest to develop CSS embedded in the head of a single page, and then move it to an external style sheet when it’s completed.


1.
In the head of the page, enter a new line between <title>Our Programs | Beechwood Animal Shelter</title> and the closing head tag. Type the following:

   <style type="text/css">
   </style>

You’ll add the CSS for the page between these style tags.

2.
Enter a new line between the opening and closing style tags. Add a rule for the body element to set some base properties for the page:

   body {
      margin: 0;
      padding: 0;
      font: 88% "Lucida Sans Unicode", "Lucida Grande", sans-serif;
      line-height: 1.4;
   }

Note

The lack of a unit of measurement on the line-height value is not a mistake. Unitless line-height values are not only allowed, they’re usually ideal. Learn more at http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights in Eric Meyer’s blog.

Only the margin and padding properties affect the layout of the page; the font and line-height properties are just there for appearance’s sake.

3.
Add background colors to the divs to see where each lies as you change their positions on the page. Add the following rules:

   div {
      padding: 1px 0;
   }
   #header, #footer {
      background: #EFEFEF;
   }
   #content-main {
      background: #CFC;
   }
   #nav-secondary {
      background: #FCF;
   }

Note

For a brief refresher on margin collapsing, see “What’s the point of one pixel of padding?” on page 90.

The first rule, for all div elements, adds one pixel of padding inside the top and bottom of each div to stop margin collapsing: it keeps the margins of the interior elements from escaping from the divs and creating gaps between their colored bands. It’s simply another visual aid to help you while moving the divs around.

Figure 4.25. With background colors in place, it’s easy to see where each div lies in relation to the others on the page. So far, the page is simply a single-column liquid layout.


Creating the Two-Column Layout

Now you’ll add the styles to actually create the layout. Any of the float layout methods described earlier in the chapter could be used, but we’ll use a negative margin method here, in order to make the layout more adaptable to the design embellishments that will be coming in later chapters.

1.
Add the following rule inside the style tags in the head of the page:

   #content-wrapper {
      float: left;
      width: 100%;
      padding: 0;
   }

Only the float and width properties are necessary for the layout. The padding simply overrides the earlier padding set on all divs, so that an empty pixel of space isn’t shown above the main content div, which has its own padding also set.

2.
Modify the #content-main rule you created earlier to add space for the navigation sidebar to sit in:

   #content-main {
      margin-left: 20%;
      background: #CFC;
   }

3.
Modify the #nav-secondary rule you created earlier to move the div into the space left by the margin you just added:

   #nav-secondary {
      float: left;
								width: 20%;
								margin-left: -100%;
      background: #FCF;
   }

4.
There’s already a grouped rule for the header and footer together, but add a separate rule for just the footer, so it can clear the sidebar:

   #footer {
      clear: both;
   }

All of the divs should now be in their proper places (Figure 4.26). Verify this by opening the file in several different browsers. Try changing the size of the browser window as well as the font size, and make sure the layout holds together at a variety of different settings. If you narrow your window enough, the content in the sidebar will start to overflow, but other than that there should be no layout problems in any of the major browsers, including IE 6 and earlier.



Figure 4.26. The nav-secondary div is now a sidebar on the left side of the page.


Test Early, Test Often...Test IE Last

It’s important to test your pages in as many browsers as possible, but make sure that you test in more standards-compliant browsers first. Get the page working correctly in browsers like Firefox, Safari, and Opera before moving on to—and addressing the shortcomings of—less capable browsers. To put it bluntly, test in just about anything other than Internet Explorer first, and then test in IE and worry about its bugs. It’s much easier to code for the standard and then hack against IE’s bugs than it is to code for IE’s bugs and then try to hack other browsers into imitating those often unpredictable and illogical bugs. The latter is usually impossible to do, and just costs you a lot of time retooling your IE-specific CSS to get it working in a wider range of browsers.

As long as you test often in IE, it’s not too hard to make the adjustments you need along the way to accommodate it, even if you are accommodating the more standards-compliant browsers first.


Reducing the Width of the Two Columns

The design for the interior pages of the Beechwood Animal Shelter site doesn’t have the two main columns spanning the entire width of the viewport, though the header and footer do. You’ll need to make a change to both the HTML and the CSS to create the space on either side of the two main columns.

Note

Using margin: 0 5% would have worked just as well to center the div. You can use whichever you like.


1.
Locate <div id="content-wrapper"> in the HTML and enter a new line above it. Type <div id="wrapper">.

2.
Locate <div id="footer"> and enter a new line above it. Type </div> to close the wrapper div you just created.

3.
In the style section in the head of the page, add the following new rule:

   #wrapper {
      width: 90%;
      margin: 0 auto;
   }

This restricts the width of the two main columns to only 90 percent of the viewport (Figure 4.27), but keeps them centered in the remaining space.

Figure 4.27. The two columns are still proportionally the same sizes, but now take up only 90 percent of the viewport width.


4.
IE 6 miscalculates the placement of the nav-secondary div now that its wrapper has a percentage width set on it (Figure 4.28). To correct this, add a conditional comment targeting IE 6 only, directly below the closing style tag in the head:

   <!--[if IE 6]>
   <style>
   #nav-secondary {
      margin-left: -90%;
   }
   </style>
   <![endif]-->

Figure 4.28. IE 6 miscalculates the placement of the nav-secondary div when the wrapper div has a percentage width set on it. Other versions of IE do not exhibit this bug.


This must be placed after the other style element in the head in order to override the earlier styles.

To refresh your knowledge of conditional comments, see “Hacking away the three-pixel text jog” on page 101.

Your page should now look like Figure 4.27 (on the previous page) in all major browsers. To compare your work to the completed exercise, see the file programs-end.html in the files you extracted from ch4_exercise.zip.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint