Image and buttons alignment

[globalmemory]

Hello,

I want to align the additional image and the add to cart button horizontally so that they are on the same line but at opposite ends of each other . i.e image on left and add to cart button on right. I also want to move the ask a seller question tab to below the price. It can be seen at the following:

http://www.globalmemory.co.uk/index....roducts_id=486

Please can anyone help with this problem.

I am using zen cart 1.3.8 with many mods installed on a linux server.

[jwitt98]

I don't see an add to cart button. Do you have your store set up as a showcase in admin->configuration->store status. You will need to change the setting to normal store before the add to cart button becomes available.

[globalmemory]

yes it is set to showcase as i don't want customers to use the site yet, but the principle is the same. I want to align the contact us/add to cart button on the same line as the additional image. I hope you can help

[jwitt98]

Since there is a <br class="clearBoth"> between the two, the easiest way I think is to fake it by adding a negative top margin to your add to card button.

#productGeneral #cartAdd {
margin-top: -95px;
}

This should be fine as long as you will only have 1 or 2 additional images to display per product, but if you ever plan on having 3 or more additional images, they will likely overlap your add to cart button, because if I recall, the width of 100%:
<div class="additionalImages centeredContent back" style="width: 100%;">
is hard coded.
It could be done with 3 additional images, but would require some more involved code changes.

[globalmemory]

excellent! that's done the trick thanks! Now i just want to half the gap between the 'ask a question' link line and the top additional image and contact/add cart button line. Any ideas?

[jwitt98]

Is it possible to remove the line break <br/> before the "ask a question" link?

If not you can try:
#productAdditionalImages {
margin-bottom: -20px;
}

but that may not move it as far as you'd like because of the line break.

If you cannot remove the line break try:
#productQuestions br {
line-height: 0px;
}

or maybe a combination of the two.

[globalmemory]

Nice one. The line break removal has done the trick. Thanks for all your help.

[globalmemory]

I've just noticed a bug with the add to cart button alignment suggestion. If you look at the following link then you will see that if there is no additional image then the cart button rises above the title. How can i prevent this?

http://www.globalmemory.co.uk/index....oducts_id=1717

[jwitt98]

Ah, yes.
Since the "add to cart code" comes after the "additional images" code in the php structure, the way the html is organized, the additional image needs to be there to push the button down to to proper position.
Since you're not always using the additional images, the only valid solution I can see is to move the php code that generates your "add to cart button ahead of the code that generates your additional images. That way the additional images would not affect the "add to cart" button position either way.
This would require some php knowledge. IMPORTANT! MAKE A BACKUP of your file before you start editing.

I have actually done this on most of my product pages. Let me know if you need help with this.

[globalmemory]

i've moved the code ahead of the additional images but it's still the same?