Forums / Templates, Stylesheets, Page Layout / On some pages my images overlap each other?

On some pages my images overlap each other?

Locked

Views: 2,810

Results 1 to 9 of 9
This thread is locked. New replies are disabled.
12 Jun 2009, 12:13 PM
#1
kirstypell avatar

kirstypell

New Zenner

Join Date:
Jun 2009
Posts:
3
Plugin Contributions:
0

On some pages my images overlap each other?

Hi,
I am new to ZenCart and had someone set up my site I am now working on it on my own and need help with a few things.
On some of my pages my pictures overlap each other as shown...
http://www.hiphopfitnesswear.co.uk/shop/index.php?main_page=index&cPath=70_74_85
It does not happen on all pages and so I do not know how to change this without changing every other page.
Thanks

12 Jun 2009, 3:32 PM
#2
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: On some pages my images overlap each other?

Adjust your pic widths - on the page you linked the image is 420Wide X 280High and there is not enough room to display 3 across that are 420px wide

Zen-Venom Get Bitten

13 Jun 2009, 10:54 AM
#3
kirstypell avatar

kirstypell

New Zenner

Join Date:
Jun 2009
Posts:
3
Plugin Contributions:
0

Re: On some pages my images overlap each other?

Totally understanding what you are saying but have no clue as to how I go about this?? I have looked on Images and this is what it looks like..
Title Value Action
Small Image Width 0
Small Image Height 280
Heading Image Width - Admin 57
Heading Image Height - Admin 40
Subcategory Image Width 0
Subcategory Image Height 100
Calculate Image Size true
Image Required true
Image - Shopping Cart Status 1
Image - Shopping Cart Width 0
Image - Shopping Cart Height 75
Category Icon Image Width - Product Info Pages 0
Category Icon Image Height - Product Info Pages 100
Top Subcategory Image Width 0
Top Subcategory Image Height 100
Product Info - Image Width 0
Product Info - Image Height 350
Product Info - Image Medium Suffix _MED
Product Info - Image Large Suffix _LRG
Product Info - Number of Additional Images per Row 3
Image - Product Listing Width 0
Image - Product Listing Height 280
Image - Product New Listing Width 0
Image - Product New Listing Height 280
Image - New Products Width 0
Image - New Products Height 280
Image - Featured Products Width 100
Image - Featured Products Height 80
Image - Product All Listing Width 100
Image - Product All Listing Height 80
Product Image - No Image Status 1
Product Image - No Image picture no_picture.gif
Image - Use Proportional Images on Products and Categories 1
Image - Product Listing Width

Default = 100

Date Added: 01/20/2008
Last Modified: 03/18/2008

What would I need to change? and to what??
Sorry am still learning!!

Thanks

13 Jun 2009, 11:19 AM
#4
vinyl_signs avatar

vinyl_signs

Zen Follower

Join Date:
Jun 2007
Location:
Shropshire UK
Posts:
125
Plugin Contributions:
0

Re: On some pages my images overlap each other?

kirstypell:

Totally understanding what you are saying but have no clue as to how I go about this?? I have looked on Images and this is what it looks like..
Title Value Action
Small Image Width 0
Small Image Height 280
Heading Image Width - Admin 57
Heading Image Height - Admin 40
Subcategory Image Width 0
Subcategory Image Height 100
Calculate Image Size true
Image Required true
Image - Shopping Cart Status 1
Image - Shopping Cart Width 0
Image - Shopping Cart Height 75
Category Icon Image Width - Product Info Pages 0
Category Icon Image Height - Product Info Pages 100
Top Subcategory Image Width 0
Top Subcategory Image Height 100
Product Info - Image Width 0
Product Info - Image Height 350
Product Info - Image Medium Suffix _MED
Product Info - Image Large Suffix _LRG
Product Info - Number of Additional Images per Row 3
Image - Product Listing Width 0
Image - Product Listing Height 280
Image - Product New Listing Width 0
Image - Product New Listing Height 280
Image - New Products Width 0
Image - New Products Height 280
Image - Featured Products Width 100
Image - Featured Products Height 80
Image - Product All Listing Width 100
Image - Product All Listing Height 80
Product Image - No Image Status 1
Product Image - No Image picture no_picture.gif
Image - Use Proportional Images on Products and Categories 1
Image - Product Listing Width

Default = 100

Date Added: 01/20/2008
Last Modified: 03/18/2008

What would I need to change? and to what??
Sorry am still learning!!

Thanks
Might think about using 2 columns instead of 3 ?

13 Jun 2009, 11:29 AM
#5
kirstypell avatar

kirstypell

New Zenner

Join Date:
Jun 2009
Posts:
3
Plugin Contributions:
0

Re: On some pages my images overlap each other?

Already tried to change from 3 to 2 columns and updated, refreshed screen and nothing had changed and was still 3 pictures per row?? what am I doing wrong??

13 Jun 2009, 2:28 PM
#6
gjh42 avatar

gjh42

Black Belt

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

Re: On some pages my images overlap each other?

Where did you change from 3 to 2?

Your first problem is that you are using huge images for your listing thumbnails. Many of them are 500-1000 kb when the rule of thumb is 5-10 kb. Your pages can take forever to load with that many big images, and customers will not stick around to wait for them. You need to make copies of the originals and reduce the pixel size to exactly the size you want them to display in the listing. Use something like Photoshop or whatever image editing program you have.

Your center column is 648 pixels wide in a 1024x768 monitor (the common size recommended to design for), so accounting for spacing you only have about 200 pixels maximum width available per picture.

Read the tutorials for directions on using different image sizes for different locations (small, medium & large).

14 Jun 2009, 7:59 AM
#7
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: On some pages my images overlap each other?

Small Image Width 0
Small Image Height 280

gjh42:

Your center column is 648 pixels wide
By not specifying a width and only a height you accept what ever the width is and in your case these are 420px Wide

Make your setting
Small Image Width 200
Small Image Height 140

Do this for all the settings with different values but maintaining your proportions

Zen-Venom Get Bitten

14 Jun 2009, 11:00 AM
#8
steveability avatar

steveability

New Zenner

Join Date:
Jun 2009
Posts:
1
Plugin Contributions:
0

Re: On some pages my images overlap each other?

with reference to image size dont forget to refresh the page so you can see the results of changing the size

16 Jul 2009, 12:49 PM
#9
simm avatar

simm

New Zenner

Join Date:
May 2007
Posts:
6
Plugin Contributions:
0

Re: On some pages my images overlap each other?

Similar problem solved here

http://www.zen-cart.com/forum/newreply.php?do=newreply&p=753235

BTW the pink text on a pink background doesnt work
I would remove the background image completely to sharpen and tidy up your site. Try it..:smartalec: