Product Image & Description Position!!

The default setting for product image is align left and description follow after that. This make the whole thing look messy

I have searched the forum about this but nothing much help.

My problem is:

How can i adjust the product image to the center and put the description below the image.

Currently it look like this: http://cheap-activation.com/index.php?main_page=product_info&cPath=6_7&products_id=9

You see the image and description looking messy.

One can edit a copy of tpl_product_info_display.php for order and add a clear to force a new line after the image
Or you might have a look at a module for creating tabs for your description, specifications, etc with a module

http://www.zen-cart.com/index.php?main_page=product_contrib_info&products_id=924

Ok i will look into this and inform you the result later

kobra:

One can edit a copy of tpl_product_info_display.php for order and add a clear to force a new line after the image
Or you might have a look at a module for creating tabs for your description, specifications, etc with a module

http://www.zen-cart.com/index.php?main_page=product_contrib_info&products_id=924

Sorry after looking at the whole code structure of the tpl_product_info_display.php now i am confused :blink: which one should i edit and what code to put to make the image go center and description below it

Add the clear as indicated in red

<!--eof free ship icon  -->
<br class="clearBoth" />
 <!--bof Product description -->

styling for centering will be through your stylesheet

kobra:

Add the clear as indicated in red

<br class="clearBoth" />

> styling for centering will be through your stylesheet

Sorry to ask too much..but which stylesheet should i edit?? where is the location.

Sorry to ask too much..but which stylesheet should i edit?? where is the location.
The one that came with your TemplateMonster template - -and you should search this site for them and their issues

You appear to have added a bunch of blank lines to your description to get the text below the image. You don't actually need to use this trick or edit any PHP files; just add to your stylesheet:

#productDescription {clear: both;}

and then delete the extra lines in your description.

If you really want the main product image centered, all you need to do is add to your stylesheet_main.css

#productMainImage {float: none;}

This will put the description below the image without any clear: both; required.

Then if you want the price on the right, find this in stylesheet_main and add float: right; as shown

#productPrices {color:#C70E06; font-family:tahoma; font-size:13px; line-height:normal; font-weight:bold; float: right;}

gjh42:

You appear to have added a bunch of blank lines to your description to get the text below the image. You don't actually need to use this trick or edit any PHP files; just add to your stylesheet:

#productDescription {clear: both;}

and then delete the extra lines in your description.

Can i put this: #productDescription {clear: both;} in any line of the codes structure??

gjh42:

You appear to have added a bunch of blank lines to your description to get the text below the image. You don't actually need to use this trick or edit any PHP files; just add to your stylesheet:

#productDescription {clear: both;}

and then delete the extra lines in your description.

Now i have place that code inside my stylesheet. Nothing change. The description and image still seem to stick together

The description should be going to the bottom of the image but nothing happen

Find this in your stylesheet_main.css:```
/* ----------------------- PRODUCT INFO ----------------------- */

.categoryIcon {margin:10px;}
.categoryIcon a {color:#C70E06; font-weight:bold; text-decoration:none; font-size:13px; line-height:normal; font-weight:normal;}

.navNextPrevWrapper {margin:0px 10px; padding:10px 0px;}

#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin:10px; text-align:center; line-height:20px;
}
#productMainImage a, #reviewsInfoDefaultProductImage a, #productReviewsDefaultProductImage a, #reviewWriteMainImage a {
color:#C70E06; font-weight:bold; text-decoration:none;
}

#productName {background:#8AC6E3 url(../images/h_bg.gif) top repeat-x; padding:8px 0 8px 15px; border-bottom:2px solid #FFFFFF; font-family:tahoma; color:#095082; text-decoration:none; font-size:11px; line-height:normal; font-weight:bold; text-transform:uppercase; margin:0 -13px;}
#productPrices {color:#C70E06; font-family:tahoma; font-size:13px; line-height:normal; font-weight:bold;}
#productDescription {margin:0px 10px; padding:0;}
and add clear: both; to get
#productDescription {margin:0px 10px; padding:0; clear: both;}

gjh42:

Find this in your stylesheet_main.css:```
/* ----------------------- PRODUCT INFO ----------------------- */

.categoryIcon {margin:10px;}
.categoryIcon a {color:#C70E06; font-weight:bold; text-decoration:none; font-size:13px; line-height:normal; font-weight:normal;}

.navNextPrevWrapper {margin:0px 10px; padding:10px 0px;}

#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin:10px; text-align:center; line-height:20px;
}
#productMainImage a, #reviewsInfoDefaultProductImage a, #productReviewsDefaultProductImage a, #reviewWriteMainImage a {
color:#C70E06; font-weight:bold; text-decoration:none;
}

#productName {background:#8AC6E3 url(../images/h_bg.gif) top repeat-x; padding:8px 0 8px 15px; border-bottom:2px solid #FFFFFF; font-family:tahoma; color:#095082; text-decoration:none; font-size:11px; line-height:normal; font-weight:bold; text-transform:uppercase; margin:0 -13px;}
#productPrices {color:#C70E06; font-family:tahoma; font-size:13px; line-height:normal; font-weight:bold;}
#productDescription {margin:0px 10px; padding:0;}
and add clear: both; to get
#productDescription {margin:0px 10px; padding:0; clear: both;}

Glenn thanks for helping but it still not working as you can see here:<http://cheap-activation.com/index.php?main_page=product_info&cPath=2&products_id=2>

The description still follow the image it should at the bottom of the image

Then you are not doing exactly what I suggested. I know that it works when done correctly because I have seen it work on your site.

gjh42:

Then you are not doing exactly what I suggested. I know that it works when done correctly because I have seen it work on your site.

But i did it exactly as you instructed. see below

.categoryIcon {margin:10px;}
.categoryIcon a {color:#C70E06; font-weight:bold; text-decoration:none; font-size:13px; line-height:normal; font-weight:normal;}

.navNextPrevWrapper {margin:0px 10px; padding:10px 0px;}

#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin:10px; text-align:center; line-height:20px;
}
#productMainImage a, #reviewsInfoDefaultProductImage a, #productReviewsDefaultProductImage a, #reviewWriteMainImage a {
color:#C70E06; font-weight:bold; text-decoration:none;
}

#productName {background:#8AC6E3 url(../images/h_bg.gif) top repeat-x; padding:8px 0 8px 15px; border-bottom:2px solid #FFFFFF; font-family:tahoma; color:#095082; text-decoration:none; font-size:11px; line-height:normal; font-weight:bold; text-transform:uppercase; margin:0 -13px;}
#productPrices {color:#C70E06; font-family:tahoma; font-size:13px; line-height:normal; font-weight:bold;}
#productDescription {margin:0px 10px; padding:0; clear; both;}

gjh42:

Then you are not doing exactly what I suggested. I know that it works when done correctly because I have seen it work on your site.

Glenn you are right lol...i must thank you so much for little problem that cause me headache :clap:...i should have put colon instead of semi-colon after the clear :frusty:

Thank YOU :clap::clap::clap:

Glad you found the hang-up and got it working!

gjh42:

Glad you found the hang-up and got it working!

May thanks you are real good on this :cool:. By the way i saw many zen cart template (template monster) with the author name Glenn is that you?? lol.

I have a whole new question is it possible to align the extra images (from bottom) to the left of the main image?

Seen here: http://www.melijoe.com/63719-silhouette-marese-swing-city.html

working on this page: http://www.tylerandtallulah.com/shop/nolita-pocket-clothing-spring-summer-2009-c-109/nolita-pocket-fuschia-velour-skirt-winter-p-1256

Thanks in advance!!

~Red

I would never have anything to do with the TM way of doing things, so no, it's not me.