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
Exploring CSS3 & HTML5
Adobe's new resource site, http://theexpressiveweb.com, showcases new HTML5 & CSS3 coding techniques, including CSS3 Animations, CSS3 Media Queries, HTML5 Canvas, Web Storage, and more! The site is organized by coding techniques, called "features" by Adobe — and provides for each feature with an overview, examples, browser support chart, detection and fallback strategies, and list of related Adobe technologies.
Chapter Updates
- Page 274
The code sample under Figure 7.2 should be:
<a href="#content">Skip to Page Content</a>
- Page 276
Note that the textbook describes five pseudo-classes.
- JavaJam Case Study
Page 307, #4
The name of the CSS file is javajam.css instead of java.css.
Questions or Comments?
The author would like to hear from you!
Send an e-mail to webdevfoundations@gmail.com