Customizing ProductCart - Center Image on Home Page

Print Page | Close Window

Center Image on Home Page - Help :-(

Printed From: ProductCart E-Commerce Solutions
Category: ProductCart
Forum Name: Customizing ProductCart
Forum Description: Exchange messages with other users that are customizing ProductCart.
URL: https://forum.productcart.com/forum_posts.asp?TID=4521
Printed Date: 12-July-2025 at 10:17am
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: Center Image on Home Page - Help :-(

Posted By: Thadosha
Subject: Center Image on Home Page - Help :-(
Date Posted: 01-June-2011 at 12:30am

Hi,

I am trying to center the images on my main page. if you look at the test product under "Featured Items", it seems to be Baselined.

How can I fix this and in what file is the fix in. I checked pcStoreFront.css but did not know where to go to fix this issue.

Any help would be greatly appreciated.

http://www.ammoonsale.com - http://www.ammoonsale.com

Thank you!!!

P.S. I am using ProductCart V3.51

Replies:

Posted By: Greg Dinger
Date Posted: 01-June-2011 at 12:36am

this should be your first clue. Mess with that class in pcStoreFront.css

-------------
GreyBeard Design Group

Certified ProductCart Developer

Web Design/Development/Hosting

http://tinyurl.com/5c8t4t" rel="nofollow - Add-Ons & Custom Code |

Posted By: Thadosha
Date Posted: 01-June-2011 at 12:59am

Thank you for your response. I did check thios area. It is already set to TOP.

/* pcShowProductsH handles the table that shows product info
    when products are displayed horizontally */

  .pcShowProductsH {
   width: 125px;
   height: 225px;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
  }

  .pcShowProductImageH {
   height: 125px;
   vertical-align: top;
   text-align: center;
   padding-bottom: 3px;
  }

  #pcMain .pcShowProductImageH img {
   border: 1px solid #E1E1E1;
   padding: 5px;
  }

  #pcMain .pcShowCategoryImage img {
   border: 1px solid #E1E1E1;
   padding: 5px;
  }

  .pcShowProductInfoH {
   height: 100px;
   margin-top: 5px;
   vertical-align: top;
  }

  .pcShowProductInfoH p {
   text-align: center;
  }

Posted By: Greg Dinger
Date Posted: 01-June-2011 at 1:07am

How about describing again what you are trying to do. Your post is not clear to me.

-------------
GreyBeard Design Group

Certified ProductCart Developer

Web Design/Development/Hosting

http://tinyurl.com/5c8t4t" rel="nofollow - Add-Ons & Custom Code |

Posted By: Thadosha
Date Posted: 01-June-2011 at 1:13am

The extra space above the Featured items test product, I am trying to even it off so the top is the same as the bottom. Right now the way you see it, the test product is baselined for some strange reason. I am trying move the item up to get rid of the white space above it.

Thank you very much for your help...

http://www.ammoonsale.com - http://www.ammoonsale.com

Thadosha

Posted By: Hamish
Date Posted: 01-June-2011 at 1:06pm

I just looked & pcShowProductImageH is set to bottom. Change it to centre & all wil be peachy :-)

-------------
Editing ProductCart Code?

See http://wiki.earlyimpact.com/developers/editcode" rel="nofollow - WIKI Guidelines for Editing ProductCart's ASP Source Code

Posted By: Greg Dinger
Date Posted: 01-June-2011 at 1:13pm

but be sure not to pay attention to his funny spelling. HTML don't speak Brit.

-------------
GreyBeard Design Group

Certified ProductCart Developer

Web Design/Development/Hosting

http://tinyurl.com/5c8t4t" rel="nofollow - Add-Ons & Custom Code |

Posted By: Hamish
Date Posted: 01-June-2011 at 2:35pm

Good point Greg :-D

-------------
Editing ProductCart Code?

See http://wiki.earlyimpact.com/developers/editcode" rel="nofollow - WIKI Guidelines for Editing ProductCart's ASP Source Code

Posted By: Thadosha
Date Posted: 02-June-2011 at 8:32am

Hi Everyone,

I want to thank all that helped me with the image problem. The only thing wrong now is the text under it. Why does productcart make two code snips for one product?

Now if you look under the image, the text is still baselined. When I changed the "bottom" to "center", in a programmers world, it should have moved everything, not just the image.

Does anyone know how I can get the text under the image to move up under the image like it was before? I do not know why the text did not move up along with the product except for the fact it was not coded that way.

Any help with this, hopefully last issue, would greatly appreciated.

Thank you again!!

Thadosha

Posted By: Hamish
Date Posted: 02-June-2011 at 9:49am

Hi Thadosha, If the text moves up it would be base-lined again :-)
The image is in its own row with class="pcShowProductImageH

From the CSS :
.pcShowProductImageH
{
height: 125px;
text-align: center;
padding-bottom: 3px;
}

On other pages where there are multiple products per row if a height was not set for the space for images the laout would end up looking terrible (or if you use images larger than the specified size).

-------------
Editing ProductCart Code?

See http://wiki.earlyimpact.com/developers/editcode" rel="nofollow - WIKI Guidelines for Editing ProductCart's ASP Source Code