Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Positioning the Product Description

Positioning the Product Description

Views: 707

Results 1 to 6 of 6
14 May 2011, 1:06 PM
#1
andycowboy avatar

andycowboy

New Zenner

Join Date:
Jul 2009
Location:
Wimberley, TX
Posts:
50
Plugin Contributions:
0

Positioning the Product Description

Dang! Found something else to which I can't find an answer.

When entering the product description, I want the description to be below the product image, not wrapping from the right side. What I'm currently doing is adding 3 or 4 <p></p> to the start of each description in order to achieve this. This, of course, is unnecessary syntax, and I need to constantly adjust this if the product has a special price, 'cause the description then usually drops down a line or two.

I addition, I want the description to be justified, so I'm doing the age-old <p align=....> syntax. Here's what I want it to look like:

Wall Clock

I know there's a way to set these two things in the stylesheet, but I've been completely unsuccessful in finding the proper place to do so. I've tried making changes - setting margins, attempting a "float" - in the product description div and the main product image division in the template_default stylesheet, with no luck.

Would appreciate a hint on where the boat is that I'm missing!

Have a great day, and God bless!

14 May 2011, 1:12 PM
#2
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Positioning the Product Description

In my stock Zencart test site, adding this to the bottom of the stylesheet seems to do what you want:

#productDescription {
margin: 8em 0 0 0;
}

14 May 2011, 1:12 PM
#3
haredo avatar

haredo

Totally Zenned

Join Date:
Apr 2006
Location:
Texas
Posts:
6,179
Plugin Contributions:
0

Re: Positioning the Product Description

Locate this:

includes/ templates/ your_template/css/ stylesheet.ss

Find this:
#productDescription

Change to this:

#productDescription {
font-size: 11px;
margin: 0em
text-align: justify;
clear: both;
}

14 May 2011, 1:22 PM
#4
gjh42 avatar

gjh42

Black Belt

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

Re: Positioning the Product Description

The product main image is floated left, so that allows the description to start up beside it. The clear: both; as haredo says (or clear: left;) is what will force the description below the image.

15 May 2011, 9:50 PM
#5
andycowboy avatar

andycowboy

New Zenner

Join Date:
Jul 2009
Location:
Wimberley, TX
Posts:
50
Plugin Contributions:
0

Re: Positioning the Product Description

I knew there had to be a way to accomplish this, and thanks to the information provided by stevesh. haredo, and gjh42, IT ABSOLUTELY WORKED! I was also able to create some sepcial classes for various placement changes within the description!

For example, I have *.item_limited *for products with limited quantities left, .item_oos for products temporarily out-of-stock, and a couple of others for special use!

The whole thing has sped up the amount of time it takes to enter products, since I no longer have to type a bunch of <p></p> and alignment syntax! Kinda makes all of it a little more fun.

Muchas gracias! Have a great day, and God bless!

16 May 2011, 12:02 AM
#6
gjh42 avatar

gjh42

Black Belt

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

Re: Positioning the Product Description

Yes, CSS is a wonderful thing for handling multi-page and dynamic sites:) Give a type of item a concise tag, and you can make all of those items look however you want with one stylesheet rule.