Nine Splice

Nine-Splice is a frame work for creating borders that I have been working on for a while. I was on the IRC when a Drupal user was inquiring about a good way to create borders around content. I offered to post it ... as it just my get my arse moving to finish it up. This is teh beginnning stages as I have some ideas to develop it into a module: particularly a "Theming Module".

The attached zip file contains several files. The way this works is this: I use the DREADED table to create a 3 x 3 framework around the content. Why a grid? Well, to be quite honest... it the best framework for our solution. I have three images:

1. one that provides the corners
2. one that provides the horizontals
3. and that provides the verticles

I start out with a square image that details the whole rectangle. From there, I crop that main image to just give me the horizontal and then the verticle segments. But working from a larger square image, I ensure that the graphics line up. Here is the CSS

/*nine-splice ... a work in progress from johnvsc */

table.nine-splice, table.nine-splice th, table.nine-splice tr, table.nine-splice td {
    margin: 0;
    padding: 0;
}

table td.nine-splice-1, table td.nine-splice-3, table td.nine-splice-7, table td.nine-splice-9 {
    background: url(nine-splice/blueSquare.png) no-repeat;
    height: 50px;
    width: 50px;
}

table td.nine-splice-2, table td.nine-splice-8 {
    background: url(nine-splice/h.png) repeat-x;
}

table td.nine-splice-4, table td.nine-splice-6{
    background: url(nine-splice/v.png) repeat-y;
}

table td.nine-splice-5{
    background-color: transparent;
}

table td.nine-splice-1, table td.nine-splice-4 {
    background-position: top left;
}

table td.nine-splice-2 {
    background-position: top center;
}

table td.nine-splice-3, table td.nine-splice-6 {
    background-position: top right;
}

table td.nine-splice-7 {
    background-position: bottom left;
}

table td.nine-splice-8 {
    background-position: bottom center;
}

table td.nine-splice-9 {
    background-position: bottom right;
}

As you might be able to tell, you can use this structure for multiple "borders" by just replacing the three styles that link the image. I will post visuals and more instructions at a later date as I a tired and loopy.