|
This exercise concerns navigation with graphical rollovers. I'm assuming you have some experience working with CSS and styles. The following
is a Photoshop mock-up of the navigation bar that we’re going to build. (The vertical
lines are Photoshop guides, showing the boundary of each button, and are not part of the
design.)
By conventional methods, you’d export eight images from Photoshop—two for each link
(twelve if you wanted to incorporate an active state). The rollovers would be applied using
JavaScript. However, this process has several problems:
- Updating the rollover graphics requires a lot of work, creating and re-exporting up
to a dozen new images.
- By default, there is a short pause on the hover and active states while the rollover
graphic downloads.
- The hover state and active state pauses can be eradicated by using a preload
script, but such scripts often don’t work well with all browsers.
- Not everyone surfs the Web with JavaScript turned on.
Instead of using JavaScript, we’ll use a little CSS and
(drumroll) just one image, which is shown at right.
This image is a single transparent GIF that includes all
three link states: link (the default), hover, and active.
(What’s depicted is the final image, which should be
exported in one piece; this should remain a single image
file, and shouldn’t be chopped into three different files.)
What we can do is use this as a background image for
navigation links, and use CSS to display the relevant portion
of the image, depending on the link action taking
place.
The navigation is marked up as an
unordered list. No formatting of the links of any kind is required—that’s all handled by the
CSS. We’ve placed the list within a div tag that has an id value of navigation, so we
can create CSS rules that apply only to lists within that specific div.
1. Create the list. This navigation bar consists of a simple unordered list. In a browser, this looks pretty much like you’d
expect: just a plain, unordered, vertical list.
2. Style the list. Browser defaults are removed.
#navigation ul {
margin: 0px;
padding: 0px;
list-style: none;
}
3. Style list items. Items within the list are styled to float left and display inline. The
background value includes the location of the rollover image, with additional settings being no-repeat (to stop it from tiling), then left and top, to ensure the
relevant portion of the rollover image is seen by default. The margin and padding
are set to 0 to override unruly browser defaults.
#navigation li {
float: left;
display: inline;
margin: 0px;
padding: 0px;
background: url(assets/shared/rollover.gif) no-repeat left top;
}
4. Style the links. Because you haven’t set dimensions for the links yet, the backgrounds
aren’t sitting in the right place. You can fix this by using the following rule,
which also deals with the text styles you want to put in place.
The padding and height/width settings add up to the dimensions of the area of
the background image that you want to show at any one time (185px × 30px—#the
size of one of the link states). This is because padding is added to the element
width—it’s not a part of it. If you were to set the width of navigation links to 185px
and then add 30px of padding to the left (which is used to indent the text), the
links would take up 215px of space.
You’ll set display to block, to make the entire container the active link,
thereby making this navigation bar work in the normal manner.
#navigation a {
font: bold 13px Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #ffffff;
text-decoration: none;
display: block;
padding: 7px 0px 0px 30px;
height: 23px;
width: 155px;
}
5. Style other states. For the hover and active
states, you define which portion of the rollover
graphic is supposed to be visible. This is done via
background-position values. The first of these
remains 0px, because you always want to see the
image from its far left. The vertical reading
depends on where the relevant portion of the
image appears in the rollover graphic.
As you can see, the hover state is 40px from the top and the active state is 80px
from the top. This means the image needs to be vertically moved –40px and –80px
for the hover and active states, respectively.
Therefore, the rules for these states are as follows:
#navigation a:hover {
background: url(assets/shared/rollover.gif) 0px -40px;
}
#navigation a:active {
background: url(assets/shared/rollover.gif) 0px -80px;
}
The hover and active states are shown in the following images.
6. Fix for Internet Explorer 5.5 for Windows. Internet Explorer 5.5 for Windows
gets the box model wrong, incorrectly setting padding and borders within defined
element dimensions. The navigation bar currently looks like this in that browser:
To deal with Internet Explorer 5.5, the width and height settings need to be the
same as the dimensions of the buttons (as opposed to the measurements for compliant
browsers, defined in step 4). You can set separate values for Internet
Explorer 5.5 by using the box model hack. First, set the width and height for
Internet Explorer 5.5 (185px width and 30px height&151;dimensions identical to those
of one state of the rollover graphic). Then add the hack and the correct measurements
for compliant browsers (as in step 4).
#navigation a {
font: bold 13px Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #ffffff;
text-decoration: none;
display: block;
padding: 7px 0px 0px 30px;
height: 30px;
width: 185px;
voice-family: ""}"";
voice-family:inherit;
height: 23px;
width: 155px;
}
The hack is the two voice-family rules. Internet Explorer 5.5 stops reading during
the first line (it’s fooled into thinking the rule terminates due to the quoted curly
bracket); compliant browsers “recover” in the second voice-family line and continue
to the end of the rule, with the second set of height and width values overriding
the first. Everyone goes home happy—well, almost. Internet Explorer 5.5
sometimes also screws up the case of the links, ignoring the text-transform value.
A workaround is to create a second #navigation a rule and put the text-transform
property/value pair there:
#navigation a {
text-transform: uppercase;
}
As you can see, this fixes the navigation bar in Internet Explorer 5.5. Sadly, Internet
Explorer 5 for Windows cannot deal with text-transform at all, but it manages to display
everything else correctly. Still, it’s only a minor thing, and that browser’s market share is
rapidly reducing anyway. As for obsolete browsers (Netscape 4 et al.), hide the CSS and
they’ll get a perfectly navigable basic list. Again, everyone goes home happy (and I mean it
this time!).
It’s worth noting that many browsers permit text resizing. In such cases, users with
extreme setups (text size increased a couple of settings above the default) may end up
“losing” the second word of multiple-word links in this example. This will affect a minority
of users, but even so, take care to ensure your navigation makes sense even if the
final word is missing. For instance, contact details becoming contact still makes sense,
as does help desk becoming help; however, customer support becoming customer
could be problematic. Despite this issue, this method is still superior to using graphics
for each link: it’s easier to update, more accessible, and degrades more gracefully in
alternate browsers.
|
Discuss this article in the Web page design forum. Make sure you don't miss the next Insight article. Get the free Graphics.com newsletter in your mailbox each week. Click here to subscribe.
|
This article is adapted from Web Designer's Reference:
An Integrated Approach to Web Design with XHTML and CSS (friends of Ed), by Craig Grannell, and is reproduced here with permission. Copyright 2005 Craig Grannell.
|
