Image and buttons alignment

[need_help]

I edited my add to cart button and it's placement by adding the file tpl_product_display.php to my custom templates template folder.

You can find that in the includes/template default/template folder

You can change where your attributes and product images and add to cart go on that page as well as add new things to the page such as bookmark on social networking sites add in and because it's a template override if you don't like it just delete the file and template default will take over again.

[jwitt98]

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

It doesn't appear that you moved the code when looking at the source of your product page. Which file are you editing?

This is the bock of code I was referring to:

<!--bof Add to Cart Box -->
<?php
if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') {
  // do nothing
} else {
?>
            <?php
    $display_qty = (($flag_show_product_info_in_cart_qty == 1 and $_SESSION['cart']->in_cart($_GET['products_id'])) ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . $_SESSION['cart']->get_quantity($_GET['products_id']) . '</p>' : '');
            if ($products_qty_box_status == 0 or $products_quantity_order_max== 1) {
              // hide the quantity box and default to 1
              $the_button = '<input type="hidden" name="cart_quantity" value="1" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
            } else {
              // show the quantity box
    $the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '<br />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
            }
    $display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);
  ?>
  <?php if ($display_qty != '' or $display_button != '') { ?>
    <div id="cartAdd">
    <?php
      echo $display_qty;
      echo $display_button;
            ?>
          </div>
  <?php } // display qty and button ?>
<?php } // CUSTOMERS_APPROVAL == 3 ?>
<!--eof Add to Cart Box-->

It needs to be moved directly before the following html comment:
<!--bof Additional Product Images -->


Once you move the code, you will need to readjust your top margin on your "add to cart" button. In this case, you may even have to make your top margin positive if you want to move it down farther.

If you did it correctly, then the button should be in the same place on your pages with additional images as it is on the pages without additional images. In other words, having additional images or not, will not affect the placement of the button.

[globalmemory]

I did do that but i then changed it back because the problem was worse than before as the products with additional images' cart button also moved above the title. I have now changed it again and also the margin but this also moves the additional image and the 'ask a question' link. I also can't align the button with the additional image. I also need the question link to be fixed on the left resting on top of the product description table

http://www.globalmemory.co.uk/index....products_id=83

http://www.globalmemory.co.uk/index....products_id=24

[jwitt98]

You should put the <br/> back you removed earlier. That should correct your ask a question link.

Here's the deal:
You want your button to be exactly aligned with the additional images when additional images are displayed, but then you need it to be moved up higher when additional images are not displayed.
In order to do this would require implementing a conditional statement that goes something like:
if ( product images to display = 0){
then echo this inline css styling for cart button that positions the button higher;
}else{//if product images to display != 0
then echo this inline css styling for cart button that aligns the button with the additional images;
}
Obviously this is not the exact code you would use, it would take some time to iron that out, but it is the basic logic.

Other wise, you would just need to set a place for your button that work in both cases, but aligning exactly with your additional images only when they are displayed using only css will not work.

[globalmemory]

no, i mean i need to remove the gap between the question link and the product description table.

http://www.globalmemory.co.uk/index....products_id=24

I'm not too bothered if the cart button is not exactly aligned with the additional image. All i want is for both the cart button and question link to be in the exact same place whether there is an additional image or not.

[globalmemory]

I've sorted the problem with the gap as it was a problem with some breaks in the description box. Now i just need to fix the question link and cart button in one place so that it doesn't move whether there is an additional image or not. Is the code you suggested need to be added in the css or the template? Can you put the code in speech marks because i'm not sure where the code starts and ends.

[jwitt98]

Do not use the code in my previous post as it is. That was just an example of the logic that would be used.

If you want both the question link and add to cart button to not move independent of whether there are additional images or not, then you should move the code for both above the code for the additional images so that they display above the additional images on the page. This is the only way this will happen short of using absolute positioning, because the additional images have to push everything below them down further on the page to make room.

Otherwise, I would just put it back the way it was, except don't use a negative top margin so large that it negatively affects the placement when there are no additional images. Use one just large enough to line up the question link and cart button.

I'm starting to think we are just not on the same page here.

[globalmemory]

I think the best thing to do is add an additional image to all the products.... I have a couple other small problems. One is that the google translator box is centred in IE7 but in firefox it is aligned to the left? Also, in IE7 the product description has a right margin but in firefox the right margin isn't there? any ideas why?