Sidebox Table & Image Problem

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

:censored:

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.

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. :smile:

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;
}

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

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

:D

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.

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?

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;
}

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.

I increased the size of the top image thinking that it would cut out the gap between the top image and the middle. I've been messing with the font sizes and that seems to be the only way i can stop it happening, though for some reason the CURRENCY sidebox has a larger font even though i thought they were all running from the same bit of CSS.

nevertheless you've helped me a lot, thanks for taking the time, i really appreciate it.

cheers

:D

Believe it or not i use Firefox and i have the Firebug extension! I've not used Firebug much though, i tend to focus on Audio & Graphic work with little to no knowledge of PHP/CSS but my partner who generally does all our coding/programming has been ill so i wanted to see if i could get the basics of this site running.

I think i need a beer now, you guys must have spent an infinite amount of time dealing with this system to understand it so thoroughly, and as i said before i do appreciate you taking the time to help me.

cheers :smile:

The currencies heading, for no apparent reason, is a <label> inside the <h3>, and label elements have a slightly larger font-size applied to them. You can counteract this with a specific rule in your stylesheet:```
.leftBoxHeading label {
font-size: 1.0em;
}

I have done that, while it changed the font size for currencies it didn't remove the gap.

Nevertheless i'm sure i'll figure something out. Mate if i could buy you a beer i would, thanks a lot for your time and help today.

cheers

Shayne

Editing the top image to have longer "legs" would take care of it. It doesn't matter if the bottom of the bg gets cut off if it is straight lines.
The height difference is probably related in some way to there being a label element inside the h3 element.

Maybe there is a margin or padding on generic labels.```
.leftBoxHeading label {
font-size: 1.0em;
margin: 0;
padding: 0;
}

Where would i go to remove the label contained in the H3 element? the Stylesheet?

For some reason i can't get any categories or expages to display in the left column as well. I've set up a test product category, as well as making numerous EZpages and have turned them both on in the ADMIN section but with no luck.

Removing the label entirely would be done in the currencies sidebox module file (/includes/modules/sideboxes/your_template/currencies.php), line 38:php $title = '<label>' . BOX_HEADING_CURRENCIES . '</label>'; Change to```php
$title = BOX_HEADING_CURRENCIES;

Do you have the categories and ez-pages sideboxes turned on for the left column?

cheers again.

and yes i do, i have EZpages and Categories turned on for the left column, and have tried alternating ON/OFF for single column status.

it doesn't seem to be adding any new sideboxes when i turn them on and off, whatever is there now seems to be all i can get to show.

The currency label remove worked perfectly, thank you.

All issues have been resolved, thanks a lot for your help bud!

Now onto the searchbox, i'm assuming i can use the same CSS/image combination to customize the header searchbox?