how to center the heading of my blog

Aug 6, 2011

Sinead C.

hey everyone. so i've just created a new header for my blog but have noooo clue what css code is to put in the center. if someone could help me out i would love them forever! http://nadiesanddaisies.blogspot.com/ xxxxx

Aug 6, 2011

Michelle H.

If you go to the Design tab and then click edit html you'll find the css code there.

Before making any changes copy all of the code into notepad. This way if you mess up, you can just copy it back.

Then look for:

#header-wrapper {
margin:0;
padding: 0;
background-color: $headerCornersColor;
text-align: $startSide;
}

#header {
margin: 0 2%;
background-color: $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
position: relative;
}Then look for:
type="length" default="1px"/>
<Variable name="header.padding" description="Header Padding" type="length" default="30px"/>

Where you see padding and default ="30", play with those numbers by increasing or decreasing them. If it looks messed up, just put it back the way it was.

My blog is on wordpress and I edited my css to do the same thing. I had to play with the padding under the header section and at "5" it worked.

Aug 7, 2011

Shelly T.

You don't (and didn't) need to mess with the padding.

Her header image is all the way to the left of the header space/width Blogger gives by default (860 pixels, if my interpretation of the source code is correct). Changing the padding is not going to center the image; padding has to do with space in between elements. Plus, you need to keep in mind not everyone has the same screen resolution as you do, and not everyone views websites with their browser open in full screen.

Anyway, what she needs to do is change the margins.

In the "Header" section of the actual CSS, add the following...

#header-inner {
margin: 0 auto;
width: 500px;
}

Here's what it means...

"margin: 0 auto" = 0 for the top and bottom margins; "auto" for the left and right ones. "auto" lets each person's browser calculate it automatically.

"width: 500px" = 500px is the width of the header image.

I highly recommend all bloggers take the time to learn (proper) HTML and CSS. While you may not be heading for a career in web development or design, and you may not be pursuing either/or as a hobby, the more knowledge you have of how both work, IMO, the better.

http://www.w3schools.com
http://www.webmonkey.com

Aug 7, 2011

Sinead C.

thankyou!! i finally got it to work xxxxx

Aug 10, 2011

Michelle H.

I'm sharing how it worked for me. I don't use Blogger. I use Wordpress with a Thsis theme and changing my padding did the trick for me. I don't profess to be a web pro. just sharing what I did. Nothing wrong with trying things. That's how you learn. My image was also too far to the left.