Wonderbaby Designs wrote: regarding http://www.wonderbabydesigns.com/testing/center.htm >> Wonderbaby Designs wrote: >> >> >>> small background images to create the illusion of equal-height >>> columns, but >>> that won't work with my large gradient background images. I left the >>> wrappers there in case they will help with this problem. >>> >> Sure, you can make it work. Create one image that is a strip of the tan >> and purple that makes up the middle portion of the page. Add this as a >> background image on the outermost wrapper that tiles downward. Create >> another image that is your bottom gradient and apply it as a >> non-repeating background image on the next wrapper nested in, pinned to >> the bottom. This background will layer on top of the previous background >> image seamlessly, and as long as both wrappers have a float containment >> method applied to contain all three columns, you'll be golden. >> > > I am having trouble picturing how to do this. > > The page has a variable width from 750 px to 1100 px so what size do I make > the solid background image that goes into the outer wrapper that will allow > the center content to expand and contract?? >
If your max-width is 1100px, make it 1100px wide. More or less of the right side of it will show depending on how wide someone's browser window is. Your white line delineating the third column complicates things. If you need to have this, I would still tile a tan/purple strip down the body or outermost wrapper of the page. Then, you'd need another wrapper inside to place another background image that only contains the white vertical line and transparent space all around it. You'd need to use a liquid faux columns technique to size and apply the background image: http://www.communitymx.com/abstract.cfm?cid=AFC58 Note that this is not a basic technique, so if you're new to CSS you may be confused by it. Your whole layout is pretty complicated, actually. If you're new to CSS, I'd advise not biting off so much at once and simplify all those graphics. > Also, my gradient images are all tall, narrow slices that tile horizontally, > to keep the file size small and to allow them to expand with the width of > the page. How can I do that with this method?? > Just tile them horizontally using the background-repeat property. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/
