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

[anaesthesiac]

I have figured out how to remove the border, but now i'm getting a gap between the top image and the middle, it seems to be bigger and smaller depending on the table as well.

Same deal with the middle being off-centre to the top and bottom images. All images are exactly 147pixels wide so i figured they should all fit in a uniform manner.

This one i can't figure out.

[anaesthesiac]

Ok apologies but i have realised i had my default box size set to 150, it works great now! But still i'm getting the gap between the top image and the background...

where should i look to fix this?

[gjh42]

When I posted before, the sidebox heading divs were 24px high; now they are 31px high. Apparently the top image is now 30px high.
You could center the background for the middle section if you need to with

.sideBoxContent {
    background: url(../images/sidebox_middle.gif) repeat-y center center;
    }

[gjh42]

For website styling and other work, you should get Firefox and its Web Developer and Firebug extensions. They have tools that can show you quickly what elements to apply styling to, and try things on the fly. These are the tools that let us give exact answers to questions like yours.