Side Box Header Help

[kobra]

Change your

background: url(http://www.imperialgiftsnwares.com.a...homepage15.jpg) #669966;

To:

background: url(../images/homepage15.jpg) no-repeat;

[imperialis]

everything is driving me crazy
it just won't happen for me
my banner looks crap as it wouldnt load as a jpg so i had to change it to gif grrr and everything else i want to do wont work

[gjh42]

You need to merge the new declarations with the existing ones, which requires juggling in a few places. There are existing properties which confilct with some of the new ones, and the existing ones need to be deleted. It is also good to consolidate properties into one declaration where possible.

Here is a cleaned up version of what you posted. I can't guarantee it will do everything you want, but it should get you started.

/*sideboxes*/
.columnLeft {}
.leftBoxHeading, .rightBoxHeading {
    background: url(../images/top.jpg) no-repeat;
    border: none;
    padding: 0.5em 0.2em;/*or if you prefer, padding: 0.2em 0em;*/
    }
.centerBoxHeading {
    margin: 0em;
    background: url(../images/homepage15.jpg) #669966;
    padding: 0.5em 0.2em;
    }
.leftBoxContainer, .rightBoxContainer {
    background: url(../images/middle.jpg) repeat-y;
    border: none;
    }
.sideBoxContent {
    background: url(../images/bottom.jpg) no-repeat bottom center;
    border: none;
    }
h3.leftBoxHeading, h3.leftBoxHeading a, h3.rightBoxHeading, h3.rightBoxHeading a {
    font-size: 1.1em;
    color: #FFFF00;
    }
h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
    color: #FFFF33;/*or #FF0000*/
    text-decoration: none;
    }

[imperialis]

Thanks Geoff
That worked yay!!!
Its a bit messy it may be the images not lining up..hmm
Thanks again

[gjh42]

Now that I see what your bg images look like, I can advise where you need to put padding. To give the text some breathing room, modify .sideBoxContent to look like this:

.sideBoxContent {
    background: url(../images/bottom.jpg) no-repeat bottom center;
    border: none;
    padding: 0 .3em 1em .5em;
    }

Adjust to taste.

[gjh42]

Part of the choppiness is the fact that the top and middle images don't exactly match, so the main color breaks and the edges jump from one thickness to another.

Part of it is that the top image is taller than the standard heading height, so the bottom of the swirl gets cut off. You can increase the padding on the heading so it expands to show more of the swirl, though that will push the content down by the same amount.

.leftBoxHeading, .rightBoxHeading {
    background: url(../images/top.jpg) no-repeat;
    border: none;
    padding: 0.5em 0.2em 2.0em;/*adjust as required*/
    }

Alternatively, if the top swirl is tall, you can combine and stretch the top and middle images and make one image that is as tall as any sidebox you would ever have. Then you would eliminate any background in the heading and put the modified image in the container, where it won't matter how tall the heading is.

.leftBoxHeading, .rightBoxHeading {
    background: none;
    border: none;
    padding: 0.5em 0.2em;
    }

.leftBoxContainer, .rightBoxContainer {
    background: url(../images/topmiddle.jpg) no-repeat;
    border: none;
    }

[imperialis]

Thanks Glenn
I will do that and see how it looks, one step at a time haha i'm so new to this but your help is so much appreciated

[imperialis]

Hey Glenn
When I open all the images in fireworks they do match up perfectly
Is there something in the code thats pushing the top image right that little bit?

[gjh42]

A standard stylesheet has this

h1, h2, h3, h4, h5, h6 {

    margin: 0.3em 3px;
    }

which will shift h3 elements in by 3px.
You need to explicitly override that for the sideboxes by adding margin: 0;:

.leftBoxHeading, .rightBoxHeading {
    background: url(../images/top.jpg) no-repeat;
    border: none;
    padding: 0.5em 0.2em 2.0em;
    margin: 0;
    }

If it doesn't work here, put it in
h3.leftBoxHeading, h3.leftBoxHeading a, h3.rightBoxHeading, h3.rightBoxHeading a {

[imperialis]

Thanks Glenn
Thats perfect your a legend

I have some more questions if you have time to help?

Can I have a background image in the centre box where it says Congratulations you have installed zen cart?
I have 3 images for this aswell