Chapter 7 More on Links, Lists, and Layout
Now that you've had some experience coding XHTML and CSS, you're ready to explore a variety of techniques in this chapter including XHTML relative hyperlinks and internal hyperlinks, CSS pseudoclasses, navigation list layout, three-column page layout, styling for print, and an overview of the "cascade" in CSS.
Configuring CSS "Buttons"
CSS is often used to configure interactive hyperlinks (that change properties when a mouse hovers over them). See the navigation links on the left side of this page for an example. Testing is crucial. See the sample CSS Buttons for starters. Visit Listamatic for an exhaustive look at CSS hyperlinks configured in ordered lists.
CSS Navigation "automagically"
Sometimes a good way to learn is to reverse-engineer an example. The List-O-Matic CSS Wizard will "automagically" create CSS navigation link lists for you. Have some fun with this and then review the code it created so you can extend the examples and create something that is truly your own.
CSS Page Layout Tutorials
CSS Tutorials
CSS Sprites
CSS pseudo-classes can be used in combination with background images to configure image "rollovers". Taking this a step further is to combine all your background images in one file and use positioning properties to display the appropriate image. See the following tutorials for an introduction to this popular technique
- Wellstyled's Fast Rollovers without Preload
- A List Apart's CSS Sprites: Image Slicing's Kiss of Death
- CSSplay
- Tabbed Navigation in CSS
- Navigation Matrix
Chapter Updates
Hands-On Practice 7.2 (Page 273)
- There is an extra blank space between in the style rules for a:button:link, a.button:visited, and a.button:hover selectors. The code should be:
a.button:link { color: #FFFFFF;}
a.button:visited { color: #CCCCCC;}
a.button:hover { color: #66CC33;
border: 2px outset #CCCCCC;
}
Page 275
In the unordered list navigation code sample, the word "Home" should be a hyperlink to index.html (instead of home.html).
Hands-On Practice 7.3 (Page 282)
- Page 281
Remember to code a ; after the first style declaration.
- Page 282
The style rule for .navBar should be:
.navBar { margin-top: 20px;
list-style-type: none;
}
- There is an extra "}" in the first line of each style rule for the a.nav:link, a.nav:visited, and a.nav:hover selectors. The correct code is shown below:
a.nav:link { color: #006600;
background-color: #eeeeee; }
a.nav:visited { color: #003300;
background-color: #eeeeee; }
a.nav:hover { color: #cc66cc;
background-color: #eeeeee; }
Chapter Review (Page 291)
- The answer for Question #5 on page 627 is incorect. The correct answer for question #5 is "A".
Questions or Comments?
The author would like to hear from you!
Send an e-mail to webdevfoundations@gmail.com