bookmarks keep it handy, spread the word
stepone generate image & code...
steptwo right-click, save image as...
stepthree copy & paste css.
/* set the image to use and establish the lower-right position */
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2{
background: transparent url(img.php.png) no-repeat bottom right}
.cssbox{
/* intended total box width - padding-right(next) */
width:335px !important; /* IE Win = width - padding */
width: 320px;
/* the gap on the right edge of the image (not content padding) */
padding-right:15px; /* use to position the box */
margin:20px auto}
/* set the top-right image */
.cssbox_head{background-position:top right;
/* pull the right image over on top of border */
margin-right:-15px;
/* right-image-gap + right-inside padding */
padding-right:40px}
/* set the top-left image */
.cssbox_head h2{
background-position:top left;
margin:0; /* reset main site styles*/
border:0; /* ditto */
/* padding-left = image gap + interior padding ... no padding-right */
padding:25px 0 15px 40px;
height:auto !important;
height:1%} /* IE Holly Hack */
/* set the lower-left corner image */
.cssbox_body{
background-position:bottom left;
margin-right:25px; /* interior-padding right */
padding:15px 0 15px 40px} /* mirror .cssbox_head right/left */
stepfour copy & paste xhtml.
<div class="cssbox">
<div class="cssbox_head">
<h2>This is a header</h2>
</div>
<div class="cssbox_body">
<p>This is for your content.</p>
</div>
</div>
othersteps confused yet?
Because this technique isn't of my own design, there is no reason for me to reiterate everything that is stated on Ryan's site.
Lastly, If you have any comments or suggestions there's a little box at the bottom of the page. I do answer all the email I recieve, but sometimes it might take a few days. Sometimes it only takes a few minutes though, so just cross your fingers and hit send.