Yuku free message boards

Zoetko's guide to 4 sided borders.

Please note, if your not well versed with DIV's, you should read my guide to DIVS before this guide.

Today we are going to make a more complicated table design using a 4 sided border, but first, lets go over the requirments to make such a border.

Requirements

1) You will need 4 images to create the initial border. The images should be symmetrical opposites. I.e. The left sided image should be a mirror of the right sided image. The top image should be a mirror of the bottom image. See below:

TOP CENTER


LEFT CENTER


RIGHT CENTER


BOTTOM CENTER


2) You will need 4 images for each corner, these images should have the normal "border", plus whatever you want in each corner. It is important that the images are still symmetrical, so that when the corner image is overlayed over the border, the actual border lines line up. See below for example:

TOP LEFT


TOP RIGHT


BOTTOM LEFT


BOTTOM RIGHT


Ok now you have an idea of the images your going to need, so lets now start building our border up. We will build it up, Div by Div, so you can see what each bit of the code is doing, I have also labeled each Div with a name, this is not needed, but it helps read the code when you look at it.

Step 1)

<div
class="Top Center"
style="
max-width:100%;
background: #b5dce3 url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/tc.jpg) repeat-x top center;"> </div>

Which Looks like this:

We can't see the border, as there is nothing in the div to space it out, so lets quickly add an inner div, and give it padding, so we can see our border:

<div
class="Top Center"
style="
max-width:100%;
background: #b5dce3 url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/tc.jpg) repeat-x top center;">

<div
class="The Bit In The Middle"
style="
padding: 120px 20px 20px 20px;">

<p align="center">bit of a filler!</p>
</div></div>

Which looks like this:

Step 2) Ok, so now lets add the next part of the border, once again, we will also use an inner div, just so we can see it all:

<div
class="Top Center"
style="
max-width:100%;
background: #b5dce3 url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/tc.jpg) repeat-x top center;">

<div
class="Left Center"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/lc.jpg) repeat-y left center;">

<div
class="The Bit In The Middle"
style="
padding: 120px 20px 20px 20px;">

<p align="center">Your content here</p>
</div></div></div>

Which looks like this:

Step 3) Ok, I think you get the idea now, so lets add our 3rd edge of the border:

<div
class="Top Center"
style="
max-width:100%;
background: #b5dce3 url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/tc.jpg) repeat-x top center;">

<div
class="Left Center"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/lc.jpg) repeat-y left center;">

<div
class="Right Center"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/rc.jpg) repeat-y right center;">

<div
class="The Bit In The Middle"
style="
padding: 120px 20px 20px 20px;">

<p align="center">Your content here</p>
</div></div></div></div>

which looks like this, its starting to take shape now, although you can see its messy in the corners!

Step 4) Ok, now lets add our final part of the border: ( This is getting easy now! )

<div
class="Top Center"
style="
max-width:100%;
background: #b5dce3 url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/tc.jpg) repeat-x top center;">

<div
class="Left Center"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/lc.jpg) repeat-y left center;">

<div
class="Right Center"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/rc.jpg) repeat-y right center;">

<div
class="Bottom Center"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/bc.jpg) repeat-x bottom center;">

<div
class="The Bit In The Middle"
style="
padding: 120px 20px 120px 20px;">

<p align="center">Your content here</p>
</div></div></div></div></div>

Which looks like this:

As you can see from the above, the border looks pretty messy, this is for two reasons, one, we dont have enough padding to make it look correct ( i.e. the border needs more filling out with stuff in the middle to look right, and the images all overlap on the edges which look aweful.

This is where the "corner" images come in, these are going to be overlayed onto each corner of the DIV border to hide the overlapping borders. So lets start hiding them!

Step 5) Lets add in the top left corner image:

<div
class="Top Center"
style="
max-width:100%;
background: #b5dce3 url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/tc.jpg) repeat-x top center;">

<div
class="Left Center"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/lc.jpg) repeat-y left center;">

<div
class="Right Center"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/rc.jpg) repeat-y right center;">

<div
class="Bottom Center"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/bc.jpg) repeat-x bottom center;">

<div
class="Top Left"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/tl.jpg) no-repeat top left;">

<div
class="The Bit In The Middle"
style="
padding:100px 20px 120px 40px;">

<p align="center">Your content here<br><br><br><br><br><br><br><br><br></p>
</div></div></div></div></div></div>

Which looks like this:

Step 6) Ok, so now lets add the next corner:

<div
class="Top Center"
style="
max-width:100%;
background: #b5dce3 url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/tc.jpg) repeat-x top center;">

<div
class="Left Center"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/lc.jpg) repeat-y left center;">

<div
class="Right Center"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/rc.jpg) repeat-y right center;">

<div
class="Bottom Center"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/bc.jpg) repeat-x bottom center;">

<div
class="Top Left"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/tl.jpg) no-repeat top left;">

<div
class="Top Right"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/tr.jpg) no-repeat top right;">

<div
class="The Bit In The Middle"
style="
padding:100px 20px 120px 40px;">

<p align="center">Your content here<br><br><br><br><br><br><br><br><br></p>
</div></div></div></div></div></div></div>

Which looks like this:

Step 7) We are almost there now, lets add the 3rd corner:

<div
class="Top Center"
style="
max-width:100%;
background: #b5dce3 url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/tc.jpg) repeat-x top center;">

<div
class="Left Center"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/lc.jpg) repeat-y left center;">

<div
class="Right Center"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/rc.jpg) repeat-y right center;">

<div
class="Bottom Center"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/bc.jpg) repeat-x bottom center;">

<div
class="Top Left"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/tl.jpg) no-repeat top left;">

<div
class="Top Right"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/tr.jpg) no-repeat top right;">

<div
class="Bottom Left"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/bl.jpg) no-repeat bottom left;">

<div
class="The Bit In The Middle"
style="
padding:160px 20px 160px 40px;">

<p align="center">Your content here<br><br><br><br><br><br><br><br><br></p>
</div></div></div></div></div></div></div></div>

Which looks like this:

Step 8) Now lets add the 4th and final corner to give us our complete 4 corner border!

<div
class="Top Center"
style="
max-width:100%;
background: #b5dce3 url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/tc.jpg) repeat-x top center;">

<div
class="Left Center"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/lc.jpg) repeat-y left center;">

<div
class="Right Center"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/rc.jpg) repeat-y right center;">

<div
class="Bottom Center"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/bc.jpg) repeat-x bottom center;">

<div
class="Top Left"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/tl.jpg) no-repeat top left;">

<div
class="Top Right"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/tr.jpg) no-repeat top right;">

<div
class="Bottom Left"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/bl.jpg) no-repeat bottom left;">

<div
class="Bottom Right"
style="
max-width:100%;
background: transparent url(http://static.yuku.com/domainskins/bypass/img/arizona/paws/br.jpg) no-repeat bottom right;">

<div
class="The Bit In The Middle"
style="
padding: 220px 240px 220px 240px;">

<p align="center">Your content here<br><br><br><br><br><br><br><br><br></p>
</div></div></div></div></div></div></div></div></div>

Which looks like this!

Don't forget just because you have built a 4 corner DIV, does not mean you cant nest your normal divs inside or outside of it! Your imagination really is your only limit!

Check this out to see what I mean!

I hope you have all enjoyed this guide, feel free to hit me up with any questions if you get stuck, and as always, have fun!

*hugs*

Zoe