Thank you for the help. I think I've got it going now. Here is the COMPLETE result of my tweaks to the code suggested by geocalleo (in case anyone comes looking for something like this in the future).
BG Components: (I couldn't figure how to post them to the FILES section for this group) http://www.voyagercomponents.com/download/tl.png http://www.voyagercomponents.com/download/tr.png http://www.voyagercomponents.com/download/bg.png http://www.voyagercomponents.com/download/bl.png http://www.voyagercomponents.com/download/br.png Code: <!-- Background w/ rounded corners --> <div class="bg"> <div class="white"> <div class="top"> <div class="right"> <div class="center"></div> </div> </div> <div class="content"> <div class="padding"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla quis urna. Nam ut tortor quis diam sagittis dignissim. Nulla eu lectus. Sed scelerisque aliquet nulla.</p> </div> </div> <div class="bottom"> <div class="right"> <div class="center"></div> </div> </div> </div> </div> <!-- End Background w/ rounded corners--> CSS: <style type="text/css"> html {background-color: #AAA;} .bg { margin: 0% 12%; } .white .top { background:url(images/tl.png) top left no-repeat; margin: 0; padding: 0; } .white .top .right { background:url(images/tr.png) top right no-repeat; height:24px; display: block; margin: 0; padding: 0; } .white .top .right .center { background:url(images/bg.png) top repeat-x; height:24px; display: block; margin: 0px 24px; padding: 0; } .white .content { background:url(images/bg.png) repeat; margin: -16px 0px; padding: 0; } .padding { padding: 0px 25px; } .white .bottom { background:url(images/bl.png) top left no-repeat; margin: 0; padding: 0; } .white .bottom .right { background:url(images/br.png) bottom right no-repeat; height:24px; display: block; } .white .bottom .right .center { background:url(images/bg.png) top center repeat-x; height:24px; display: block; margin: 0px 24px; padding: 0; } </style> On Nov 12, 3:04 pm, geocalleo <[EMAIL PROTECTED]> wrote: > Hi Mo, > > You have a few ways of going about doing this. > > One is using CSS3 to set the border radius of a box. Example below. > > .box { > border-radius:1.6em; > > } > > Unfortunately this doesn't work in IE6 and, I believe, 7 as well. > > I've been working on a project which requires TONS of rounded corner > boxes and the client wants the rounded corner boxes to work across all > major browsers. So I've gone about building my rounded boxes using > images and a lot more divs then I would like to use. Since these boxes > are being used all over the site and the width of a box changes from > one template to the next, I made my boxes expandable for both width > and height. Take a look at the link below. You'll get the actual > examples along with code. > > http://clients.interactivestrategies.com/NEXTDAY/site2/box.html > > Hope this helps. > > On Nov 11, 7:52 pm, Mo <[EMAIL PROTECTED]> wrote: > > > On our site redesign, I have a pretty complex background over which I > > will be laying a semi-transparent content-div BG. > > (seehttp://www.voyagercomponents.com/download/example.jpgfora crude > > example.) > > To improve scalability and decrease load times, I want to use small > > images and just REPEAT where necessary. In the example image, I also > > separately displayed the components used, for further understanding. > > > My initial thought was to have a <div> with 3 <spans> for each the > > left and right sides: > > <div class="content"> > > <div class="bgStyleHelper"> > > <span id="topLeft"> > > <span id="midLeft"></span></span> > > <span id="btmLeft"></span> > > > <span id="topRight"> > > <span id="midRight"></span></span> > > <span id="btmRight"></span> > > </div> > > <p> some content here </p> > > </div> > > > Then just set the BG's, sizes, etc. to make those line up on the left > > & right sides of the content div: > > topLft topRt > > r r > > e some content e > > p content content p > > e content content e > > a content content a > > t content content t > > - goes here - > > y y > > btmLft btmRt > > > span#topLeft{ > > width: 24px; > > height: 24px; > > margin: -24px 0px; > > padding: 0; > > display: block; > > background-image: url(images/bgBody_tpLt_24x24.png); > > background-position: top left; > > background-repeat: no-repeat; > > } > > span#midLeft{ > > width: 100px; > > height: 100px; > > margin: -25px 25px; > > padding: 0px 0px; > > display: block; > > background-image: url(images/bgBody24x24.png); > > background-position: center left; > > background-repeat: repeat-y; > > } > > span#btmLeft{ > > width: 24px; > > height: 24px; > > margin: 50px 0px; > > padding: 0px 0px; > > display: block; > > background-image: url(images/bgBody_btmLt_24x24.png); > > background-position: bottom left; > > background-repeat: no-repeat; > > } > > ... etc ... > > > But, I'm not making much progress. > > DOES ANYONE HAVE A BETTER WAY OF DOING THIS? > > > I'm eager to learn, so lay it on me! > > > Thanks-a-bunch, > > Mo > > > NOTE: I am pretty-much a novice, so feel free to over-explain. On Nov 12, 3:04 pm, geocalleo <[EMAIL PROTECTED]> wrote: > Hi Mo, > > You have a few ways of going about doing this. > > One is using CSS3 to set the border radius of a box. Example below. > > .box { > border-radius:1.6em; > > } > > Unfortunately this doesn't work in IE6 and, I believe, 7 as well. > > I've been working on a project which requires TONS of rounded corner > boxes and the client wants the rounded corner boxes to work across all > major browsers. So I've gone about building my rounded boxes using > images and a lot more divs then I would like to use. Since these boxes > are being used all over the site and the width of a box changes from > one template to the next, I made my boxes expandable for both width > and height. Take a look at the link below. You'll get the actual > examples along with code. > > http://clients.interactivestrategies.com/NEXTDAY/site2/box.html > > Hope this helps. > > On Nov 11, 7:52 pm, Mo <[EMAIL PROTECTED]> wrote: > > > On our site redesign, I have a pretty complex background over which I > > will be laying a semi-transparent content-div BG. > > (seehttp://www.voyagercomponents.com/download/example.jpgfora crude > > example.) > > To improve scalability and decrease load times, I want to use small > > images and just REPEAT where necessary. In the example image, I also > > separately displayed the components used, for further understanding. > > > My initial thought was to have a <div> with 3 <spans> for each the > > left and right sides: > > <div class="content"> > > <div class="bgStyleHelper"> > > <span id="topLeft"> > > <span id="midLeft"></span></span> > > <span id="btmLeft"></span> > > > <span id="topRight"> > > <span id="midRight"></span></span> > > <span id="btmRight"></span> > > </div> > > <p> some content here </p> > > </div> > > > Then just set the BG's, sizes, etc. to make those line up on the left > > & right sides of the content div: > > topLft topRt > > r r > > e some content e > > p content content p > > e content content e > > a content content a > > t content content t > > - goes here - > > y y > > btmLft btmRt > > > span#topLeft{ > > width: 24px; > > height: 24px; > > margin: -24px 0px; > > padding: 0; > > display: block; > > background-image: url(images/bgBody_tpLt_24x24.png); > > background-position: top left; > > background-repeat: no-repeat; > > } > > span#midLeft{ > > width: 100px; > > height: 100px; > > margin: -25px 25px; > > padding: 0px 0px; > > display: block; > > background-image: url(images/bgBody24x24.png); > > background-position: center left; > > background-repeat: repeat-y; > > } > > span#btmLeft{ > > width: 24px; > > height: 24px; > > margin: 50px 0px; > > padding: 0px 0px; > > display: block; > > background-image: url(images/bgBody_btmLt_24x24.png); > > background-position: bottom left; > > background-repeat: no-repeat; > > } > > ... etc ... > > > But, I'm not making much progress. > > DOES ANYONE HAVE A BETTER WAY OF DOING THIS? > > > I'm eager to learn, so lay it on me! > > > Thanks-a-bunch, > > Mo > > > NOTE: I am pretty-much a novice, so feel free to over-explain. --~--~---------~--~----~------------~-------~--~----~ -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [EMAIL PROTECTED] -~----------~----~----~----~------~----~------~--~---
