Page 1 of 2 12 LastLast
Results 1 to 10 of 11
  1. #1
    Join Date
    Jan 2008
    Location
    Southern California Coast
    Posts
    183
    Plugin Contributions
    0

    Default Margins and Padding

    Hey Zenners,

    I went through my stylesheet but for some reason my site always has a little problem with the side bars and center headers. Here is a link to my developing site. All the bars that are red is the problem. I want them to all be the same height and width for the headers with the exception of the center boxes being longer in width. Please help.

    Warm Regards,
    Jason H

  2. #2
    Join Date
    Apr 2007
    Posts
    38
    Plugin Contributions
    0

    Default Re: Margins and Padding

    have you checked your stylesheet.css file for all occasions of rightBoxHeading and leftBoxHeading??
    That's what I use to modify the sidebars.

  3. #3
    Join Date
    Jan 2008
    Location
    Southern California Coast
    Posts
    183
    Plugin Contributions
    0

    Default Re: Margins and Padding

    I went through my stylesheet and changed what I could do see what each thing did, kind of learn as I went. I was able to change the side bars all to 0em but for the middle ones I'm still not quite sure how. As for the sidebars, I have found which area configures what but I can't get them all to look the same for some reason. I changed all the sidebars that are red to Height: 0em but they still appear to be different sizes, or is something wrong with my eyes?

    Links or direct codes to change would be appreciated!

    Thanks!
    Jason H.

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

    Default Re: Margins and Padding

    If you want the sideboxes to match, you have to give them the same dimensions:
    Code:
    .leftBoxHeading, .centerBoxHeading {
    	margin: 0em;
    	background-color: #FF0000;
    	padding: 0.5em 0em;  <------.5em top & bottom
    	}
    
    .leftBoxContainer {
    	border: 0px solid #ffffff;
    	}
    
    .sideBoxContent {
    	background-color: #ffffff;
    	padding: 0.0em;
    	}
    
    h3.rightBoxHeading, h3.rightBoxHeading a {
    	font-size: 11px;
    	color: #FFFFFF;
    	}
    
    .rightBoxHeading {
    	margin: 0em;
    	background-color: #FF0000;
    	padding: 0.2em 0em;  <------.2em top & bottom
    	}

  5. #5
    Join Date
    Jan 2008
    Location
    Southern California Coast
    Posts
    183
    Plugin Contributions
    0

    Default Re: Margins and Padding

    Ok so here is the code I changed it to.

    Code:
    .leftBoxHeading, .centerBoxHeading {
        margin: 0em;
        background-color: #FF0000;
        padding: 0.3em 0em;
        }
    
    .leftBoxContainer {
        border: 0px solid #ffffff;
        }
    
    .sideBoxContent {
        background-color: #ffffff;
        padding: 0.0em;
        }
    
    h3.rightBoxHeading, h3.rightBoxHeading a {
        font-size: 11px;
        color: #FFFFFF;
        }
    
    .rightBoxHeading {
        margin: 0em;
        background-color: #FF0000;
        padding: 0.3em 0em;
        }
    After that, my page looks more disoriented than before when I made the padding the same. Did I misunderstand or could something else be wrong??

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

    Default Re: Margins and Padding

    The apparent difference between shopping cart and categories headings may be an optical illusion - FF Web Developer says they are the same 20px height.

    The search heading in the right sidebar has a <label> element which has a larger line-height by default; Add this to your stylesheet:

    .rightBoxHeading label {line-height: 1.1em;}

    The breadcrumbs bar is not affected by the sidebox/centerbox styles; add this to control it:

    #navBreadCrumb {line-height: .88em;}

  7. #7
    Join Date
    Jan 2008
    Location
    Southern California Coast
    Posts
    183
    Plugin Contributions
    0

    Default Re: Margins and Padding

    Totally awesome gjh42! That fixed the sidebars problem, but the problem of the center boxes are still there. As in my first post, the center box headers are different width; Home bar is wider than New Products bar. Could someone help with this as well. Much appreciated!

    Thanks!
    Jason H.

  8. #8
    Join Date
    Apr 2007
    Posts
    38
    Plugin Contributions
    0

    Default Re: Margins and Padding

    If you use the 'web developer' addin for firefox, it will let you check what css tags to edit - makes it a whole lot easier than scanning through source files...

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

    Default Re: Margins and Padding

    The "Home bar" is not a centerbox header. It is the breadcrumbs navigation, and can be controlled as noted above, or possibly by changing its padding.

    Looks like you have gotten them all sorted now.

  10. #10
    Join Date
    Jan 2008
    Location
    Southern California Coast
    Posts
    183
    Plugin Contributions
    0

    Default Re: Margins and Padding

    Sorry to revive this thread again but I don't want to make a new one. On my site I have a lot of the paddings and margins set up now but one thing I can't seem to correct is the white margin between my two headers. Please help!

    Sincerely,
    Jason H.

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. Modifying margins / padding WITHIN a sidebox
    By aaronjmorgan in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 29 Apr 2013, 04:59 PM
  2. How do I Add Padding or Margins Between Sideboxes?
    By THE-EDL in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 14 Dec 2009, 01:47 PM
  3. Adjusting Margins/Padding for Sub Category Listing
    By skydivebob in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 3 Mar 2009, 10:15 PM
  4. Having trouble with margins/padding
    By litepockets in forum Templates, Stylesheets, Page Layout
    Replies: 6
    Last Post: 13 Feb 2009, 09:50 PM
  5. Banner Box Margins or padding in side columns
    By gogolf in forum Templates, Stylesheets, Page Layout
    Replies: 8
    Last Post: 16 Sep 2007, 10:48 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