Photobucket   Photobucket   Photobucket   Photobucket   Photobucket   Photobucket   Photobucket

2009-09-19

{Quick Fix 4 Your Off Centered Blog Header}

On my many many travels to various blogs here and there I've been seeing a recurring problem on many blog headers. I know that when I was figuring out all the ins and outs of blog design enough to get me by it would drive me nuts when things just didn't look right on my blog: not enough space between sidebars, my header being off-centered, borders in places that I didn't want them, etc. I imagine that I'm not the only one that is bothered by that stuff so here's a quick fix for one major blog design problem: centering the header.

I'm not sure if you can see it but the arrow on the left is pointing to a light gray border and the arrow on the right is to show you how the header is outside that border. Not good. Fixing this problem is actually pretty simple. The first thing I do is remove the border altogether. That's just a matter of preference really but since this is my blog, we'll do it my way. lol

Step 1 - Removing Border from Header
  • Go to your "Layout" tab and click on "Edit HTML"
  • Find this block of code:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;

Anywhere you see border: 1px in this section, change it to 0px (that's a zero, not an "oh"). That will remove the border from around the entire header.

Step 2 - Centering Header (I got this information from this blog)
  • While still in "Edit HTML" mode, find this block of code:
#header img {
margin-$startSide: auto;

margin-$endSide: auto;

}

ADD THESE 2 LINES RIGHT BELOW margin-$endSide: auto;

position: relative;
left: -25px;

So now your code should look like this:

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
position: relative;
left: -25px;
}

Here's the only somewhat tricky part and by tricky I mean you may have to play around
with the numbers a bit. See where it says -25px;? You may have to adjust the numbers
less than -25 or maybe more than -25 to get it closest to the center on your
particular blog. Make sure you "PREVIEW" before you save. Wallah - you're done. :)

Hopes this helps. If you use this tutorial, please be sure to let me know by leaving me a comment. :)
Photobucket

6 enchanted replies:

Andy Porter said...

lol...thanks for the tips. I'll have to try it when I have more energy! I think I'm going to relax and watch Wolverine with the hubby for tonight. Enjoy your weekend!
~Andy

Melanie@Crafty Cupboard said...

You are heaven sent. This has been bugging me so bad since I got that header up... I really appreciate it, and I will fix it SOON so you don't have to suffer either!

Melanie@Crafty Cupboard said...

OK its done, let me know what you think. I think it looks 158 percent better ;)

Mandy said...

Thanks for the tips! I'm planning to try them out soon...as soon as I can figure out how to make a header in PSE!

SorionHex said...

Thank the Creator you arrived! I've had my header all messed up since I first started my blog, that's probably a year and now it's fixed!

Kristy said...

Thank You, Thank You, Thank You!!!
I have been working all day trying to get my title centered - it was just a little too far to the right and it was driving me crazy! Thank you so much!