Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Product info page layout problem

Product info page layout problem

Views: 770

Results 1 to 6 of 6
19 May 2012, 12:36 PM
#1
baron5 avatar

baron5

New Zenner

Join Date:
Jan 2012
Posts:
8
Plugin Contributions:
0

Product info page layout problem

Hey guys, I have done a fair amount of work on my zencart site, albeit maybe not the most effective way but it seems to be functioning well and I am down to a few last touches that are maybe out of my depth to fix alone.

The first problem is related to the product display page
worldwideweb.innatestreetwear.com.au/zencart/index.php?main_page=product_info&cPath=65&products_id=180
I have continuously tried to alter the product info page using filezilla and a text editor to get it how the layout is currently, however I cannot seem to find a way to have the text sit just below the image. I would like to have the text sitting below or even just placed around the image somehow.
Now i could be wrong but it seems the problem here is that I installed the 'lightbox' (IIRC) for the product images and it seems if you look at this element using firebug it is a flash element and actually has no size. The text therefore sits over the top, i have tried placing borders but this does not work. The only method I found that worked was to offset the text using margins but then other pages such as this one
worldwideweb.innatestreetwear.com.au/zencart/index.php?main_page=product_info&cPath=66&products_id=184
the image size is different and the text will sit too far down.

If someone could help me with this issue it would be much appreciated.

19 May 2012, 12:42 PM
#2
haredo avatar

haredo

Totally Zenned

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

Re: Product info page layout problem

Looks like you need to add a clear: both the the your_template/ templates/ product_info_display or this:

Find this:

zencart/includes/templates/apparel_boutique/css/stylesheet.css

Edit this on line 244:
#productDescription {
color: #000000;
margin-top: 38em;
}

Notice I added the red font above for the fix ...

19 May 2012, 12:51 PM
#3
baron5 avatar

baron5

New Zenner

Join Date:
Jan 2012
Posts:
8
Plugin Contributions:
0

Re: Product info page layout problem

I appreciate the quick reply, right now i cannot access my site because I'm not at home but I'll be sure to report back once i try this. Just to clarify, i need to add the clear: both to the product_info_display OR I can add that fix to the stylesheet? Also how does this fix my issue? will it allow me to place the text underneath on the product_info_display coding and it will no longer overlay ?

19 May 2012, 1:15 PM
#4
haredo avatar

haredo

Totally Zenned

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

Re: Product info page layout problem

Just follow my instructions above with a hugh smile and tons of sales ...

Have a great weekend ..

21 May 2012, 12:12 PM
#5
baron5 avatar

baron5

New Zenner

Join Date:
Jan 2012
Posts:
8
Plugin Contributions:
0

Re: Product info page layout problem

I tried the fix that you posted in red above however this is the same as the fix I tried myself, it just creates a big margin but on the second page i posted that has a smaller image the text is then far below the image and this is not how I want it. I'm not sure where to place the clear: both code in the product_info page but i remember trying something like this before to no avail, have any other ideas how i could achieve what i need?

21 May 2012, 2:16 PM
#6
gjh42 avatar

gjh42

Black Belt

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

Re: Product info page layout problem

Find the #productMainImage {} and #productDescription {} rules in your stylesheet.css and modify those as shown in red.

#productMainImage{float:left;padding: 0em;margin: 1em 1em 0em 2em; height: 42em;}
#productDescription {color:#000;margin-top: 1em; clear: none !important;}

Of course, this means that the image will always occupy 42em of height even if the image is different. I don't think there is a simple way around this... maybe some fancy javascript could do it dynamically.