gif) -370px -40px;
}
#navigation li#contactDetailsPageLink a:hover {
background: url(css-rollover-grid.gif) -555px -40px;
}
#navigation li#homePageLink a:active {
background: url(css-rollover-grid.gif) 0 -80px;
}
#navigation li#servicesPageLink a:active {
background: url(css-rollover-grid.gif) -185px -80px;
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
216
}
#navigation li#customerSupportPageLink a:active {
background: url(css-rollover-grid.gif) -370px -80px;
}
#navigation li#contactDetailsPageLink a:active {
background: url(css-rollover-grid.gif) -555px -80px;
}
Once again, change the id value of the body element to amend the active section
link.
Required files The files from the graphical-navigation-bar folder, and the
images css-tab-rollover-image-left.gif and css-tabrollover-
image-right.gif from the navigation-images folder
from the chapter 5 folder.
What you??™ll learn How to amend the result from the ???Using CSS backgrounds to
create a navigation bar??? exercise, enabling the tabs to expand,
resizing with their content.
Completed files graphical-navigation-bar-sliding-doors in the chapter 5
folder.
With both of the graphical tab exercises so far, there is a problem: when the text is resized,
the tabs don??™t resize with it.
Creating graphical tabs that expand with resized text
USING LINKS AND CREATING NAVIGATION
217
5
This can be dealt with using a technique typically referred to as ???sliding doors.
Pages:
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314