Draggable Resizable Box with Rounded Corners Part: 2

In this next section of this tut I will be going over the CSS implications. To read Part 1 click here. This example will use the current Prototype 1.6 Library so if you don't like prototype this tut is not for you. To just skip to the example you can look here.

2.The Look and Feel
First lets go over the skeleton. Box needs to be absolute, no surprise there. The important thing here is that we make sure we set the positioning to relative for each section of the box (top, middle bottom) for this we can now absolute position elements within the box.

.box {
 position: absolute;
}
.box .top {
 background: transparent url(images/left-corners.png) no-repeat scroll 0pt 0pt;
 padding-left: 6px;
 position: relative;
}
.box .middle { 
 background: transparent url(images/left-right.png) repeat-y scroll 0pt;
 padding-left: 6px;
 position: relative;
}

.box .bottom {
 background: transparent url(images/left-corners.png) no-repeat scroll 0pt bottom;
 padding-left: 6px;
 position: relative;
}

The top right styles need to fit in with the sliding doors technique to prevent the title from breaking the title lets set the ".center" overflow to hidden. There aren't any whiz bang features here as well.

.box .top .right {
 background: transparent url(images/right-corners.png) no-repeat scroll right 0pt;
 padding-right: 6px;
}
.box .top .center {
 background: transparent url(images/top-bottom.png) repeat-x scroll 0pt 0pt;
 overflow: hidden; 
 color: #15428B;
 font-weight: bold;
 padding: 5px 0pt 4px;
 width: 100%;
}

Okay I lied there isn't much to the CSS besides the sliding doors technique. Two last points...
1. Set your ".middle .center .content" to "overflow: auto" to enable a scrollbar in your middle.. Looks pretty sexy!

.box .middle .center .content {
 background:transparent none repeat scroll 0% !important;
 border-color: #3168D5;
 border-style:solid;
 border-width:1px;
 overflow: auto;
 position: relative;
}

2. With the current CSS you will be able to absolute position the handles to different parts of the box.

.box .top_handle {
 background:transparent url(images/top-bottom.png) repeat-x scroll 0pt 0pt;
 cursor:n-resize;
 height:6px;
 left:0;
 top:0;
 width:100%;
 line-height:6px;
 overflow:hidden; 
 position:absolute;
}
.box .bottom_handle {
 background:transparent url(images/top-bottom.png) repeat-x scroll 0pt bottom;
 bottom:0;
 cursor:s-resize;
 height:6px;
 left:0;
 width:100%;
 line-height:6px;
 overflow:hidden; 
 position:absolute;
}
.box .left_handle {
 background:transparent url(images/left-right.png) repeat-y scroll 0pt;
 cursor:w-resize;
 height:100%;
 left:0;
 top:0;
 width:6px;
 line-height:6px;
 overflow:hidden;
 position:absolute;
}
.box .right_handle {
 background:transparent url(images/left-right.png) repeat-y scroll right 0pt;
 cursor:e-resize;
 height:100%;
 right:0;
 top:0;
 width:6px;
 line-height:6px;
 overflow:hidden; 
 position:absolute;
}
.box .top_left_handle {
 background:transparent url(images/left-corners.png) no-repeat scroll 0pt 0pt;
 cursor:nw-resize;
 height:6px;
 left:0;
 top:0;
 width:6px;
 line-height:6px;
 overflow:hidden;
 position:absolute;
}
.box .top_right_handle {
 background:transparent url(images/right-corners.png) no-repeat scroll right 0pt;
 cursor:ne-resize;
 height:6px;
 right:0;
 top:0;
 width:6px;
 line-height:6px;
 overflow:hidden; 
 position:absolute;
}
.box .bottom_left_handle {
 background:transparent url(images/left-corners.png) no-repeat scroll 0pt bottom;
 bottom:0;
 cursor:sw-resize;
 height:6px;
 left:0;
 width:6px;
 line-height:6px;
 overflow:hidden; 
 position:absolute;
}
.box .bottom_right_handle {
 background:transparent url(images/right-corners.png) no-repeat scroll right bottom;
 bottom:0;
 cursor:se-resize;
 height:6px;
 right:0;
 width:6px;
 line-height:6px;
 overflow:hidden;
 position:absolute;
}

Handles are a go! in this next part we will be discussing the JS implications.