Laying the Groundwork

Since we're going to be using the weblog styles, we already have a simple embedded style sheet, which is shown in Listing 9.1 as a part of the overall document structure.

Listing 9.1. The Basic Document Structure and Starting Style Sheet


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

        "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

 <title>Project 9</title>

 <style type="text/css">

  @import url(project08.css);

 </style>

</head>

<body>

 <div id="sitemast">

 <h1>

  <a href="http://www.meyerweb.com/"><span>meyerweb</span>.com</a>

 </h1>

 </div>

 <div id="main">

  <div class="skipper">

   Skip to: <a href="#navpres">site navigation/presentation</a>

  </div>

  <div id="weblog"> 

   [...weblog content...]

  </div>

 </div>

 <div class="panel" id="navpres">

  [...navigation and presentation links...]

 </div>

 <div id="footer">

  [...footer content...]

 </div>

</body>

</html>

Import Restrictions

As you'll see, the styles we add in this project will all come after the @import. This isn't by accident: The CSS specification requires that any @import statements come at the beginning of the style sheet, before any other rules.

The embedded style sheet uses an @import to call in the Project 8 style sheet, which we've split off into a separate file called project08.css. (To see this style sheet, refer to Listing 8.2 in the preceding project.) We can see the result in Figure 9.1.

Figure 9.1. The design with the weblog styles applied but nothing else.

graphics/09fig01.jpg

All we've really done is take the weblog content from the preceding project and drop it into a slightly larger document, one that has a masthead and navigation elements, plus presentation options and a footer.

The page also has a "skip-link" near the top of the document; that's the stuff in the div with the id of skipper. Clicking on (or otherwise activating) the skip-link will jump the browser display to the navigation and presentation links, which are found at the end of the document. This is illustrated in Figure 9.2.

Figure 9.2. The result of following the skip-link.

graphics/09fig02.jpg

The placement of these links in the document source makes it pretty clear that we'll have to either float the main content to the left or else absolutely position the "sidebar" to get it placed to the right of the main content, as our project goals require.

I say "sidebar" with quotes because there's nothing about the document structure that requires it to be a sidebar. We could style it however we want—as a series of drop-down menus, perhaps, as we did in Project 6, "CSS-Driven Drop-Down Menus." It could also all stay at the bottom of the design. We're referring to the navigation and presentation links as a sidebar merely because it's a convenient way to refer to our intent to place those links to one side of the main content.

Table of Contents