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
- 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 231
The splashlogo id will appear 80 pixels in from the left side of the browser window.
- Page 231
The CSS for the trillium id should be:
#trillium { position: absolute;
z-index: 3;
left: 220px;
top: 80px;
}
- Page 236
The "Navigation Links" bullet point should be:
Navigation Links. Configure the nav class to use 5 pixels padding, a background color of #e8b9e8, text color of dark blue (#000066), no underline (text-decoration:none), and Verdana, Arial or other sans-serif font.
.nav { padding: 5px;
background-color: #e8b9e8;
color: #000066;
text-decoration :none;
font-family: Verdana, Arial, sans-serif;
}
- Page 238
The third line from the bottom of the page should be:
<h3>Explore the beauty<br />of Door County Wildflowers...</h3>
- Page 250
References to Hands-On Practice 6.2 actually refer to Hands-On Practice 6.6
- JavaJam Case Study
Page 252:
The first full sentence on page 252 should be:
"You will modify the external style sheet and the Home, Menu, and Music pages."
Page 254:
First bullet point:
Add the following sentence:
Configure 20 pixels of padding-top and padding-bottom in the footer id.
#3, second bullet point:
The text "navbar" should be "navBar".
#3, third bullet point:
The text indicates that you should "Add a <div> that surrounds the text, winding road image, and footer area."
Do not include the footer area in your <div> — instead,
"Add a <div> that surrounds the text and winding road image."
#5, The second sentence in the last paragraph should be:
"Your music.html page should look similar to the one shown in Figure 6.24."
- Pete the Painter Case Study
Page 258
Last bullet point: Also configure 5 pixels of padding for the floatright class. The CSS should be:
.floatright { float: right;
padding: 5px;
}
- Prime Properties Case Study
Page 262
#4 Assign the thumbnail images to the property class instead of the floatleft class.
Questions or Comments?
The author would like to hear from you!
Send an e-mail to webdevfoundations@gmail.com