Hi Brian, Thank you for the link to your blog post. Your method explanation is well put together and clear. Unfortunately, however, it's not quite what I'm looking for.
I found an example online: http://modxcms.com/about/blog/rthrash/simple-rounded-corner-css-boxes.html that seemingly matches what I'm looking for. The concept is clear, but I need some help in figuring out how to determine margins/padding for the respective image used. If you or anyone else has used or understands the method demonstrated in the link provided, could you help clarify how to determine the needed margins/padding? Thanks. Regards, Dan ----- Original Message ---- From: "Jones, Brian" <bjo...@ur.ua.edu> To: "css-d@lists.css-discuss.org" <css-d@lists.css-discuss.org> Sent: Friday, May 1, 2009 1:57:22 PM Subject: Re: [css-d] How to make rounded corners box with one image? Hi Dan, Here's a recent post I wrote on our web design blog here at University of Alabama: http://webtide.wordpress.com/2009/04/21/one-way-to-do-rounded-rectangles-with-css-background-images/ I don't know if it would match what you are looking for because it's more than one image - but it's 2 instead of 4. It's pretty simple and seems to be working fine unless I missed something in my testing. Hope this helps. Brian Brian Jones Web Communications Specialist The University of Alabama bjo...@ur.ua.edu 205.348.8315 > -----Original Message----- > From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css- > discuss.org] On Behalf Of Dan King > Sent: Friday, May 01, 2009 12:25 PM > To: css-d@lists.css-discuss.org > Subject: [css-d] How to make rounded corners box with one image? > > > I'm relatively new to css and for the past few weeks, I've been trying to > create a rounded corners box with one image. I've searched online but > nothing I've found so far clearly explains how to use one image to create > the rounded corners box. They all suggest to use four 'hooks' i.e. divs > and use background positioning to give each of the hooks a background > position of a corner. While I understand the concept, I'm at a loss for > moving thehooks into proper position using margins/padding. > > I'd like to learn/figure out how to logically/mathematically determine how > much margin/padding to use in order to position the background image > properly to create the rounded corners effect. Currently, I've been > guessing/checking. > > I was able to piece together from web searches html and css for a round > corners box. The end product does create a rounded corners box but, the > css used causes issues when floating the containing div and more > importantly, I don't understand how it works/comes together. > > Below is the html and css for the rounded corners box. If anyone could > review the code and help me understand how to properly (with clean and > simple css) put together a rounded corners box it would be appreciated. > > Thanks. > > HTML: > <div class="profileBox"> > <div class="title"> > <h3>Title</h3> > </div> > <div class="content"> > <p>Content</p> > </div> > </div> > > CSS: > ..profileBox, .profileBox .title, .profileBox .title h3, .profileBox > .content { > background: #FFFFFF url(../images/rd_indigo_box.png) no-repeat 100% 100%; > } > > ..profileBox{ > min-width: 225px; > max-width: 500px; > margin: 10px 5px; > padding: 0 10px 0 0; > }/* Bottom right */ > > ..profileBox .title{ > background-position: 100% 0; > margin: 0 -10px 0 0; > padding: 0 10px 0 0; > max-height: 4.5em; > overflow:hidden; > } /* Top right */ > > ..profileBox .title h3{ > background-position: 0 0; > float:left; > color:#FFFFFF; > margin: 0; > padding: 8px 15px 16px; > } /* Top left */ > > ..profileBox .content{ > background-position: 0 100%; > margin: 0; > padding: 5px 5px 10px 15px; > overflow: hidden; > } /* Bottom left */ > > -Dan > > > > > > ______________________________________________________________________ > css-discuss [cs...@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
