Charles Wyke-Smith
"Stylin' with CSS: A Designer's Guide 2nd Edition"
STYLIN??™ WITH CSS - CHAPTER 6 214
FIGURE 6.34 Adding anchor tags
around the text of the list items turns
them into clickable links.
Note in the code above how the link tags are closest to the content
and nested inside the list items.
BASIC LINK STYLING
Now let??™s give these links some style. First, let??™s remove the underlining
from them in their normal, ???sitting-there-waiting-for-something-
to-happen??? state, and then, when the users rolls the cursor
over the link, let??™s make it change color.
Also, since this is the last step to complete our navigation component,
we??™ll do some cleanup: We need to adjust the ul bottom margin
and add context (the id of the containing div) to the selectors so
that only the elements within our listcontainer div are affected by
the styles. To show you how to use the pseudo-class, as you would if
IE were able to understand it, and still have the top line display, I??™ve
reinstated it into the code and added a star hack, as described in the
sidebar ???The Star Hack and Backslash Hack,??? to make the line above
the ?¬? rst list item appear in Internet Explorer 6 & 7.
Here??™s the ?¬? nal code for our list-based navigation component, and
you can see the ?¬? nished result in Figure 6.
Pages:
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253