DIV backgrounds and text size

[edacsac]

Hi all,

Just an opinion I would like to get from the folks here. For example: Let say you create a navigation bar thats contained within a div. You make a background image that is gradient from top to middle to bottom - dark/light/dark. You add your text links and align them over the middle lighter area of the div background, looks great. Now do you compensate for someone using a different text size? Maybe creating 3 different DIVS - two to fade from dark to light both ways, and the middle one being the light color of the gradient to hold the text? Or do you just forget about it and let the background repeat if the font size changes?

This is one of those pet peave things of mine, where I'd create images for links and have the peace of mind that my design won't be broken. I made a new site design in pure css, that in my opinion looks sweet, but I'm ready to trash it and go back to a table/image heavy design because I can't have absolute control of how it will look with all the variables considered.

Would love to hear opinions!

[Fotiman]

First, I would probably never create a navigation with a dark/light/dark gradient... I find that to be somewhat cheesy, and very 1990's. However, if I *did* want to do something like this in a way that worked for any size text, here's how I'd do it.

1. Create 2 background images: 1 for the top gradient and 1 for the bottom gradient.
2. Apply the bottom image to the outer-most container's background
3. Create another container within that one and apply the top image to it's background.
4. Your text should have the 'light' background color

Hope that helps.

[cmarshall]

I agree with Fotiman. Use two gradients, but it's better if you don't use any. Gradients introduce accessibility and usability issues. One of my beefs with the "Web 2.0" fluff is that it can look truly poopy and downright unusable in many cases.