Completed files The graphical-navigation-bar folder in the chapter 5 folder.
For this exercise, graphical tabs will be created, using a single GIF image that contains four
variations on the graphic: three are for link states for which styles will be defined (active,
hover, and then link and visited, which share an image); the other is to flag the current
page. By applying this image as a background to links, and then amending its vertical positioning
on each state, only the relevant portion of the image will be shown. This is great
for updating a site (you only need to amend a single image), and also from a bandwidth
standpoint (one image deals with every tab and every state??”no need for preloading anything),
and it??™s easy to implement.
1. Edit the body element. Like in the previous exercise, edit the body start tag, adding
the id value shown.
Using CSS backgrounds to create a navigation bar
USING LINKS AND CREATING NAVIGATION
211
5
2. Style the structural divs. This page??™s structure is simple, as are the CSS rules
required to style it. The #wrapper rule sets a fixed width (which is four times the
width of one of the tabs) and centers the design in the browser window. The
#masthead rule adds some padding at the top of the masthead, so the tabs won??™t
hug the top of the browser window.
The #navContainer rule has a bottom border (to firmly separate the navigation
from the other page content) and a defined height, which is the height of a tab.
Pages:
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308