Forums

Give help. Get help.

  • # May 2, 2008 at 3:19 pm

    Hi All.

    I have a photoshop mockup of my website at http://www.daisyblossoms.com/mockup2.jpg 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.

    # May 5, 2008 at 3:01 am
    "pghtech" wrote:
    I think i found the trick.

    Background-position: center 0

    This centered horizontal and at 0 from the top.

    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.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag