Force Formatting on products page

[timhersh]

Hello,

On this page http://kgfinegifts.com/shop/index.ph...ex&cPath=1_229

I would like to force the "buy now" and "title" of each product to be horizontally aligned.

I realize the issue is some of the pictures are shorter than others. What we would like is to force the space to be a certain height. So that if there is a rectangle image it will just have a blank spot below

does this make sense? I have tried through css but it wont' work.

[kobra]

You would be better off matting all of your images to a standard size

[timhersh]

Thanks, I realize that but my client isn't very computer savy and she is just uploading them as she has them. It would be great if there is a way to specify the height and width of that section

[rstevenson]

See my Retail site (in my sig, below). Click on any category along the top -- Maritime has a relevant example in the first row. You'll see a listing similar to yours, except the rows are all the same height. The relevant part of my stylesheet is...

.centerBoxContentsProducts.centeredContent.back {
    border: 1px solid #DAE8F8;
    height: 230px;
    margin: 2px;
    padding-top: 10px;
    width: 32% !important;
}

The main thing for your issue is the height: 230px; define. The other bits just make things look right for my template.

Rob

[timhersh]

Thank you, that did help a bit

http://kgfinegifts.com/shop/index.ph...ex&cPath=1_229

but is there a way to push the "buy now" button to the bottom of the area so it lines up?

[rstevenson]

Vertical alignment using CSS -- especially if you want to align some things within a wrapper block to the top and some to the bottom -- is very messy. As you can see from my retail site, I didn't even try, preferring instead to let the border aound the block serve as the visual cue to alignment. Your best bet if that's a requirement is to matte all the images to the same size.

Rob

[timhersh]

Vertical alignment using CSS -- especially if you want to align some things within a wrapper block to the top and some to the bottom -- is very messy. As you can see from my retail site, I didn't even try, preferring instead to let the border aound the block serve as the visual cue to alignment. Your best bet if that's a requirement is to matte all the images to the same size.

Rob

Thanks, it would be nice if there was a way to build those sections so they live up. Seems it should be easy to specify the height of each section. oh well

[dturnertms]

First if you look at the code behind the page link you posted, on about line 361 to 364 you can see the code that renders the products (in browser-view source)

Line 361 reads:
<div class="centerBoxContentsProducts centeredContent back" style="width:25%;"><a href="http://kgfinegifts.com/shop/index.php?main_page=product_info&amp;cPath=1_229&amp;products_id=1138"><img src="bmz_cache/2/2017b854b66a05f2d8394784647b3a00.image.165x141.PNG" alt="Lucky, Pet Bed" title=" Lucky, Pet Bed " width="165" height="141" /></a><br><h3 class="itemTitle"><a href="http://kgfinegifts.com/shop/index.php?main_page=product_info&amp;cPath=1_229&amp;products_id=1138">Lucky, Pet Bed</a></h3><br>$378.00<br /><br /><a href="http://kgfinegifts.com/shop/index.php?main_page=index&amp;cPath=1_229&amp;sort=20a&amp;action=buy_now&amp;pr oducts_id=1138"><img src="includes/templates/premium6c/buttons/english/button_buy_now.gif" alt="Buy Now" title=" Buy Now " width="115" height="21" /></a><br /><br /></div>

Within that lot is the filepath of the first image:
bmz_cache/2/2017b854b66a05f2d8394784647b3a00.image.165x141.PNG

Note similar on each of the other lines in the block.

Now - if you can access this filepath then you can download the image, the PNG file, alter it (in your image editor tool) to be of required height and then upload it back to the same directory.

Do the same for all the other images, downloading them, adjusting height and re-uploading and they should all appear aligned with the Buy Now buttons and titles aligned too.

Note : when altering the image height you can make the space beneath the image the same color as the background on the page browsed: so the PNG file you re-upload has the original image with the page background color beneath it extending such that the image is of the required height