Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / .centerColumn add image to top

.centerColumn add image to top

Locked

Views: 1,440

Results 1 to 7 of 7
This thread is locked. New replies are disabled.
28 Nov 2007, 7:20 PM
#1
cgardner avatar

cgardner

New Zenner

Join Date:
Sep 2007
Posts:
46
Plugin Contributions:
0

.centerColumn add image to top

I have a couple of problems that seem like they could be easily answered. I want to add an image to the center Column. So I added a test image to CSS:

.centerColumn {
background-image: url(../images/nirvanagrandopeningsale.jpg);
background-repeat: repeat-x;
height: 90px;
margin:0;
padding-top: 0;
}

It worked fine, except that it lines up with the h1. Not sure how to change this. See it at http://diginirvana.com/zen_cart/store

You'll also notice if you click on a product, that it covers the product image too.

How do I get the image to not be aligned with h1? Also, how do I move down the product?
Thanks for any help!
Carina

28 Nov 2007, 7:39 PM
#2
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: .centerColumn add image to top

Increase the padding-top and the content will move down.

You are telling .centerColumn to be 90px high. Did you want the bg image to be 90px high? If so, you have to make the image file that size - you can't specify it with CSS.

28 Nov 2007, 8:35 PM
#4
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: .centerColumn add image to top

As far as I can see, you still have .centerColumn unchanged in your stylesheet, although the display has changed:```
.centerColumn {
background-image: url(../images/nirvanagrandopeningsale.jpg);
background-repeat: repeat-x;
height: 90px;
margin:0;
padding-top: 0;
}

On your product page, it appears that everything except the product main image is moving down to comply with the padding. This doesn't make sense. Unfortunately I don't have any more time right now to figure it out. Hope someone can step in.
28 Nov 2007, 8:38 PM
#5
cgardner avatar

cgardner

New Zenner

Join Date:
Sep 2007
Posts:
46
Plugin Contributions:
0

Re: .centerColumn add image to top

Thanks for your help. I just changed the padding-top in h1. That fixed everything but the product.

I also just noticed that the problem occurs on the contact us page too. Hmmm. Any suggestions.

28 Nov 2007, 8:42 PM
#6
cgardner avatar

cgardner

New Zenner

Join Date:
Sep 2007
Posts:
46
Plugin Contributions:
0

Re: .centerColumn add image to top

I figured it out! Thanks for all your help!

28 Nov 2007, 8:42 PM
#7
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: .centerColumn add image to top

Changing the h1 padding-top is the wrong way to get a universal solution to the problem, and will possibly cause problems if h1 is used anywhere except in that page location.

CHange .centerColumn as described and see how that works.

Ah good! Glad you got it!

Looks great!