Re: [css-d] How to make rounded corners box with one image?
On 5/2/09 9:51 AM, Dan King dan.king...@yahoo.com wrote: 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. The technique in the article seems to have a lot of limitations (at least the dropped shadow part). Seems like your box cant be longer than the image used, or wider than that single image. If you have fixed width, it is easy to do rounded corners with one image. But if the box is flexible, you can try using jquery options: http://15daysofjquery.com/wrap-it-up-pretty-corners/13/ - divya -- I blog at http://nimbupani.com/blog __ 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/
Re: [css-d] How to make rounded corners box with one image?
The values you need will depend on the radius of your corners and on the offset of the drop shadow. If you don't use it already I would strongly recommend familiarising yourself with firebug. Thanks for the tip on using firebug; it made creating the rounded corners box so much easier. Previously, I had only used it for debugging javascript. I wonder how one would do things like rounded corners boxes without such as tool as firebug. -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/
Re: [css-d] How to make rounded corners box with one image?
Hey dan, 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 The problem is with what you think you want. Using a single image will not allow for expansion of the box if someone has the default text size kicked up. This can get you into difficulties if, for instance, the text color of the box is the same color as the background everywhere else, since the text will, with a larger text size, overflow your single image background. You can't (and shouldn't) expect that all computer/screen/default font size/resolution combinations will see what you see. Better for you to bite the bullet and learn proper css technique to allow for as many possible combinations as possible. Which means a sliding technique using two images for a fixed width box. -- Ciao for now, bj mailto:b...@bitchslappin.net __ 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/
Re: [css-d] How to make rounded corners box with one image?
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. The values you need will depend on the radius of your corners and on the offset of the drop shadow. If you don't use it already I would strongly recommend familiarising yourself with firebug. Copy the example and replace the background image with your own. Firebug allows you to adjust CSS (and lots of other things) live so you can get instant visual feedback as to what the different values are doing to the rendering. Another way of doing rounded corners with a single background image is here http://www.schillmania.com/content/projects/even-more-rounded-corners/ . __ 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/
Re: [css-d] How to make rounded corners box with one image?
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 h3Title/h3 /div div class=content pContent/p /div /div CSS: ..profileBox, .profileBox .title, .profileBox .title h3, .profileBox .content { background: #FF 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:#FF; 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/
[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 h3Title/h3 /div div class=content pContent/p /div /div CSS: ..profileBox, .profileBox .title, .profileBox .title h3, .profileBox .content { background: #FF 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:#FF; 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/
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 h3Title/h3 /div div class=content pContent/p /div /div CSS: ..profileBox, .profileBox .title, .profileBox .title h3, .profileBox .content { background: #FF 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:#FF; 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/