Arian Hojat wrote: >Hello Everyone, > >I spent the night tonight trying to make Sliding Faux Columns but with >rounded edges at top and bottom of the columns. Also I wanted it so >the layout can lay on top of a gradient background where the gradient >will 'bleed through' the transparent areas of the rounded corners. > >This is what I came up with. >http://arihoj.freehostia.com/rsfc/rsfc.html >I thought it was decent for a 1st time effort. Its supposed to be a >mockup of one of Adobe's layout... >http://labs.adobe.com/technologies/flash9as3preview/ > >Had a question though... >Id like to make it so I dont use padding to achieve the >background-image layout, at least in the middle #body3 area where my >content is. >For example, look at how the bottom borders of the list in the right >sidebar dont extend all the way to the right. It is because padding is >used on its parent to push the background-images into place without >them overlapping and hiding each other. > >My 1st idea was to get rid of the left and right padding of 21px in >the #body2 rule, and somehow configure rest of layout to also not use >padding... But seems like it ruins the layout. > >Another idea is maybe move all the top and bottom areas to a 'negative >margin' rounded corner method, so no padding is necessary anywhere, I >think id prefer this method... >But as you can see it doesn't bleed through the corner images anymore. >http://arihoj.freehostia.com/rsfc/rsfc_negMargins.html > > >Any ideas? > >Thanks in advance, >Arian > > Hi Arian, Now the corners construction (top and bottom) consists of 3 parts: the middle part has the right corner of the left box and the left corner of the right box. Then if something is arranged in another way in the 2 content boxes, the images have to be adapted: the middle image is serving 2 containers!
I guess all problems will melt if you make two distinct corners constructions: 1 for the left box, 1 for the right box. Then you can do with the boxes whatever you want, and the corners wil stick to the box in question. This can be realized with only 2 images (1 for the left box corners together, and 1 for the right box corners together). In the css you can use almost the same styles for the left and right box: just give an extra class or id to get the right background corners. A small "example suite" is here <http://home.tiscali.nl/developerscorner/liquidcorners/more-rounded-corners_step1.htm>. Everything is liquid and adaptable! :-) For the background of the method and for more Xamples you can read: article and playgarden Liquid Round Corners <http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm>. 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/
