Chapter 6 Page Layout with CSS
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 method relies on CSS properties rather than tables to design a Web page. The technology for this layout is called CSS positioning. This chapter introduces you to configuring page layouts using CSS
Chapter Links
Inspiration
The Box Model
Exploring CSS
CSS Advice
CSS Tutorials
- Brainjar CSS Positioning Tutorial
- Max Design - Sample CSS Page Layouts
- Sitepoint CSS Reference
- Glish Page Layouts
- List of CSS Tutorials
- Blue Robot Page Layouts
- CSS play
- CSS Sprites
- Configuring Headings with CSS
- CSS Techniques You Can't Live Without
- 101 CSS Techniques of All Time
- 30 Exceptional CSS Techniques
- W3C CSS Learning List
CSS Resources
- QuirksMode
- Position Is Everything
- Browser Compatibility
- Eric Meyer's Site
- Web Page Reconstruction Using CSS
- Yahoo!'s UI Library
- 6 Keys to Understanding...
CSS Page Layout Creator
Need some help getting started on your CSS page layouts? Try out the CSS Page Layout Creator to point and click your way to a CSS layout. You can then reverse-engineer and learn from the CSS that is generated.
Exploring CSS
Eric Meyer's complexspiral demo will inspire you with what CSS page layout can accomplish with background images and background color. Enjoy exploring CSS
101 Popular CSS Techniques
A quick tour of 101 popular CSS techniques will get you started with CSS sprites, rounded corners, transparency, drop-shadows, and more!
One-Line CSS Tips
Once you've mastered the basics, explore these very quick, brief CSS tips that can help you achieve your page layout.
Chapter Updates
- Page 220
Change "<divs>" to "div elements" in the last paragraph before Section 6.3
- Page 224
Note that it is typical to float image elements and block-level elements (such as divs and paragraphs).
- Page 251
The selector #rightcolumn appears twice in the CSS. Replace the second "#rightcolumn" with "#leftcolumn".
- JavaJam Case Study
Page 256, #2, First bullet point:
Configure the background color of the container id to #FFFFCC instead of #e8d882.
- Fish Creek Case Study
Page 260, #2, Second bullet point
Use padding-left: 55px;
- Prime Properties Case Study
Page 267, #3, First bullet point
Disregard this bullet point — it was accidentally copied from the Chapter 3 Case Study.
Questions or Comments?
The author would like to hear from you!
Send an e-mail to webdevfoundations@gmail.com