Forums / Templates, Stylesheets, Page Layout / Image and buttons alignment

Image and buttons alignment

Locked

Views: 2,894

Results 1 to 18 of 18
This thread is locked. New replies are disabled.
29 Mar 2009, 8:14 PM
#1
globalmemory avatar

globalmemory

New Zenner

Join Date:
Sep 2008
Posts:
64
Plugin Contributions:
0

Image and buttons alignment

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.php?main_page=product_info&cPath=2_188&products_id=486

Please can anyone help with this problem. :dontgetit

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

Regards,

GM

31 Mar 2009, 4:22 AM
#2
jwitt98 avatar

jwitt98

New Zenner

Join Date:
Feb 2009
Posts:
95
Plugin Contributions:
0

Re: Image and buttons alignment

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.

31 Mar 2009, 6:39 PM
#3
globalmemory avatar

globalmemory

New Zenner

Join Date:
Sep 2008
Posts:
64
Plugin Contributions:
0

Re: Image and buttons alignment

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:smile:

Regards,

GM

31 Mar 2009, 10:53 PM
#4
jwitt98 avatar

jwitt98

New Zenner

Join Date:
Feb 2009
Posts:
95
Plugin Contributions:
0

Re: Image and buttons alignment

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.
1 Apr 2009, 1:26 PM
#5
globalmemory avatar

globalmemory

New Zenner

Join Date:
Sep 2008
Posts:
64
Plugin Contributions:
0

Re: Image and buttons alignment

excellent! that's done the trick:clap: thanks!:wink: 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?

Regards,

GM

1 Apr 2009, 3:42 PM
#6
jwitt98 avatar

jwitt98

New Zenner

Join Date:
Feb 2009
Posts:
95
Plugin Contributions:
0

Re: Image and buttons alignment

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.

1 Apr 2009, 6:12 PM
#7
globalmemory avatar

globalmemory

New Zenner

Join Date:
Sep 2008
Posts:
64
Plugin Contributions:
0

Re: Image and buttons alignment

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

Regards,

GM

9 Apr 2009, 10:40 PM
#8
globalmemory avatar

globalmemory

New Zenner

Join Date:
Sep 2008
Posts:
64
Plugin Contributions:
0

Re: Image and buttons alignment

:huh: 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.php?main_page=product_info&cPath=13_64_981&products_id=1717

Regards,

GM

10 Apr 2009, 12:20 AM
#9
jwitt98 avatar

jwitt98

New Zenner

Join Date:
Feb 2009
Posts:
95
Plugin Contributions:
0

Re: Image and buttons alignment

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.

10 Apr 2009, 6:35 PM
#10
globalmemory avatar

globalmemory

New Zenner

Join Date:
Sep 2008
Posts:
64
Plugin Contributions:
0

Re: Image and buttons alignment

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

Regards,

GM

10 Apr 2009, 9:27 PM
#11
need_help avatar

need_help

Zen Follower

Join Date:
Feb 2009
Posts:
205
Plugin Contributions:
0

Re: Image and buttons alignment

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.

10 Apr 2009, 10:35 PM
#12
jwitt98 avatar

jwitt98

New Zenner

Join Date:
Feb 2009
Posts:
95
Plugin Contributions:
0

Re: Image and buttons alignment

globalmemory:

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

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.

11 Apr 2009, 5:31 PM
#13
globalmemory avatar

globalmemory

New Zenner

Join Date:
Sep 2008
Posts:
64
Plugin Contributions:
0

Re: Image and buttons alignment

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:frusty:

http://www.globalmemory.co.uk/index.php?main_page=product_info&cPath=181&products_id=83

http://www.globalmemory.co.uk/index.php?main_page=product_info&cPath=30&products_id=24

Regards,

GM

11 Apr 2009, 6:26 PM
#14
jwitt98 avatar

jwitt98

New Zenner

Join Date:
Feb 2009
Posts:
95
Plugin Contributions:
0

Re: Image and buttons alignment

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.

11 Apr 2009, 6:52 PM
#15
globalmemory avatar

globalmemory

New Zenner

Join Date:
Sep 2008
Posts:
64
Plugin Contributions:
0

Re: Image and buttons alignment

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

http://www.globalmemory.co.uk/index.php?main_page=product_info&cPath=30&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.:mellow:

Regards,

GM

11 Apr 2009, 7:36 PM
#16
globalmemory avatar

globalmemory

New Zenner

Join Date:
Sep 2008
Posts:
64
Plugin Contributions:
0

Re: Image and buttons alignment

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.

Regards,

GM

11 Apr 2009, 8:10 PM
#17
jwitt98 avatar

jwitt98

New Zenner

Join Date:
Feb 2009
Posts:
95
Plugin Contributions:
0

Re: Image and buttons alignment

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.:unsure:

12 Apr 2009, 3:34 PM
#18
globalmemory avatar

globalmemory

New Zenner

Join Date:
Sep 2008
Posts:
64
Plugin Contributions:
0

Re: Image and buttons alignment

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?:frusty:

Regards,

GM