Web Development & Design Foundations with HTML5

Skip to Content 7th Edition

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

The Box Model
Flash Box Model Demo
Little Boxes

Resources & Chapter Links

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 243 Hands-On Practice 6.1
    The starter1.html file is available here (right-click to download)

  • Page 261 Hands-On Practice 6.5
    Name the folder replacech6 instead of replacech5.

  • Page 261 Hands-On Practice 6.5, #2
    The code sample should show margin-bottom: 0; instead of margin-bottom: 10px.

  • Page 272 FAQ
    As of September 2014, HTML5 has been moved from Candidate Recommendation status to Proposed Recommendation status.

  • Page 272
    In the third paragraph from the bottom of the page replace "versionf" with "version".

  • Page 273 HTML5 Shim (AKA HTML5 Shiv)
    The HTML5 shiv has moved from Google to to GitHub at https://github.com/aFarkas/html5shiv
    To nudge older browsers to support new HTML5 elements you will need to:
    • Download https://github.com/aFarkas/html5shiv/archive/master.zip
    • Extract the .zip file.
    • Locate the dist/html5shiv.js file and copy it into the same folder as your web page.
    • Include the following code in the head section of your web page.
      <!--[if lt IE 9]>
      <script src="html5shiv.js"></script>
      <![endif]-->



  • JavaJam Case Study
    • Page 282, #7, Remove the sentence, "Set overflow to auto." Setting overflow to auto for the main element selector may cause a display issue in some versions of the Safari browser.
    • Page 282, #9, Replace the sentence, "Change the padding to 20 pixels top and bottom." with "Change the padding to 20 pixels."


  • Prime Properties Case Study
    • Page 292 Task 2 #6, Also configure the list-style-position property for unordered lists in the main content area with the value inside.
      main ul { list-style-position: inside; }
    • Page 292 Task 3, Page 293 Task 4, Page 293 Task 5
      Also configure the h1 element. Replace the img tag that displays the primelogo.gif image with the text, "Prime Properties".

Questions or Comments?

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