Results 1 to 5 of 5
  1. #1
    Join Date
    Jan 2008
    Posts
    6
    Plugin Contributions
    0

    Default product info positioning issues

    So I have a quick question (might be really simple). I'm learning CSS as I go, and while I think I've got a pretty good handle on most things, I am having some problems with positioning elements on my product info pages.

    First - I modified the product info template (tpl_product_info_display.php) to adjust the order in which the various page elements load (but that was easy and pretty straight-forward).

    Here's a sample page (same issues for all of them of course): http://www.shiftfashion.ca/shop/inde...&products_id=3

    The issue I'm having is that the "cartAdd" and "productAttributes" div's keep moving down the page (while my product description sits above them). This probably has something to do with the way I've floated the elements, but I'm not entirely sure where the problem comes up. Ideally I'm trying to have them display side by side just below the product name and price (then followed by the description) but they keep jumping down the page (just below the bottom edge of the main image but still on the right side of the page).

    So what am I missing? I've tried toying with floating and positioning via the CSS, but I must be overlooking something. Any suggestions?

  2. #2
    Join Date
    Jan 2008
    Posts
    6
    Plugin Contributions
    0

    Default Re: product info positioning issues

    (Hmm, I'm not sure how to edit my post either... I couldn't find the option)

    What I was going to add: Maybe somebody could just explain to me why the cartadd and productAttributes div's are displayed after the product description (although if viewing the html, they're clearly outlined first).

    I do already realize it's all about the css and positioning but I haven't a clue as to why things keep jumping around like they are, so assistance greatly appreciated. Thanks!

  3. #3
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,755
    Plugin Contributions
    9

    Default Re: product info positioning issues

    First get rid of these and see the result:
    Code:
    #productAdditionalImages {
    	clear: left;
    	float: left;
    	width: 225px;
    }
    
    #productName {
    	clear: right;
    }
    Then add these but insure that you do not have another for these(you do now)
    Code:
    #productAdditionalImages {
    	float: right;
    	width: 55%;
    }
    
    #productDescription {
    clear: both;
    }
    
    #productPrices {
    width: 40%;
    float: left;
    clear: both;
    }
    
    #productName {
    	float: left;
            width: 40%;
            clear: both;
            }
    I know not perfect but all I had time for and I think closer...
    Zen-Venom Get Bitten

  4. #4
    Join Date
    Jan 2008
    Posts
    6
    Plugin Contributions
    0

    Default Re: product info positioning issues

    Well I think it's a good start. However, that seems to put the alternate images to the right of the main, with the name, description etc below. That's unfortunately not quite the result that I'm looking for. I did notice, however, that the content below is closer to what I'm looking for. In fact, if I "display: none" the additional images, I'm getting even closer still (but then I don't have any additional images).

    I'm going to have to keep experimenting. Thanks for the advice so far!

  5. #5
    Join Date
    Jan 2008
    Posts
    6
    Plugin Contributions
    0

    Default Re: product info positioning issues

    Alright, so after some experimenting with the design of the page, I'm realizing all my issues are tied to the "clear" property. The clear property seems to affect all the subsequent elements, which means that as soon as I tell the additional images to "clear" the main, every other floating element clears it as well. (Even specifying "clear: none" doesn't seem to work since the "clearing" was already set earlier.)

    So... any other suggestions about how I might place those images?

 

 

Similar Threads

  1. Positioning elements on the Product Info pages
    By haliciad2 in forum Templates, Stylesheets, Page Layout
    Replies: 6
    Last Post: 9 Sep 2011, 04:43 AM
  2. Issues with Product info page: my product image is overlapping the product name, etc
    By wmorris in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 4 May 2011, 06:30 PM
  3. Positioning Cart in Product Info Page
    By aneroxic in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 8 Mar 2011, 07:46 AM
  4. Positioning Issues with Different Browsers
    By swelter83 in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 28 Mar 2008, 02:45 PM
  5. IE 7 positioning issues
    By disciple in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 13 Feb 2007, 02:06 AM

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