AWW CRAP! My tests with FireFox and Safari had good results. I just tested in IE. It came out crappy.
Any suggestions? ~ Mo On Nov 13, 3:30 pm, Mo <[EMAIL PROTECTED]> wrote: > 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.pnghttp://www.voyagercomponents.com/download/tr.pnghttp://www.voyagercomponents.com/download/bg.pnghttp://www.voyagercomponents.com/download/bl.pnghttp://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.jpgforacrude > > > 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.jpgforacrude > > > 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] -~----------~----~----~----~------~----~------~--~---
