Making a div that sits outside the content area but doesn't cause the horizontal scroll bar to appear when browser window is shrunk
Let's say you have a website where the body's background color is red and a content area with a white background that is 1,000 pixels wide. Now let's say you want a drop shadow on the content area that is darkest at the juncture of the content area and the red background, and gets less opaque as it goes off the the left on the left side and the right on the right side. It basically looks like this:
So my strategy is to make the background color of the body red and grab only the shadow in photoshop with a width of ~47px and a height of 1px. My question is:
How do I go about inserting that onto my website such that the browser's horizontal scroll bar only shows up when it's reached 1,000 pixels and not when it's reached 1,000 + 47 + 47 (the width of the content area plus the width of the two shadows).
I'm sure this is a common question, but I really suck at phrasing these things.
Thanks!
Edit: sorry for the lack of code. That's not usually my style. So here开发者_如何学Python we go:
HTML:
<div id="mainwrapper">
<div id="left_shadow"></div>
<div id="right_shadow"></div>
</div>
CSS:
#mainwrapper {
width:1000px;
height:100%;
margin-left:auto;
margin-right:auto;
background-color:#e8e8e8;
position:relative;
}
#left_shadow {
position:absolute;
top:0;
bottom:0;
left:-47px;
width:47px;
background:url(/images/leftshadow.png) repeat-y;
}
#right_shadow {
position:absolute;
top:0;
bottom:0;
right:-47px;
width:47px;
background:url(/images/rightshadow.png) repeat-y;
}
With this setup, if I shrink the browser window down to 1,095 pixels, it doesn't have a horizontal scroll bar. If I shrink it to 1,094px, it has a horizontal scroll bar because it's recognize those absolutely positioned shadows as part of the content area. My question is: how do I make it so that the scroll bar only shows up when it hits the gray center (at 1,000px)? Thanks again, guys.
<html>
<body style="background:url(bg.jpg) red repeat-y center top">
<div align="center" width="100%" background="bg.jpg">
<div style="width:870px;align:center;background:silver" align="center">test</div>
</div>
<body>
</html>
The image below is small so you need to look closely :)
Can the content area be 904px wide (1000-47-47) ? :P Afraid I'm going to need some code to help describe what you're talking about...
See this answer to my accidental duplicate: Technique for using a wide background div without affecting body width. Similar to @Leigh's, but possibly cleaner.
加载中,请稍侯......
精彩评论