Now we need to create a table for our updates box : ) The table must be the same width and height as your box. No cellspacing, cellpadding, no border. 3 rows and 3 columns. Make the table background your box image. So my table code looks like this :

You will then need to adjust the height of the top and bottom rows to accomodate the center area for your updates. For this I am going to use rulers :) First I am going to measure the top border and then I am going to measure from the bottom of the box, to the top of Updates.. ( To access Rulers in PSP 7 go into VIEW >> RULERS>> ) Here are screenshots of how I measured my box.

Mine came to around 32 bottom and 10 top. So here is what my table code looks like now :

Now do the same for the width of the right and left borders. Remember to include items in positions similar to my hearts.
So my widths were right 12 and left 18. So I am going to make the widths for the top right cell and the top left cell according. And my code now looks like this :

More math : p Take the total height of your image and subtract the top row height and the bottom row height. For me the equation would look like this : 160 -10 - 32 = 118. Keep the sum of your equation in mind, you will need it for your layer : ) Now do the same with the total width of your image minus right width and left width so my equation looks like 242 - 12 - 18 = 212. These sums make up the width and height of our layer. In the center cell of your second row, paste in the following code :

So now my code looks like this :

Now all you do is ad your updates between the div tags. The following code creates the updates box seen below it :) Granted I had to adjust my bottom height and layer height a little as the content was running over the word UPDATES but you get the gist of it ; ) All of the additional stuff in the div code is style properties I added so you could see the real effect of the updates box. When used on a matching website with stylesheets you wont need to add any to the code.

~Link Hearts Enchanted~

Links are definitely appreciated! Please feel free to right click to save one of these images to your hard drive and link them back to:
http://www.heartsenchanted.com

Thanks for your support!

Home