Menu bar - that old favourite

[Andy Dingley]

I need a menu bar - the "tabbed folders" look, nothing particularly
odd. A highlighted tab for "current" and rollover highlighting too.

If this were for my own site, I'd do something like the "sliding doors"
CSS version and be done in minutes. I'd have nice
semantically-meaningful HTML and very few images too.

However the dezyner on this project has specified a weird font for the
tabs which I can't render from text and standard web fonts. So it looks
like I'm reduced to using bitmaps for each tab.

This is my dilemma - is there any way to use CSS bitmap rollovers _and_
have a text string in the HTML ?

I like the sliding doors approach because the text re-sizes on demand
and I don't have to generate 30 bitmaps. In the future there will be new
tabs and it would be nice to have them come straight from the database,
not Photoshop. However if I want this crazy font, am I really reduced
to just a triplet of fixed-size bitmaps for each tab ? Is that really
the best I can hope for ?

Font sizes are set in pixels (10px !) according to the design and the
tabs are fixed width. Usability is obviously poor, but that's not the
customer's priority.

Maybe I should go with <img> and ChavaScript rollovers for a quiet life
- it's clearly what they're happiest with.


All comments welcome

 

[Jedi Fans]

I need a menu bar - the "tabbed folders" look, nothing particularly
odd. A highlighted tab for "current" and rollover highlighting too.

If this were for my own site, I'd do something like the "sliding doors"
CSS version and be done in minutes. I'd have nice
semantically-meaningful HTML and very few images too.

However the dezyner on this project has specified a weird font for the
tabs which I can't render from text and standard web fonts. So it looks
like I'm reduced to using bitmaps for each tab.

This is my dilemma - is there any way to use CSS bitmap rollovers _and_
have a text string in the HTML ?

I like the sliding doors approach because the text re-sizes on demand
and I don't have to generate 30 bitmaps. In the future there will be new
tabs and it would be nice to have them come straight from the database,
not Photoshop. However if I want this crazy font, am I really reduced
to just a triplet of fixed-size bitmaps for each tab ? Is that really
the best I can hope for ?

Font sizes are set in pixels (10px !) according to the design and the
tabs are fixed width. Usability is obviously poor, but that's not the
customer's priority.

Maybe I should go with <img> and ChavaScript rollovers for a quiet life
- it's clearly what they're happiest with.


All comments welcome

not sure about the text+image thing BUT something to look into [cuts 30
bitmaps to 10]: <URL: http://wellstyled.com/css-nopreload-rollovers.html>

 

[jlbdoc95]

If the color difference is not that great, you might be able to get away and
keep the same "text image" for all different states (on/off/hover). If you
designer can get the text in a transparent fashion so that it looks good
against all 3 background, then that will simplify the coding quite a bit,
otherwise, good old roll overs might save you some headaches for sure.

 

[JDS]

In the future there will be new tabs
and it would be nice to have them come straight from the database, not
Photoshop.

This doesn't help with the rollovers, but I have a PHP script that will
generate an image of text from a string and your desired TTF (or Type 1)
font file:

http://www.newtnotes.com/index.php?itemid=105&catid=4


later...