I am trying to get the menu and logo areas in my header to be contained within the same width of my center column.

I tried moving this stuff around with margins and made it LOOK right, the problem is it moves around when the browser window is resized. How do I stop that?

The attached image is what I want it to look like, and stay fixed this way no matter the window size.

Also, how the heck do I make a matching background bar between the footer and white center column, like there is between the header and center column?

I am trying to get the menu and logo areas in my header to be contained within the same width of my center column.

They don't look like they are outside the area of the center column

Also, how the heck do I make a matching background bar between the footer and white center column, like there is between the header and center column?

add some padding??

Sorry, I think you're misunderstanding me.

That is what I want it to look like at all times. If you change the window size of the browser the menu and title float dependent on where the edge of the browser window is, rather than the center column. When the window size is made smaller everything shifts to the right, basically.


Add padding where? The places I have tried it do not give the affect I am looking for.

How would I know what is would look like when you provides image and not a link to the site?

It is not currently on a publicly available server.

Ignore the picture.

I set my site width in ATO Layout to 960px.

If I set my Header to be full width:yes and my footer to be full width:yes, how do I keep content within the header and footer statically placed within the 960px side to side area of the center column?

Basically what I am trying to accomplish is like this site: http://havendesignstudio.co

I can make this look the same with margins but when the window is resized the margin is based off the edge of the window, and it causes the menu and the logo to move around and become uncentered from the center column.

the full width header option is just that: The entire header becomes full width. That means the header image, logo, menus are all full width.

It looks like you don't want a full width header, you want a background image that is full width.

One of the sample styles shows and example of this approach. You can find the sample styles in the atahualpa/styles folder.

That style does not do what I want.

Can anyone give me a yes or no: can content placed in the header area be statically set to always display centered above the 960px center column when using a full width header setting or not?

If yes, any ideas how?

try defining the width of the div to match your center area width and add margins to it.

margin: 0 auto

will center a div with a defined width.

I think I might go in a different direction because I just can't seem to make this happen.

Since the FRDG site is not publicly available I decided to apply the same sort of style to a new personal blog I am starting to work on and in doing so I've come up with what I think will be a good alternative to what I am trying to accomplish. See http://dirtsweatgears.com for an example.

We have decided however we don't like the gap in between the header area and the center column (where my background image shows through between white box and grey header)

This gap is ONLY present when I use the CSS code below to float the category menu down to line up with the logo/site name text. If I let the menu sit above the logo area, the gap is not present. For the life of me I can not seem to fix this.

div#menu12 ul.rMenu-hor li.rMenu-expand a {
	background-image: none;
	}
	}
div#menu2 ul.rMenu li {
    background-color: transparent;
}
div#menu2 ul.rMenu li.current_page_item a:link, 
div#menu2 ul.rMenu li.current_page_item a:active, 
div#menu2 ul.rMenu li.current_page_item a:hover, 
div#menu2 ul.rMenu li.current_page_item a:visited, 
div#menu2 ul.rMenu li a:hover {
    background-color: transparent;
}
div#menu2 ul.rMenu {
    background-color: transparent;
}

#menu2 {position: relative; top: -130px;)
}

Please bear with me as I have to teach myself this stuff as I am doing it - I love playing with it but I don't know enough to understand it all - when I come here for help it's because I have not been able to figure it out or find a solid answer in my research.

use this

div#menu1 {width: 960px; margin: 0 auto;}

The code you said you used has an extra closing bracket on the first item. Is that a typo?

To close the gap just add a height of 0 to the last item like the following and take out the closing parenthesis which is invalid CSS.

#menu2 {
position: relative;
top: -130px;
height: 0;
}

All of your CSS could be changed to the following for simplification

div#menu12 ul.rMenu-hor li.rMenu-expand a {
background-image: none;
}
div#menu2 ul.rMenu li {
    background-color: transparent;
}
div#menu2 ul.rMenu li.current_page_item a, div#menu2 ul.rMenu li a:hover {
background-color: transparent;
}
div#menu2 ul.rMenu {
background-color: transparent;
}
#menu2 {position: relative;
top: -130px;
height: 0;
}

And even some of that may be redundant or unnecessary but it would take more experimentation to determine.

Originally Posted by juggledad

use this

div#menu1 {width: 960px; margin: 0 auto;}

That's almost there! It got the menu within the area wanted. I'm trying to apply this same to the logo graphic as well to bump it right, but I am either not using the right selector, or it has no effect on it.

Originally Posted by lmilesw

The code you said you used has an extra closing bracket on the first item. Is that a typo?

That extra bracket - I don't know why but if you remove it, it makes my menu animation behave weird. It doesn't follow the hover colors I set unless the second bracket is there.

Originally Posted by lmilesw

To close the gap just add a height of 0 to the last item like the following and take out the closing parenthesis which is invalid CSS.

#menu2 {
position: relative;
top: -130px;
height: 0;
}

All of your CSS could be changed to the following for simplification

div#menu12 ul.rMenu-hor li.rMenu-expand a {
background-image: none;
}
div#menu2 ul.rMenu li {
    background-color: transparent;
}
div#menu2 ul.rMenu li.current_page_item a, div#menu2 ul.rMenu li a:hover {
background-color: transparent;
}
div#menu2 ul.rMenu {
background-color: transparent;
}
#menu2 {position: relative;
top: -130px;
height: 0;
}

And even some of that may be redundant or unnecessary but it would take more experimentation to determine.

Thanks, that worked great (once I added that mysterious second closing bracket)

I've just changed to using a new widget area for the "logo" and I am getting closer but I still can't figure out how to stick it to the left edge of the 960px center column. This is so frustrating sometimes! lol

Edit: also what is causing my site to have a scroll bar on the bottom of the page when full screen, when full width header in enabled?

I would look at the rest of your css for an extra brace.

The logo looks like it is at the left edge.

The scroll bar looks to be a bug in the full width footer code. You can fix by adding the following to CSS Inserts.

div#footer.full-width {
padding-right: 0;
padding-left: 0;
}

Originally Posted by lmilesw

I would look at the rest of your css for an extra brace.

The logo looks like it is at the left edge.

It is at the left edge, but it's not stuck to it. If you resize the window notice how the right side of the menu sticks with the right edge of the center column? The logo floats around, I want the left side of the logo to stick to the left side of the center column. Tried various things but I just can't get it to work the way I was thinking it should after you guys turned me onto the margin auto bit.

The scroll bar looks to be a bug in the full width footer code. You can fix by adding the following to CSS Inserts.

div#footer.full-width {
padding-right: 0;
padding-left: 0;
}

Will have a look!

you have your header widget area set to 'position: absolute;' - that means it won't move.

Just for the "fun" of it I played with the CSS a bit. This might get you closer to what you want.

div#header_widget {
    margin: 30px 0 0 -275px;
    position: absolute;
    width: 100%;
}

Originally Posted by lmilesw

Just for the "fun" of it I played with the CSS a bit. This might get you closer to what you want.

div#header_widget {
    margin: 30px 0 0 -275px;
    position: absolute;
    width: 100%;
}

That nailed it. Thanks

I was only going to use this on the FRDG site I am trying to bring up for our sister company but I think I'm going to steal this style for that personal blog of mine too. haha

Thanks gentleman!