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 incombination 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
- Filmstrip Rollovers
- Tabbed Navigation in CSS
- Navigation Matrix
Chapter Updates
No errors have been reported for Chapter 7.
Questions or Comments?
The author would like to hear from you!
Send an e-mail to webdevfoundations@gmail.com