Sidebox Table & Image Problem

[anaesthesiac]

I have a question, i'm getting there slowly regarding the layout but i'm encountering one hurdle i can't get over. On my site i want the sideboxes to be contained in a table that is 3 cols by 3 rows with the main data contained in the middle col/row. The outer cols/rows contain images making up a bordered table. My problem is that i don't know how to get this to work!

I've made the table data in HTML and have created the images, but the problem seems to be as soon as i try and insert PHP data into the HTML it goes haywire.

An example can be seen here..

The first 4 sideboxes work fine, purely because they're all HTML. The ones underneath with the plain square layout are the ones i want to change but can't! I've spent a day and a half trying to fix this to no avail so any help will be appreciated.

cheers

[gjh42]

You're asking for help with a technique without telling us what you really want to accomplish. Are you just trying to have rounded boxes for the sideboxes? You don't need any tables for that; you can use the existing Zen Cart div structure and your stylesheet to do it all.

[anaesthesiac]

My apologies, i thought the site would provide enough reference for my question, what i want to accomplish is this:

I want all of the Sideboxes on my site [ie: reviews, information, curency, who's online etc] to be contained within a table that uses images to border it, not just stylesheet borders.

If you go to this site you'll see four tables to the left bound by a white/orange rounded rectangular table, then you'll see five square tables. I want these square tables to look like the top four tables [the orange/white ones]. THE SITE IS HERE

I'm sorry if i'm not explaining this cohesively, but i don't have a great deal of experience working with PHP, and certainly not with PHP/HTML in one file.

thanks for replying.

[gjh42]

Okay, as I thought, you just want rounded sideboxes. You don't need tables. All of this can be done with a couple of images for the top and bottom of the sideboxes, and some stylesheet rules.

Start by putting all of your blank_0x.gif images together in Photoshop (or go to the original box image if you have one), and slice it into three parts: a top that is a bit taller than the sidebox heading (probably 25px), a bottom that is just tall enough to hold the curves (16px), and a middle with both straight side borders. Save them as (for example) sidebox_top.gif, sidebox_bottom.gif and sidebox_middle.gif, in /includes/templates/your_template/images/.

Then add to your stylesheet

.leftBoxContainer {
    background: url(../images/sidebox_bottom.gif) no-repeat bottom center;
    padding-bottom: 16px;
    }
.leftBoxHeading {
    background: url(../images/sidebox_top.gif) no-repeat top center;
    }
.sideBoxContent {
    background: url(../images/sidebox_middle.gif) repeat-y;
    }

[gjh42]

BTW, in case it wasn't obvious, make the combined box image the same width as your finished sideboxes.

[anaesthesiac]

You are an absolute legend! I didn't realise it would be so easy to get this done. I still have two problems though.

1 is that there is still a white border around the sideboxes, i want this removed, and the 2nd problem is all images are the same width [147px] yet the middle is out of whack and hangs to the left giving it an off-kilter look.

So far so good though, i'm extremely thankful of you for taking the time to help me here