I want the bar to be scalable if the user chooses to make the font bigger. What changes would you suggest to my css to allow this bar to scale better? Currently the background image gets messed up when you the user scales the text.

What changes would you suggest to my css to allow this bar to scale better? Currently the background image gets messed up when you the user scales the text.
I'm afraid that there may be no good solution to this problem. CSS has its limitations. One cannot create any design that one wants. You may have to alter the design.

rmedek

07-24-2007, 02:16 AM

You could make the blue gradient image three times as tall, and use it as a bottom-aligned background image to a div surrounding the ul, rather than the ul itself. Then, as the ul expands it would give the impression that the background image is growing to contain it.

Just an idea…I don't know I would go that route, but it should work.

po3

07-24-2007, 02:25 AM

rmedek, wouldn't that cause the horizontal line to no run through the type? Could I make the image 3xs as tall like you suggested but get it to align vertically on center so as the height of the bar changes the horzontal would alway be in the cennter of the text? Would a new background image start if the row breaks and drops to the next line or would the image then just now center on the two rows vs the one and therefore not acomplish what I'm looking for.

rmedek

07-24-2007, 02:47 AM

Hm, I'm not sure…lemme do all the work for you and see if it helps:

http://littlethinky.com/examples/bigger_links.php

You should play with the image and the positioning to make it suit your needs. Hopefully this will get you started.