Results 1 to 6 of 6
  1. #1
    Join Date
    Sep 2006
    Posts
    52
    Plugin Contributions
    0

    Default Put gap between center box contents

    I am trying to to put a gap between the new, featured, specials and also purchased center boxes. Right now, the links to the product info pages are long and almost flowing into each other. But modifying the CSS for the following classes leads to the last box of a given row wrapping to the next row:

    centerBoxContentsNew, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured

    Any pointers to how I should accomplish this would be greatly appreciated.
    Thanks,


    Chuender

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

    Default Re: Put gap between center box contents

    A url to your site
    Zen-Venom Get Bitten

  3. #3
    Join Date
    Sep 2006
    Posts
    52
    Plugin Contributions
    0

    Default Re: Put gap between center box contents

    [FONT=&quot]The site is not live yet... I've attached the screen shot and here's the html for that section:

    [/FONT]
    Code:
    <div class="centerBoxWrapper" id="whatsNew">
    <h2 class="centerBoxHeading">New Products For October - Dissolved Oxygen</h2>
        <div class="centerBoxContentsNew centeredContent back" style="width: 33%;"><a href="http://localhost/zen-cart/index.php?main_page=product_info&amp;products_id=275"><img src="images/jenco/6308DT.png" alt="6308DT 1/4 DIN Dissolved Oxygen Analyzer with Programmable Pressure and Salinity Compensation" title=" 6308DT 1/4 DIN Dissolved Oxygen Analyzer with Programmable Pressure and Salinity Compensation " height="98" width="100"></a><br><a href="http://localhost/zen-cart/index.php?main_page=product_info&amp;products_id=275">6308DT 1/4 DIN Dissolved Oxygen Analyzer with Programmable Pressure and Salinity Compensation</a><br>$569.00</div>
        <div class="centerBoxContentsNew centeredContent back" style="width: 33%;"><a href="http://localhost/zen-cart/index.php?main_page=product_info&amp;products_id=271"><img src="images/jenco/9250.png" alt="9250 DO / Temp. Portable Meter with RS-232" title=" 9250 DO / Temp. Portable Meter with RS-232 " height="100" width="72"></a><br><a href="http://localhost/zen-cart/index.php?main_page=product_info&amp;products_id=271">9250 DO / Temp. Portable Meter with RS-232</a><br>$350.00</div>
        <div class="centerBoxContentsNew centeredContent back" style="width: 33%;"><a href="http://localhost/zen-cart/index.php?main_page=product_info&amp;products_id=272"><img src="images/jenco/9251.png" alt="9251 DO / Temp. Portable Meter" title=" 9251 DO / Temp. Portable Meter " height="100" width="72"></a><br><a href="http://localhost/zen-cart/index.php?main_page=product_info&amp;products_id=272">9251 DO / Temp. Portable Meter</a><br>$250.00</div>
    <br class="clearBoth">
    
        <div class="centerBoxContentsNew centeredContent back" style="width: 33%;"><a href="http://localhost/zen-cart/index.php?main_page=product_info&amp;products_id=273"><img src="images/jenco/9173.png" alt="9173 Dissolved Oxygen Benchtop Meter with Extra Large LCD Display" title=" 9173 Dissolved Oxygen Benchtop Meter with Extra Large LCD Display " height="100" width="100"></a><br><a href="http://localhost/zen-cart/index.php?main_page=product_info&amp;products_id=273">9173 Dissolved Oxygen Benchtop Meter with Extra Large LCD Display</a><br>$299.00</div>
        <div class="centerBoxContentsNew centeredContent back" style="width: 33%;"><a href="http://localhost/zen-cart/index.php?main_page=product_info&amp;products_id=274"><img src="images/jenco/9173R.png" alt="9173 Dissolved Oxygen Benchtop Meter with Extra Large LCD Display" title=" 9173 Dissolved Oxygen Benchtop Meter with Extra Large LCD Display " height="100" width="100"></a><br><a href="http://localhost/zen-cart/index.php?main_page=product_info&amp;products_id=274">9173 Dissolved Oxygen Benchtop Meter with Extra Large LCD Display</a><br>$359.00</div>
    <br class="clearBoth">
     
    </div>
    Thanks,

    Chuender
    Attached Images Attached Images  

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

    Default Re: Put gap between center box contents

    As this is set to 33% automatically and different browsers calc the margins and padding differently you will have to manually adjust this in the css for each tag or globally

    centerBoxContentsNew give a width of say 30% and then padding to match
    Zen-Venom Get Bitten

  5. #5
    Join Date
    Sep 2006
    Posts
    52
    Plugin Contributions
    0

    Default Re: Put gap between center box contents

    Thought there might be a better way through Admin, but I'll give your advice a go.

    Appreciate your input.

  6. #6
    Join Date
    Oct 2010
    Location
    Idaho
    Posts
    292
    Plugin Contributions
    0

    Default Re: Put gap between center box contents

    Kobra, great idea, I've been looking for some type of solution all day this issue, but when I tried this it appears that the styled width from the tpl overrides my css of 30% for the class. So won't work? any other ideas?

 

 

Similar Threads

  1. Annoying gap between left column and center box
    By Reeselectronics in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 8 Jul 2009, 02:05 AM
  2. how to seperate categories in listing box and reduce gap between main cat and subs?
    By Sushigal in forum Templates, Stylesheets, Page Layout
    Replies: 10
    Last Post: 26 Jun 2009, 11:24 AM
  3. Spacing between center box and right boxes
    By Yizit in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 5 May 2008, 06:45 PM
  4. Reduce the padding between center box and sideboxes
    By JimmyV in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 17 Mar 2008, 06:11 AM
  5. Gap between greeting and new products box
    By beasleybub in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 23 Nov 2006, 01:18 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