Div 컨테이너의 왼쪽면에 대한 구조 및 CSS 오버플로 : 숨김

저는 CSS와 HTML에 능숙하지만이 방법이 제대로 작동하는지에 대해 머리를 감쌀 수 있습니다.Div 컨테이너의 왼쪽면에 대한 구조 및 CSS 오버플로 : 숨김

나는 컨테이너 990px의 폭을 갖고 싶어하지만 난 그 위치에있어 왼쪽과 오른쪽

필자에 추가 그림자로 인해 약 1237px 폭하지만 난 오버 플로우가 990px 폭까지 숨겨하려면 ...

이걸 만들 수있는 방법은 무엇입니까 ?? 여기에 현재 코드가 있습니다.

CSS :

body, html {margin:0; padding:0;} 
body {background:url(../images/bg-x.jpg) top center repeat-x; background-color:#000;} 
#main-wraper { } 
#main-container {margin:0 auto; width:990px; background:url(../images/container-bg.jpg) no-repeat; height:660px;} 
#main-left {background:url(../images/bg-left.jpg) left center no-repeat;} 
#main-right {background:url(../images/bg-right.jpg) right center no-repeat;} 
#shadows {width:1237px; margin:0 auto; overflow-x: hidden}

HTML : 여기

<body> 
    <div id="shadows"> 
    <div id="main-left"> 
     <div id="main-right"> 
     <div id="main-wraper"> 
      <div id="main-wraper-liner"> 
      <div id="main-container"> 
       <div id="main-container-liner"> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</body>

링크를 사전에

http://hithouse.businesscatalyst.com/index.html

덕분이다.

출처

2012-11-14 raffi keklikian

내가 제대로하면 화면이 990px보다 작을 때 그림자가 표시되는 것을 원하지 않습니다. 내가 뭘 할 것은 이것이다 : 그것은

는 1 x 1 픽셀의 높이 (왼쪽 및 오른쪽) 990px + 그림자

사용이 훨씬 간단 폭으로 투명 PNG를 만드는 것입니다으로

이

이 몸을 떠나 마크 업
당신은 갈 준비가

HTML

<div class="content"> 
    <div class="shadow"></div> 
    <h1>Normal content goes here</h1> 
</div>

CSS

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

div.content { 
    position: relative; 
    width: 400px; 
    height: 100%; 
    margin: 0 auto; 
    border: 1px solid red; 
} 

div.shadow { 
    position: absolute; 
    top: 0; 
    left: -28px; 
    width: 456px; 
    height: 100%; 
    background: transparent url(https://dl.dropbox.com/u/1336931/_Stackoverflow/example_shadow.png) repeat-y 0 0; 
}

DEMO

Try before buy

출처

2012-11-14 22:11:25 insertusernamehere

Div 컨테이너의 왼쪽면에 대한 구조 및 CSS 오버플로 : 숨김

답변

관련 문제