Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Main Page valign thumbnails

Main Page valign thumbnails

Locked

Views: 536

Results 1 to 6 of 6
This thread is locked. New replies are disabled.
24 Aug 2010, 5:37 PM
#1
atl2rva avatar

atl2rva

New Zenner

Join Date:
Feb 2010
Posts:
81
Plugin Contributions:
0

Main Page valign thumbnails

My site isn't live yet so to see my page you have to go to pages IP address http://69.195.73.76/ . The issue that I am having is that I have only set a max width for thumbnails and not the height in order to keep the images proportional and this causes some of my "new products" on main page to look unaligned. A lot of the time it will look fine, but the images that are a lot wider than they are tall will throw it off (hit refresh a few times and you will notice it). I can see that the images are vertically aligned based off the top of the thumbnail. I was wondering if there is a way I can make it align off of the base of the image. I think this would look ok. Some pictures would still be taller but with all white backgrounds shouldn't be noticeable and it would make the item names be in alignment. Would appreciate any input.

24 Aug 2010, 5:46 PM
#2
stiggy100 avatar

stiggy100

Zen Follower

Join Date:
Jan 2009
Posts:
298
Plugin Contributions:
0

Re: Main Page valign thumbnails

I am sure other folks have a better solution to this but all I do is use a batch editor called photscape (free software) and this allows you to very very quickly add a white border to an image and make every image exactly the same size.

So if you had images all 100px wide but variant in height say 100 x 63 then 100 x 75 - you would add a border to the top and bottom of each one to make it equal 100 then all pictures become 100x100px

In reality I do this with the largest and best image I have - then use the image handler mod (which I see you have) which gives an absolute uniform look throughout the site. On a side note - lovely site.

As I say - I am sure there is a better approach...

24 Aug 2010, 7:34 PM
#3
atl2rva avatar

atl2rva

New Zenner

Join Date:
Feb 2010
Posts:
81
Plugin Contributions:
0

Re: Main Page valign thumbnails

Thanks for the reply and feedback on the site stiggy. While I might end up doing that I would like to find a work around that would not require me to edit all my images and future images. I thought I could use something along these lines in my style sheet but It seemed to of had no effect...

#whatsNew {
color:#ffffff;
align: center;
vertical-align: bottom

}

24 Aug 2010, 8:22 PM
#5
atl2rva avatar

atl2rva

New Zenner

Join Date:
Feb 2010
Posts:
81
Plugin Contributions:
0

Re: Main Page valign thumbnails

Hmmm I hadn't thought about trying it like that. It does not seem to be working for me but I think it is because of the div tag.

.centerBoxContentsProducts {
height: 350px;}

When I look at the images with web dev. toolkit in firefox I don't see that .centerBoxContentsProducts is associated to the image. ".centerBoxContentsFeatured centeredContent back" is what comes up.

25 Aug 2010, 2:43 PM
#6
atl2rva avatar

atl2rva

New Zenner

Join Date:
Feb 2010
Posts:
81
Plugin Contributions:
0

Re: Main Page valign thumbnails

Well I have decided to go with Batch Editing solution. I am using Photoshop to Fit Image 500x500 > Canvas Size 500x500. Now I will just have to run any future product pics through the batch processor, but no bigey. Thanks for the input stiggy.