SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div/Image Wider Than Page

    I have a simple image rotation at the top of the main page of my website and I want to put a shadow around it without making the site wider. My website is 960px but the image that would have the shadow around the rotation is 982px..

    I dont want horizontal bars to appear at the bottom of my page because of the 982px image.

    As an example of what I'm trying to do, if you take a look at the Macbook Pro page on apple.com the edges of the outer macbook pros are outside of the width of the page but if you make the browser small enough horizontally you see the edges dont affect the width of the page itself.. the horizontal bars appear when you make your browser window smaller than the site container.

    Whats an easy/clean way to do this?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    On the Apple site they've done it with negative margins:

    Code:
    #overview #hero .gallery-view {
      margin: 0 -16px 0 -18px;
      width: 1014px;
    }
    So they've pulled the image container left and right (wider that its own container) with those negative margins. Quite clever, really.

    Mind you, another approach could be to have a larger container and create the appearance that it was narrower by use of background images—although this might limit your options a bit.

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    On the Apple site they've done it with negative margins:

    Code:
    #overview #hero .gallery-view {
      margin: 0 -16px 0 -18px;
      width: 1014px;
    }
    So they've pulled the image container left and right (wider that its own container) with those negative margins. Quite clever, really.

    Mind you, another approach could be to have a larger container and create the appearance that it was narrower by use of background images—although this might limit your options a bit.
    yea i saw that but didnt really understand how it worked.. ill try that out and see how it works.. thanks!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    A margin—for example, a left margin of 20px—will push an element 20px to the right. If you put a minus sign in front—that is, -20px— then it pulls the element the other way, 20px to the left, outside of its container. You can do this in both directions, allowing the element to be wider than its container. Weird, but interesting too!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,383
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    That's not quite the whole story

    The negative margin is the technique which allows the element to disappear at the viewport edge. It is not the trick to hiding the scrollbar.

    The scrollbar is hidden by having a 100% wide wrapper that has a min-width and then uses overflow:hidden.

    probably easiest to see with an example.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0
    }
    #wrap {
        width:100%;
        min-width:960px;
        overflow:hidden;
    }
    #outer {
        width:960px;
        margin:auto;
        background:#ccc;
        padding:20px 0;
    }
    #inner{
        width:960px;
        margin:auto;
        border:30px solid #000;
        background:red;
        margin:0 -30px;
    }
    h1 {
        margin:0;
        padding:0;
        text-align:center;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
        <div id="outer">
        <div id="inner">
            <h1>Test</h1>
            </div>
        </div>
    </div>
    </body>
    </html>

    You don't actually need the negative margins as the page will not show the scrollbar until 960px is reached. However without the negative margin the black border in my example would sit at the viewports edge and not go beyond it.

    As it is now it allows the page to shrink and eventually the borders go beyond the viewport but leaves all content visible without a scrollbar.


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
  •