EFFECTS - CSS: Professional Techniques for Modern Layout - page 163

165

Figure 5-7: Using aligned patterns.

CSS POP-UPS
Here's an ef ect that can go all the way to driving pop-up menus, if you get fancy enough (see
the next section for details). At the simpler end, you can use this ef ect to make information
appear on mouseover and go away on mouseout without ever having to write a lick of
JavaScript.

Suppose you want a little bit of explanatory text to show up for each link in your sidebar, but
you don't want to entrust it to tooltips, which are inconsistently presented across browsers and
anyway can't (yet) be styled. You'd set up the markup something like this:

< ul class="toc">
< li> < a href="1.html">Chapter 1 < i>In which a dragon is seen< / i> </ a> </ li>
< li> < a href="2.html">Chapter 2 < i>In which a knight is summoned< / i> </ a> </ li>
< li> < a href="3.html">Chapter 3 < i>In which a princess is disappointed< / i> </ a> </
li>
</ ul>

Wait a minute, i ? Isn't that presentational? Well, yes, and so is what you're doing. You could
just as easily use span , but i is a shorter element name and besides, that way if the CSS
somehow fails to be applied, the text will very likely be italicized. h at's an acceptable fallback,
in my opinion.