Margins and Padding

07 Feb 2008, 00:39

#1

Zen Follower

Join Date:: Jan 2008
Posts:: 174
Plugin Contributions:: 0

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

07 Feb 2008, 05:41

#2

predmond

New Zenner

Join Date:: Apr 2007
Posts:: 36
Plugin Contributions:: 0

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.

07 Feb 2008, 07:40

#3

dieuxsoldat_04

Zen Follower

Join Date:: Jan 2008
Posts:: 174
Plugin Contributions:: 0

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.

07 Feb 2008, 08:33

#4

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Margins and Padding

If you want the sideboxes to match, you have to give them the same dimensions:

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

07 Feb 2008, 18:49

#5

dieuxsoldat_04

Zen Follower

Join Date:: Jan 2008
Posts:: 174
Plugin Contributions:: 0

Re: Margins and Padding

Ok so here is the code I changed it to.

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

07 Feb 2008, 19:16

#6

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

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;}

07 Feb 2008, 19:29

#7

dieuxsoldat_04

Zen Follower

Join Date:: Jan 2008
Posts:: 174
Plugin Contributions:: 0

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.

07 Feb 2008, 21:34

#8

predmond

New Zenner

Join Date:: Apr 2007
Posts:: 36
Plugin Contributions:: 0

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

07 Feb 2008, 22:23

#9

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

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.

11 Feb 2008, 06:43

#10

dieuxsoldat_04

Zen Follower

Join Date:: Jan 2008
Posts:: 174
Plugin Contributions:: 0

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.

12 Feb 2008, 06:51

#11

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Margins and Padding

The logoWrapper div is still active, with its trailing <br class="clearBoth" />.
Moving the logo div comment tags out to enclose the whole wrapper and break will remove that space:[html]
<div id="logoWrapper">

</div>
<br class="clearBoth">
[/html]change to[html]

[/html]