??? In the page you??™ve
been working on, the body element has an id of homePage, and the first list element
in the unordered list has an id of homePageLink. Therefore, the link within this list
item is automatically given the style, making it look like the active tab (since the
background blends directly into the content area).
The other selectors in the grouped selector behave in the same way (in each case
for the link and visited styles); so if, for example, you change the id value of the
body start tag in the HTML document to customerSupportPage and then refresh
the web page, you??™ll see the third link become the active tab.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
210
Graphical navigation with rollover effects
Working with text and CSS alone is fine, but designers are creative types and tend to like
working with graphics. Many enjoy creating more visually arresting navigation bars, which
make use of imagery and rollovers. Historically, such systems have required a number of
images (three or more per tab) and the use of JavaScript. However, it??™s possible to use CSS,
the same unordered list as used for the previous two exercises, and just a single image to
create a graphical navigation bar, as shown in the next exercise.
Required files The graphical-navigation-starting-point folder and css-tabrollover-
image.gif from the navigation-images folder in the
chapter 5 folder.
What you??™ll learn How to create a graphical navigation bar with four different states,
driven by CSS, without using any JavaScript.
Pages:
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307