Now that you are familiar with using CSS to format text and color, you are ready to explore using CSS to configure web page layout. This is a method that relies on CSS properties rather than tables to design a web page.

The technology for this “table-less” layout is called CSS-P, for CSS positioning. This chapter will introduce you to CSS -P, a growing trend on the Web as current versions of browsers increase their support of this technology.

In this chapter, you will learn about reasons to use CSS for page layout, relative and absolute positioning, the CSS Box Model, configuring single column, two column, and three column page layouts using CSS, configuring navigation using lists, and styling for print media.

CSS Documentation	CSS Layout Tutorials
W3C Overview of CSS W3C CSS1 Recommendations W3C CSS2 Recommendations Eric Meyer's CSS Mastergrid CSS Validator	Glish Page Layouts List of CSS Tutorials W3C CSS Learning List Blue Robot Page Layouts Little Boxes Flash Box Model Demo CSS PLaY
Sample Pages	CSS Resources
http://www.espn.com http://www.trugreen.com http://www.wired.com	QuirksMode Position Is Everything Browser Compatibility Eric Meyer's Site Web Page Reconstruction Using CSS
CSS Navigation "Automagically"
Sometimes a good way to learn is to reverse-engineer an example. The CSS Wizard below will "automagically" create CSS navigation link lists for you. Have some fun with this and then review the code it created so you can extend the examples and create something that is truly your own. Accessify.com - List-O-Matic
CSS Page Layout Creator
Need some help getting started on your CSS page layouts? Try out the CSS Page Layout Creator at the link below to point and click your way to a CSS layout. You can then reverse-engineer and learn from the CSS that is generated. CSScreator.com

Chapter Updates

The Student CD materials are missing the file wildflower0.css. Download here.

To pass W3C CSS validation, a pixel value for properties such as top, left, right, height, etc., should be annotated with px. Example: top:20px;

Page 386: list-item-style should be list-style-type
Page 391: use clear:both instead of clear:right and clear:left

Thanks to the folks at North Seattle Community College for the following:

Page 361: The source code appears as <div="myContent> and it should be <div id="myContent">.
Page 364: In the paragraph below Figure 10.10, the first sentence should read ...shows a web page instead of ... shows an web page.
Page 368: The correct value of the background-repeat property to prevent repeating the background is no-repeat.
Page 393: To create a page that more closely resembles Figure 10.27, remove padding:20px; from the style rules for the paragraph tag.

Questions or Comments?

The author would like to hear from you!
Send an e-mail to webdevfoundations@hotmail.com

Chapter 10 Review

Crossword Puzzle

Flash Cards
Pick a Letter
Matching

Resources

W3C
W3C HTML Validator
W3C CSS Validator

Color Chart
Design Checklist
Fireworks Tutorial

A List Apart
SitePoint
Good Experience
Digital Web
Dreamweaver
FrontPage