Page 1 of 2 12 LastLast
Results 1 to 10 of 18
  1. #1
    Join Date
    Sep 2008
    Posts
    64
    Plugin Contributions
    0

    red flag 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....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.
    Regards,

    GM

  2. #2
    Join Date
    Feb 2009
    Posts
    95
    Plugin Contributions
    0

    Default 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.

  3. #3
    Join Date
    Sep 2008
    Posts
    64
    Plugin Contributions
    0

    Default 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
    Regards,

    GM

  4. #4
    Join Date
    Feb 2009
    Posts
    95
    Plugin Contributions
    0

    Default 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.

  5. #5
    Join Date
    Sep 2008
    Posts
    64
    Plugin Contributions
    0

    Idea or Suggestion Re: Image and buttons alignment

    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?
    Regards,

    GM

  6. #6
    Join Date
    Feb 2009
    Posts
    95
    Plugin Contributions
    0

    Default 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.

  7. #7
    Join Date
    Sep 2008
    Posts
    64
    Plugin Contributions
    0

    Idea or Suggestion Re: Image and buttons alignment

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

    GM

  8. #8
    Join Date
    Sep 2008
    Posts
    64
    Plugin Contributions
    0

    red flag Re: Image and buttons alignment

    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
    Regards,

    GM

  9. #9
    Join Date
    Feb 2009
    Posts
    95
    Plugin Contributions
    0

    Default 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. #10
    Join Date
    Sep 2008
    Posts
    64
    Plugin Contributions
    0

    red flag Re: Image and buttons alignment

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

    GM

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. alignment main category image and name
    By malachi in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 20 Sep 2010, 08:29 PM
  2. Adding 2 image buttons and 1 image to right hand side bar
    By optimalwebsite in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 4 Feb 2009, 01:35 PM
  3. Background Image Alignment (Mozilla and IE)
    By lalakerman in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 29 Jan 2009, 12:58 AM
  4. Image alignment and page title issue
    By mjgriff in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 22 May 2008, 12:44 AM
  5. Product Image and Description Alignment
    By Stenrique in forum Basic Configuration
    Replies: 3
    Last Post: 2 Nov 2006, 05:58 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg