product page layout

[ideadirect]

I've searched and searched and can't seem to find an answer.
I'm trying to customize the product info page. I am using Image Handler and Zen 1.3.
The main problem I'm having is that my alternative images are being displayed vertically and I would like them to be displayed horizontally.
I want the main image to display upper left (default) and then three alternative images to be displayed horizontally to the right of the main image.

Here is a sample product:
http://www.innerbalancehealthcenter....&products_id=5

As you can see, the product page would look much better if the alternative images were simply horizontally across the top instead of vertical.

Can someone please help. I've combed through the FAQ's, the tpl_product_info.php file and the CSS file (don't see an alternative image class). I've also looked at every link in the Admin and don't see anything there as well. Although I seem to remember an admin setting to set rows and order of sections but that may be for product list and not product info.

[Ajeh]

Sorry ... your site does not load on that link ... tries and tries then posts a blank page ...

[ideadirect]

Sorry ... your site does not load on that link ... tries and tries then posts a blank page ...

uh oh... I hope that isn't another problem I need to deal with.
Links works fine for me.
Would you mind trying
http://www.innerbalancehealthcenter.com/shop

I made the product the only featured product so you can navigate to it from there.

I hope this works...

[ideadirect]

I might be getting close. I've relooked at everything and found a
.additionalImages

I will experiment with different alignments but am not too familiar with CSS. so far left and center haven't worked...

[ideadirect]

I might be getting close. I've relooked at everything and found a
.additionalImages

I will experiment with different alignments but am not too familiar with CSS. so far left and center haven't worked...

No luck. Changing from right/left/center just moves the vertical images to the right/left/center. Also apparently, textleft doesn't work here.

Anyone know the actual template page of alternative images that I could perhaps edit?

[ideadirect]

One more attempt getting closer... Now two images on one row and one image still bumped to next row.

Here is what I have for CSS now. (learned that text-top can not be used for text-align but goes with vertical-align.)

.additionalImages {
text-align: left;
vertical-align: text-top;
padding: 0em 0em;
margin: 0em 0em;
border: thin solid #000000;
}

The border is just so I can see what is going on. Everything seems correct. The Admin/images clearly has 3 images per row for additional product images (default).
The source code shows each of the three images with a width of 33% so it seems they should be on the same line but they are not.

The images are 100x100 but they are in a cell that is 245 pixels wide which is why all three can't fit on a single row.
I tried using the width tag in CSS such as width: 25%; and width: 110px; but that did not change anything.

[ideadirect]

Alright. I give up. I miss the tables and am getting very frustrated. I've spent about 5-6 hours on this single problem and may have even made a few other things worse!

I've submitted this problem along to the commercial forum.
http://www.zen-cart.com/forum/showth...047#post215047

If anyone could help I would really appreciate it.

[dejt]

Try to remove image border in your CSS. Sometimes this helps.