This will be done via more background positioning and
by making use of the list item id values to create rules with contextual selectors specific to
each item. Naturally, the rollover image contains all of the states for the rollover images.
1. Amend the list item style. To apply the new background to the list items, amend
the #navigation li rule:
#navigation li {
float: left;
display: inline;
width: 185px;
height: 30px;
background: url(css-rollover-grid.gif) no-repeat 0 0;
}
2. Amend the navContainer div border. Because the tabs are now multicolored, the
orange border at the bottom of the navContainer div won??™t look good, so change
it to dark gray.
#navContainer {
height: 30px;
border-bottom: 5px solid #333333;
}
3. Set specific background positions. Each tab now requires a separate background
position to show the relevant portion of the background image for each tab. Again,
negative margins are used to pull the image into place in each case. (Because the
different colors aren??™t obvious in grayscale, the tabs also have unique icons at the
far left.) These rules should be placed after the #navigation a:link, #navigation
a:visited rule.
#navigation #homePageLink {
background-position: 0 0;
}
#navigation #servicesPageLink {
background-position: -185px 0;
}
USING LINKS AND CREATING NAVIGATION
215
5
#navigation #customerSupportPageLink {
background-position: -370px 0;
}
#navigation #contactDetailsPageLink {
background-position: -555px 0;
}
4.
Pages:
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312