Sent by Zoe M. Gillenwater on 3 November 2005 22:10
I need to create this nav bar in CSS, and after trying a number of
different methods and not being really happy with any of them, I'm
looking for your advice:
http://www.hsrc.unc.edu/temp/header.png
Here are the basic requirements:
- Right now the nav bar is left aligned, but it could be centered at
some point. So those tabs need to have transparent corners so they can
sit over any portion of the background image above. It would also be
nice to have them be transparent PNGs because of the drop shadow beneath
them that must sit over different colors depending on whether the page
is the home page or an inner page.
- It needs to be accessible, meaning if CSS is turned off or images are
turned off it's still useable.
- It needs to change on rollover (not shown in image I posted).
I'm not going to bother trying to create those tabs as real text on top
of images, because I think tabs that wrap look really goofy. So that
option is out. I'll just have these as images, text and all, and set a
min-width to keep them from wrapping.
OPTION 1: Slice up the individual tabs and stick them in the source of
the page using the img element with alt attributes.
This is easy and degrades well in text-only browsers, but it looks
strange with CSS turned off (and I do expect to have a significant NN4
audience, so this matters to me) since there would be a bunch of tabs
stacked vertically down the page. The rollovers would also have to be
done via Javascript, and all that preloading code quickly gets
unmaintained and messy.
OPTION 2: Slice the three states of the nav bar as one big image, use
background positioning to control what piece of it shows for each tab
and each tab state, and use image replacement to hide the real text.
This degrades well in text-only browsers and with CSS turned off, since
it reverts to a regular list, so I prefer this over option 1. But
there's a huge problem in IE: the filter used to make the transparent
PNGs work in IE depends on you removing the background images, so you
can no longer use background positioning to move the big image around,
so this method becomes completely unuseable. Unless something can see
how to do it without PNGs.
OPTION 3: Slice each state of each tab as its own image, set them as
background images, and use image replacement to hide the real text.
This fixes the IE problem and still degrades well. But, if you use an
image replacement method that works with images off (which I want to do,
since it's more accessible) then the text can peek out of the
transparent areas of the PNGs. The alternative is to hide the text
altogether (by moving it off screen, etc) but these image replacement
methods fail with images off and CSS on.
Does anyone have another idea of how I can construct this nav bar, or do
I need to pick my poison? (bloated messy Javascript vs. screw the no
images people)
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
