Chapter 6 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 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.
Inspiration
The Box Model
Flash Box Model Demo
Little Boxes
Resources & Chapter Links
CSS Tutorials
CSS Resources
- When can I use...
- QuirksMode
- Position Is Everything
- Browser Compatibility
- CSS3 Info
- CSS 3.0 Maker
- One-line CSS Tips
Explore Further
Visit Modernizr and explore a free open-source JavaScript library that enables backward compatibility for HTML5 and CSS3 in older browsers.
Review Activities
Review flash card activities are available for this chapter.
Check your knowledge of chapter terms and concepts.
Chapter Updates
- Page 231, Hands-On Practice 6.3: Use starteryls.html instead of starter3.html.
- Page 248, Disregard the "Hgroup Element" topic. The HTML5 Candidate Recommendation included the hgroup element in the list of "at risk" features. In early 2013, the hgroup element was removed from HTML5.1. At this point web developers should not use the hgroup element. The W3C HTML5 validator has been modified to flag the hgroup element as a syntax error.
- Page 249, Because the hgroup element was removed from HTML5 after this book was written, your web page will not pass W3C validation if you code the hgroup element. Do not code the hgroup tags.
- Fish Creek Case Study
- Page 266, #5 — The default padding was used in the example in Figure 6.37. Do not configure the padding-left: 0; style declaration.
- Page 266, #5 — The default padding was used in the example in Figure 6.37. Do not configure the padding-left: 0; style declaration.
- Pacific Trails Case Study
- Page 269, Task 1— Disregard "(except the navigation button images)".
- Page 271, Task 5, The sentence "Open yurts.html in a text editor." should be "Open activities.html in a text editor."
- Page 271, #2, fourth bullet point — disregard the last two sentences about the floatleft class.
- Prime Properties Case Study
- Page 272 Task 2, #2a — add a new style rule for anchor tags within the left id instead of the nav id
- Page 274 Task 3, #2 — "Replace the image links with text image links." should be "Replace the image links with text links."
Questions or Comments?
The author would like to hear from you! Send an e-mail to webdevfoundations@gmail.com