Forum Moderators: not2easy
I have a photoshop mockup of my website at <> and I am having problems with coming up with a reasonable CSS layout.
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.
[edited by: SuzyUK at 8:43 am (utc) on May 4, 2008]
[edit reason] sorry no personal links, see charter [/edit]
So far as the description of the issue.
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.
This will certainly accommodate high-res, but likely will not be very friendly to 90%+ of your users.
It would be my inclination to go with a much smaller header/banner (a little less 'uniqueness' in one large image), and lay it over a repeating,but complementary, background-image: This will address the inordinate horizontal scroll that, IMO, is most likely unnecessary.
About the 'lining up'; could be margin, padding, or similar.
When you settle on the approach, and if a problem remains, post the relevant CSS and HTML, and we will we what's up.
As for lining it up, why not do a body and wrapper to get your centered look and absolute position the banner on top.
BTW: 1800px might not be big enough (the screen of the laptop I type this on is 1900px wide (although I never surf the web full-screen)
as the others have said a very wide unique banner can't really be shrunk in a degradable way.
I know it's hard to describe an image, but obviously a few saw it and yes I agree with the others this particular banner does not lend itself to scalability no matter how you put it in place, usually in these type banners there is an area of solid color or common gradient so that the image can be input in two parts ala "Sliding Doors" this usually means that at some point once the window is shrunk far enough that the menu will overlap the logo BUT that's considered an aesthetic because the menu is still usable.
your only other option would be to use a min-width which is the same as your banner, that would then mean a horizontal scroll in most cases, but again still usable.
perhaps shrinking the banner so it's <=1000px or max approx 980px would bring it inside the majority resolution would avoid scrollbars for most (but not all)
