SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Always A Novice bronze trophy
    K. Wolfe's Avatar
    Join Date
    Nov 2003
    Location
    Columbus, OH
    Posts
    2,182
    Mentioned
    67 Post(s)
    Tagged
    2 Thread(s)

    Centering background/hididng overflow

    This one is going to be kind of hard to explain, so try to bear with me and let me know if it becomes to hard to follow along with:

    Visit http://www.kylewolfe.com to see the design i am working on.

    The main content box is 790 px wide (just about browser safe width for 800x600. The rest of it extends out to around 960 px wide? In other words nothing will get chopped off in 1024 x 960.

    What I would like to achieve for those on 800x600:

    -Would like the horizontal scrollbar disabled (I know how to do this)
    -Would like the whole thing centered so that that background header becomes hidden both to the left and right of the screen.

    Thats the part Im not sure is possible and I probably lost you. So. If you switch over to 800x600 and look at the site, you will see that you can see all of the header on the left. I want the thing centered so that the left is hidden and all you see is the start of the content box? if that makes any sense?

    Normally when yo center an image or div, it will center itself until it hits the left of the window, then it will push to the right. I dont want that to happen, i want it to hide whats n the left and cntinue to center.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I personally use a container DIV for the entire layout which I apply my backgrounds to and set the width to 750px (which IS 800x600 friendly). Have you tried doing that?

  3. #3
    Always A Novice bronze trophy
    K. Wolfe's Avatar
    Join Date
    Nov 2003
    Location
    Columbus, OH
    Posts
    2,182
    Mentioned
    67 Post(s)
    Tagged
    2 Thread(s)
    Well, that doesnt solve my problem. Once that div hits the left side of the window, it will get pushed over.

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I can't hardly see any of the boxes on your page Kyle (my screen is starting to die and get dim) but if I understand you correctly, I think I've done this. Instead of using a container like Dan does, I just have the background on the body (tho it doen't matter). There's no width on this body background, so if your screen is like mine (1400+px) then you always see background.
    On top of this background is the div with the set width. So if you do like Dan does with the width being 750px, okay, no scrollbar, and you center it using margin: 0 auto (which I think you're using), and so long as the body (or back container, whatever) doesn't have any side padding, you won't see the background unless the screen gets wider than the set width of the inner div (the 750px one).

    If there's a background image in the header (sorry I can't see that well), it should stay a background image, and the header's width must be 750px at a minimum... you could let it stretch out to the full width of the background image (let's say this image is 960px wide) by setting a max-width on the header as well. Something like:
    <div id="header">stuff </div>
    #header {
    min-width: 750px;
    max-width: 960px;
    height: whatever;
    background: url(backgroundimg.jpg) center center no-repeat;
    }
    You'll need something special for our very special friend IE6, either the CSS-Javascript it supports (doesn't affect other browsers at all) or the strange trick with the huge borders and negative margins I saw once... I've got it written down but have never used it yet.

    Maybe you could change the colours to something garish and loud so we can better see what's going on visually... something like this: http://www.goer.org/HTML/examples/htmlhorror1.html
    : )


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •