My main problem is that the pink header/banner has unique graphics all the way across. I have made it 1800px wide to accomodate any large resolutions.
The problem I had when I cropped out the page width of the banner as the header DIV that it didn’t line up with the body background image. THis was because the background top left corner starts at your screen resolutions corner and therefore the body background is pushed further to the right and ends up not lining up with the portion that is in the header.
I have also thought about placing the whole banner as a separate (relative positioned) DIV physically #wrapper div at the width of the banner (1800px). It creates a scroll bar on the page, but I believe this can be removed – and this might be the only way to go.
Any suggestions on how to achieve the mockup in CSS layout?
NOTE: I came up while typing this the idea that you put the body in a class and tell the background image to be set absolutely.
Thanks, unfortunately zero’ing out the margin/padding didn’t change anything.
To try and make my problem more clear:
What I call the "header/banner" area is the pink horizontal bar with the name and menu on it. You will notice it extends to the left and right exceedingly far (exactly: 1800px) to try and accommodate most resolutions. I did this so that I can make the left and right side of the bar that is outside of the main content page part of the body background.
However, when I cropped this out of PS, and put it as the body background, then took the banner section that is immediately above the page and put it as the background to a Header DIV, the left and right sides of the header DIV background did not match up graphically with the left and right areas of the body background.
I realized this was because the body background top left corner starts at your monitor’s top left corner. So it caused the body background to be pushed further to the right and the header DIV background section of the banner didn’t line up.
I hope that is a better explanation?
So possibly what you stated as a suggestion might work and I am about to try it.
The bottom line: I want to make the body background center horizontally. So no matter what monitor size you have the body background will line up exactly the same. Then when you center the #wrapper DIV that has all the corresponding DIV’s (specifically the Header DIV in this case) the background image of the Header DIV will always line up with the body background.
That’s the trick indeed. ;)
Aligning a div in the center and removing the scrollbars (overflow:hidden) is not a good solution. People with small resolutions or not-maximized windows can’t view the whole width of the page and can’t scroll either.