Chapter 7 – Page Layout Basics
You've already configured centered page layout with CSS; we'll add to your toolbox of CSS page layout techniques in this chapter. You'll explore floating and positioning elements with CSS. You'll be introduced to a technique for configuring images called CSS sprites. You will also learn to use CSS to add interactivity to hyperlinks with pseudo-classes.
CSS Tutorials
- CSS-Tricks CSS Snippets
- 20 Fresh CSS3 Tutorials
- Brainjar CSS Positioning Tutorial
- Max Design - Sample CSS Page Layouts
- Max Design - Listamatic
- CSS Sprites
- Configuring Headings with CSS
- W3C CSS Learning List
- One-line CSS Tips
- Front-end Development Tutorials
- 6 Keys to Understanding...
Sprites
A sprite is an image file that contains multiple small graphics that are configured as background images for various web page elements using the CSS background-image, background-repeat, and background-position properties. The single image saves download time because the browser only needs to make one http request for the combined image instead of many requests for the individual smaller images. Check out the following resources for more informaiton on sprites:
- http://css-tricks.com/css-sprites
- http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials
- http://csssprites.com
- http://spritegen.website-performance.org
- http://wearekiss.com/spritepad
- http://www.spritecow.com
Chapter Updates
- Page 222, Hands-On Practice 7.3
The structure of the web page is:
<body>
<div id="wrapper">
<header> </header>
<nav> </nav>
<main> </main>
<footer> </footer>
</div>
</body>
- Page 236
In Hands-on Practice 7.8 you'll create the web page shown in Figure 7.36.
- Pacific Trails Resort Case Study
Page 241: To add some extra space between the letters in the heading, configure 5px of letter-spacing for the h1 element selector.
Questions or Comments
The author would like to hear from you!
Feel free to complete the contact form with your questions or comments.
Review Games
Review activities are available for this chapter. Check your knowledge of chapter terms and concepts.