Results 1 to 4 of 4
  1. #1
    Join Date
    Jun 2011
    Posts
    65
    Plugin Contributions
    0

    Default HTML Code Help - Add Padding Around Background Box

    Hi all, been trying to figure this out but not very code saavy, please help! :)

    Here is my site: http://lunapetuniadesigns.com/index....products_id=11

    I would like to put a left margin in the grey background box so that the text is not right up against the side. What is the code I need to enter into my product listing to create the padding there?

    This is what I currently have:
    <table border="0" style="width: 660px; height: 47px; text-align: left; margin-left: 0px; margin-right: 0px;"><tbody><tr style="background-color: rgb(242, 242, 242);"><td style="direction: ltr;"><font size="2"><font face="arial" color="#4D4D4D"

    Thanks so much much for any help!

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

    Default Re: HTML Code Help - Add Padding Around Background Box

    Scrap that table
    Tables are meant for tabular data and this is not tabular data

    Place it in a named div then add that ID to your stylesheet for decoration etc
    Zen-Venom Get Bitten

  3. #3
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: HTML Code Help - Add Padding Around Background Box

    You are using way more code elements than you need, making it more complicated and tricky to style. Change this
    Code:
    <!--bof Product description -->
    <div id="productDescription" class="productGeneral biggerText"><br />
    <br />
    <br />
    <br />
    <table border="0" style="width: 660px; height: 47px; text-align: left; margin-left: 0px; margin-right: 0px;"><tbody><tr style="background-color: rgb(242, 242, 242);"><td style="direction: ltr;"><font size="2"><font face="arial" color="#4D4D4D">This invitation is fun for any Ice Cream themed party!  </font></font><font size="2"><font face="arial" color="#4D4D4D">All wording, fonts and colors can be customized to your liking.  </font></font><br /></td></tr>
    </tbody></table>
    
    <br />
    <br />
    
    <p style="font-weight: bold; text-decoration: underline; font-family: arial,helvetica,sans-serif; color: rgb(102, 102, 102);">
    
    <font size="3">{YOUR PURCHASE OPTIONS}:</font></p><span style="font-family: arial,helvetica,sans-serif;"><span style="text-decoration: underline;"><span style="font-weight: bold;"><br /></span></span></span><font size="3" face="arial" color="#4ec3c7" style="font-family: arial,helvetica,sans-serif;">{DIGITAL FILE FOR SELF PRINTING}</font><span style="font-family: arial,helvetica,sans-serif;"><br /><br /></span><font size="3"><font size="2"><span style="font-family: arial,helvetica,sans-serif;">You
     may purchase the customized file for self printing. You will receive a 
    proof of your invitation within 24 hours and can request further changes
     until you are 100% happy with it. Once you have approved the 
    invitation, the final high resolution file will be emailed to you. You 
    can then print the invitations through your home printer or through any 
    photo lab or print shop. You can even email the invitation to your 
    guests! 
    </span></font></font>
    
    
    <br /><font size="3"><br style="font-weight: bold;" /><span style="font-weight: bold;">&nbsp;</span></font>
    
    
    <p style="font-weight: bold;"><font size="3" face="arial" color="#4ec3c7">
    <font style="font-family: arial,helvetica,sans-serif; font-weight: normal;">{PRINTED INVITATIONS}</font></font><font size="2" style="font-weight: normal;"><span style="font-family: arial,helvetica,sans-serif;"><span style="font-weight: bold;"></span><br /></span></font></p><p style="font-weight: bold;"><font size="2" style="font-weight: normal;"><span style="font-family: arial,helvetica,sans-serif;">You
     may choose to have your invitations professionally printed and mailed 
    to you.  Your invitations will be laser printed onto premium smooth 
    matte cardstock (100 lb). Available in size 5x7 only. 
    </span></font><br style="font-family: arial,helvetica,sans-serif;" /></p><div style="text-align: justify;"><font size="3"><font size="2"><span style="font-family: arial,helvetica,sans-serif;">You
     will receive a proof of your invitation within 24 hours and can request
     further changes until you are 100% happy with it. Once you have 
    approved the invitation, your order will be printed and shipped to you 
    within 3 business days. 
    </span></font></font><br />
    
    </div>
    <br />
    
    <br /></div>
    <!--eof Product description -->
    to this
    Code:
    <!--bof Product description -->
    <div id="productDescription" class="productGeneral biggerText">
    <p class="descBox">This invitation is fun for any Ice Cream themed party!  All wording, fonts and colors can be customized to your liking. </p>
    
    <h4>{YOUR PURCHASE OPTIONS}:</h4>
    <h5>{DIGITAL FILE FOR SELF PRINTING}</h5>
    <p>You may purchase the customized file for self printing. You will receive a 
    proof of your invitation within 24 hours and can request further changes
     until you are 100% happy with it. Once you have approved the 
    invitation, the final high resolution file will be emailed to you. You 
    can then print the invitations through your home printer or through any 
    photo lab or print shop. You can even email the invitation to your 
    guests! 
    </p>
    <h5>{PRINTED INVITATIONS}</h5>
    <p>You may choose to have your invitations professionally printed and mailed 
    to you.  Your invitations will be laser printed onto premium smooth 
    matte cardstock (100 lb). Available in size 5x7 only. 
    </p>
    <p>You will receive a proof of your invitation within 24 hours and can request
     further changes until you are 100% happy with it. Once you have 
    approved the invitation, your order will be printed and shipped to you 
    within 3 business days. 
    </p>
    </div>
    <!--eof Product description -->
    and you can use styling like this in your stylesheet.
    Code:
    #productDescription p {font-size: 1.2em; font-family: arial,helvetica,sans-serif; margin: 2.0em 0;}
    
    #productDescription p.descBox {background: rgb(242, 242, 242); padding: 0.5em;}
    
    #productDescription h4 {font-size: 1.5em; font-family: arial,helvetica,sans-serif; font-weight: bold; text-decoration: underline;  color: rgb(102, 102, 102);}
    
    #productDescription h5 {font-size: 1.5em; font-family: arial,helvetica,sans-serif; font-weight: bold; text-decoration: none; color: #4ec3c7;}
    Adjust to taste.

  4. #4
    Join Date
    Jun 2011
    Posts
    65
    Plugin Contributions
    0

    Default Re: HTML Code Help - Add Padding Around Background Box

    That's awesome! Thanks for suggesting that, Kobra!

    And thanks SO very much, gjh42, for the coding and CSS help!!!! I tested it out and that works perfectly and achieved exactly what I wanted in a MUCH easier format. I truly appreciate your time and help with this.

    You guys are the best.

 

 

Similar Threads

  1. Padding around images
    By kbear in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 27 May 2011, 05:50 PM
  2. How do i minimize the padding around my top header?? Please Help
    By c5thave2 in forum Basic Configuration
    Replies: 2
    Last Post: 14 Nov 2009, 05:35 AM
  3. How do I add a box around the text
    By DreamGirl in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 29 Mar 2009, 04:15 AM
  4. box around add to cart
    By ccembd in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 15 May 2008, 03:31 PM
  5. Help w/ left side box padding
    By namasa in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 12 May 2006, 04:42 PM

Bookmarks

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
Zen-Cart, Internet Selling Services, Klamath Falls, OR