Mark Fellowes wrote: >It's actually the UL that will have the one background image. The image is >moved up and down via the hover and active classes. I should have posted this >before (it needs some cleaning up and integration into layout) > >http://pamshop.com/Template1/1rollover.html > > Hi Mark, So combining this example with the first post, I understand you ask: - how can I make this ul-box-img to be liquid, shrinking or expanding together with the left column?
I think there are 2 possibilities (if I'm wrong, I'll be corrected I hope ;-) ): 1. the box has a fixed height. That means the titles of the menu-items have to be images too, for otherwise the items can escape from the box when the visitor is enlarging the font-size. In this case you can add an #ulwrapper around the ul. You cut the img in 2 parts, and then give the #ulwrapper the leftside border part of the img as bg-img. The rest of the img you can use as bg-img in the ul itself: positioned at 100% 0 (beginning at the the right side; going to the left as far as needed). 2. The ul has no fixed height. In this case the whole image has to be liquid: as well horizontally (adapting to the screen width) as vertically (adapting to the font-size). Then a kind of liquid corners/borders will be the solution. Two small images are needed (one for the top and bottom parts, one for the sides along the li's). As example how this can be done with css: http://home.tiscali.nl/developerscorner/liquidcorners/liquid-corners-playgarden-08a.htm - Next task will be the hovering over the li-items, I guess that can be made with another (combined) img that is called in the right position at hover. Greetings, francky ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
