Product Description Page Layout Issues

Hi All!

I'm having some issues getting a nice looking layout for my product description page. The alignment is totally wonky and I searched high and low on the forums but couldn't find a solution that works. My shop isn't live, I'm still majorly tinkering, but here's a link to my current page:

http://jesicamilton.com/shop/index.php?main_page=product_info&cPath=1&products_id=6

And here's a link to a layout similar to what I want:

http://www.lovechurchandstate.com/shop/item/10

...I've tried messing around in the stylesheet & also rearranging stuff in tpl_product_info_display but nothing helps with the alignment. I'm a clothing designer, not a web-developer... so I might be missing something obvious and just not realizing it :blink:

Thanks a bunch!

~ Jesica

You will need to make a copy of tpl_product_info_display.php file for your template override in barebones template structure

Edit it and re-order the elements - - this file is fairly well segmented into blocks that begin with "bof" & end with "eof" and full blocks can be moved
That and some css for tweaking will net what you desire

Thank you... I have been doing that but just editing the tpl_product_info_display within the default folders. I have figured out how to rearrange the blocks - but I cannot figure out how to style these in the css to make them look neat & tidy like my example. None of my edits work and I'm out of ideas.

Sorry but I'm a bit dense... as I mentioned before I'm just a clothing designer stumbling through this to add a shopping feature to my website. If anybody could show me some css examples I would REALLY REALLY appreciate it!

Just to clarify, I'm having a problem moving my description, price, drop down box, add to cart, etc. next to my main product image (to the right). I looked at this with the firefox developer tool and it looks like my additional product images are pushing everything down to the bottom?

I don't care if the additional images end up next to or underneath the main image, or even underneath the description, etc. like my example page. I just need to get things looking neat & tidy. Float: right and text-align: center don't do the trick.

There are product info page layout mods available in Free Addons. One of them may get you most of the way to what you want.

I actually used one already... it was the closest I could find to what I wanted but this is as close as it got me. It was the product_info_display_justified.

So I took a screenshot of how this is showing up in the firefox web developer view. When I hover over the additional images, the highlighted field is way wider than the image itself (as shown). I think if I can shrink this field that might help the additional images align correctly? Sorry, I'm trying to be as descriptive as possible... I've spent hours on this problem already and I can't figure it out to save my life.

Okay so I got the space around the images smaller by adding:

#productAdditionalImages {
width: 23%;
}

This managed to get them in a horizontal row, and it somehow moved them from the left of the main image to below them. It's a start. However - the rest of the page (description, attributes, add to cart) didn't end up rising up to the right of the main image like I expected them to. Also, float: right isn't doing anything to help tidy them up, they're scattered all over the place!

I'm still not sure what I'm doing wrong. As stated previously, any help would be greatly appreciated.

Link to page: http://jesicamilton.com/shop/index.php?main_page=product_info&cPath=&products_id=6&zenid=c5ce96c35dfb5eff0b59f502926de4eb

OK
So now try adding this statement to your stylesheet.css file

#productAdditionalImages {
        width: 280px;
        margin: 0em 0em 0em 22em;
        }

You have a <br class="clearBoth" /> after the additional images, and this is keeping all following elements below the images. Add to your stylesheet

#productAdditionalImages .clearBoth {display: none;}

The best solution to your alignment issues is probably to have the #productDescriptionWrapper mentioned in the stylesheet enclose all of the elements after the images.

If you want the additional images at the right below the description etc., put their code block after those elements and not inside the productImages section.

Thank you so much!! That helped by leaps and bounds, I really appreciate it.

Forgive me if this is a totally dumb question, but how do I enclose the other elements in the productDescription wrapper? Would I do that by adding <div id="productDescription"> to those in the tpl_product_info_display ?

No, that would be wrong for two reasons. They would not be the same div, regardless of name, and id's are supposed to be unique, not appearing more than once on a page. #productDescription is properly only the description content.

You can make a new <div id="productDescriptionWrapper"> above the beginning of the description code block, with a </div> to close it below the last of the elements you want to enclose.

Then you can change the styling of #productDescriptionWrapper which is already in your stylesheet.

Thank you so much!! That was a great fix and thank you for explaining the reasoning behind it. Zencart is my first leap into css & php so I'm kind of stabbing in the dark and learning as I go along.

The only element that still isn't cooperating is those pesky additional images. The css works on everything but those... they're still hanging out by themselves on the far right and too much spacing between them. They are within the div tags of the #productDescriptionWrapper so I'm not sure what that's all about. I'm guessing I have some conflicting code somewhere else that's overriding it?

You have a 22em left margin on #productAdditionalImages. Reduce or eliminate that and things will fall into place.