Chapter 10 - CSS Page Layout

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.

Microsoft IE7 CSS Compatibility Issues

Chapter Updates

1. Page 406
   In the Navigiation links bullet point the code for the hover should be:
   
   a.nav:hover { color:#ffffff;
                           background-color:#CC66CC }
2. Page 406
   The height configuration for the content1 class is incorrect. The style rule for the content1 class should be:
   
   .content1 { height: 150px;
                       text-align: center;
   }

Questions or Comments?

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