Add the following two rules to remove list defaults, center list content, and display
list items inline.
#navContainer ul {
text-align: center;
}
#navContainer li {
display: inline;
}
6. Style the navigation div and its links. Add the following three rules to style the
navigation div and the links within. The padding settings work as per the earlier
exercises in this chapter: again, the vertical padding must be kept constant
between the container and the links, hence the vertical padding being set to 6px in
both cases. Note the hover color??”a bright yellow, designed to stand out against
both the black background of the main navigation bar and the orange background
of the subnavigation and highlighted tab.
#navigation {
background: #111111;
padding: 6px 0;
}
#navigation a:link, #navigation a:visited {
font: bold 1.2em Arial, Helvetica, sans-serif;
color: #ffffff;
text-decoration: none;
padding: 6px 10px;
}
#navigation a:hover {
color: #ffd800;
}
USING LINKS AND CREATING NAVIGATION
221
5
7. Style the active page link. Using one of those grouped contextual selectors we
seem to like so much in this chapter, set a rule to style the active page link. In this
case, a background image is tiled horizontally and set to sit at the bottom of the
links. A background color is also defined, which is handy for if the text is zoomed??”
if no background color were defined, the image might run out, leaving the navigation
div??™s background color to show through instead.
Pages:
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318