How to make header image & menu bars stretch full width of the container?
 

I want the header to absolutely fit the container of the blog with no left or right borders and the top border very minimal. How do I do this? I have searched the forum and only found how to make the header go full width of the entire browser page. This is not what I want.

I have tried extended the width of the header area and all that does is give me more on the right hand side falling off the container of the whole blog.

Is there a solution to this?

You could set the right and left padding of div#container to 0 and then add padding to the posts etc. to compensate so that text in them isn't flush left or right.

Ok, that still left about a 15-20px margin on the right side and then the nav bars were all off and the sidebars dropped below the content.

I was hoping for a quick fix. LOL Guess not.:p

I didn't leave the link because the site is still under construction and since it was a header issue with margins/padding, etc. I didn't think it was necessary.

In any case, the link is: http://shopwithmemomma.com/

As you can see it is all FUBARED.

You don't have a header image in you header...however you do have a LOGO image...
so...what does the logo have surrounding it?
http://shopwithmemomma.com/wp-conten...mages/logo.gif

In photoshop, when I was designing the header, I simply added a stroke outline to the header. I added nothing in the CSS for it.

And whenever designing Atahualpa, I have always added the header as a logo.gif. It's how I was taught to design for this theme. Should I be doing it differently?

Now I have another issue...

My client had another designer (without my knowledge) go in and mess with the coding. Now it is all kinds of FUBARED.

No text widgets will show up in the sidebars. She had another designer go in and mess with something (before I was even completely done with my part) to make the text widgets show up in the sidebars. That made all of the padding/margins around the whole of the content area go away, the top menu bar is wider than the header, the footer disappeared and the post area is almost falling off the left edge of the blog even though I have CSS inserts in there adding 10px of padding to everything.

Does anyone know why this would happen? I have no idea what this other designer did, nor do I know why it made a perfectly lovely design go all weird.

You should find out where this other designer made the changes. I they are not familiar with Atahualpa they may have made changed to the theme files which will make "fixing" the issues problematic.

I asked for that information and was told I could figure it out myself. Nice, eh?

Anyway, I uninstalled and re-installed the theme twice and had the same issues. I installed a default theme and had the same issues with the sidebar text widgets not showing up. I am in the process now of uninstalling wordpress and then re-installing it to see what happens. The MySQL database is loading as we speak.

But now I am a little worried about uploading the ata-settings file back into a new installation. I just don't know what happened to begin with.

that's not an issue, tell the client that you'll be happy to, but the terms of any contract have changed and now you have to bill by the hour because there is no way to determine quickly what was done.

And be prepared to walk.

Thanks, guys. You are both right, but it seems to all be fixed now except for the top nav bar being wider than the container. I will not have this happen again. I have updated my TOU to state what should have been obvious already ~ Don't call in anyone else until I say I am completely done with your design even if I have loaded it on to your site. OY.

I had to uninstall and re-install WP in order to fix everything. Hopefully it sticks after I add all the plugins back.

Now the only issue seems to be the top nav bar.

Well I see your footer is back. Are there any other issues still?

Yes, but just two. The page bar is still wider than the header (at least that's how it looks) and the post thumbnails aren't showing up. And is there a way to make the top border of the footer not go all the way across? I would like about a 15px padding on the right & left sides so it kind of looks centered.

And for some strange reason, even though I have the grab my button code in a table so that the button & grab box are side by side, it is showing up on top of each other. I even set the grab box to have 5 columns & 5 rows, but it's still really wide. I have no clue why. I think the theme hates me today.

But other than that, I think we're good. LOL

hmm...I count 4 questons
First lets clear up some terminology. You are using a LOGO image, not a HEADER image (you use %logo in the 'Configure Header Area' option, not %image - this can be determined by looking at the generated source). The menubars, header images, logo, category menu etc, are all part of the header and the width of the header is defined by the width of the container.

Your PAGE menu bar looks wider than the LOGO image because of the border that is PART OF THE IMAGE and is the same color of the page menubar background. Go to ATO->Body, Text & Links->Body Style and get rid of the background image (just put a 'x' somewhere in the name) and then take a look at the page.

Sorry about the 4 questions. LOL

How would I put the "header" image in the right place that is no the LOGO image so that the container and everything looks even? (If I do put the header in the proper place, will it )

I'm usually not this dumb, but my mind is friend from having to redo the entire thing 4 times yesterday.

Ok, I put the image in the header folder but it showed up for a bout a minute only. Now the default images are rotating with each page refresh even though I deleted them all from the header folder.

OY.

But I've fixed it now.

My question is, why can I not keep the header image with the outline and just increase the layout width by 3 or 4 pixels and have it still all line up? I tried it, it did not work. The only thing that works is the header image with no outline/border.

http://shopwithmemomma.com/

"...why can I not keep the header image with the outline and just increase the layout width by 3 or 4 pixels and have it still all line up?"

Because the border is part of the image

So if I add the border in the CSS it will line up?

I am not sure what you want to line up with what. Actually a border as part of the image or as a CSS border will cause the image area to be narrower that what is over and under it so the menus will be wider than the image.

It looks like the site is as you want it now though.

I just wanted to have the header span the full width of the container of the blog and be able to keep the border on the header image without the upper & lower nav bars not looking like they arre wider than the image. But I guess that isn't a viable option. Uggh.