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 [[email protected]]
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/
