Header Help

i would suggesting bringing up a copy of the original benevolence css file and comparing it to yours. look for any changes in the body, html, wrapper, content…. etc

look for changes in margins, and text-align

just try a few things out until you fix your problem.

Unfortunately the blogger blog (the first link in my post) wasn’t built in the benevolence template, so it won’t be comparing apples to apples.

Still, omanno is right. The problem is that your header is set with a huge left margin which lines up with your first column. Change the margins of the header to margin-left:0 in your CSS and you are good to go….well, if your header’s margin looks like this:

header {margin:5px 50px 15px 100px....}

This is a shortcut. Imagine the clock and the top of the dial is 12 or noon. That is your first number (5px) or the TOP margin. As you move to the right, like a clock, 3:00 is your RIGHT margin, 6:00 is your BOTTOM margin, and 9:00 is your LEFT margin. Change the left margin (in this example the 100px) to 0px or 5px to see what happens.

You probably already know this, but this is also for others watching….and learning.

Still no luck Lorelle, but I appreciate the advice. The clock analogy I wasn’t familiar, but is a great memory device…. In the template I’m struggling w/, there is no header section at all, just a masthead, which I’ve been assuming is the same thing. Adjusting the left margin size didn’t seem to make any difference at all. But thanks for the help.

The answer was there, you just didn’t play sherlock good enough.

1. There is no “masthead” listed in your html – only your css, so you could mess with that until you are purple but if it isn’t in the html, you are influencing nothing.

2. The controls for your layout are:
* wrapper (controls your overall layout from top to bottom)
* header (top part – you called it the masthead)
* insideWrapper (controls everything below the header including your two columns

You have other things below there to control column width and placement, but these are the parts you are having trouble with.

I changed the margins in the “wrapper”, which were set to shove everything into the center, to zero and bingo, we had everything on the left margin.

From there, you need to change your “header” (delete masthead in the CSS file – useless) to whatever you need to get a little padding or whatever.

Then change your “insideWrapper” margin to slide the columns over under the header. You can play with the numbers to get what you want.

In the future, I recommend that on your browser you choose VIEW > SOURCE or PAGE SOURCE to see the code behind your page. Print it out if you need it. Find the problem content (in this case, I just looked for your graphics and the link around it) and note the CSS style applied to that area. Then open your CSS file and look for that name. This is where to change the styles to make it do what you want. Always look for “parents” above the problem area to see if the parental influence is screwing up the life of their children…hee hee.

In this case, the parent “wrapper” was controlling the whole thing and making the children miserable.

I also recommend changing the HTML CSS reference and the CSS reference for “insideWrapper” to “insidewrapper”. The recognition of capitals and lowercase letters can screw things up in different browers if the CSS has it capitalized and the HTML doesn’t or vise versa. Some ignore case, but not all all the time. Mixed caps can cause all kinds of grief so be careful with them.

Hope that helps.