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 >  <h1>   <a href="http://www.meyerweb.com/"><span>meyerweb</span>.com</a>  </h1>  </div>  <div >   <div >    Skip to: <a href="#navpres">site navigation/presentation</a>   </div>   <div >     [...weblog content...]   </div>  </div>  <div  >   [...navigation and presentation links...]  </div>  <div >   [...footer content...]  </div> </body> </html> 

Import Restrictions

graphics/note_icon.jpg

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.



More Eric Meyer on CSS
More Eric Meyer on CSS (Voices That Matter)
ISBN: 0735714258
EAN: 2147483647
Year: 2006
Pages: 109
Authors: Eric Meyer

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net