[SOLVED] Full Width Header and Footer with Logo/Menu/Content positioned above center
1 Attachment(s)
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? |
Quote:
Quote:
|
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.
|
HTML Code:
margin: 0 auto |
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. HTML Code:
div#menu12 ul.rMenu-hor li.rMenu-expand a { |
use this
HTML Code:
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.
HTML Code:
#menu2 { HTML Code:
div#menu12 ul.rMenu-hor li.rMenu-expand a { |
Quote:
Quote:
Quote:
|
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. HTML Code:
div#footer.full-width { |
Quote:
Quote:
|
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.
HTML Code:
div#header_widget { |
Quote:
|
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! |
All times are GMT -6. The time now is 12:43 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.