이미지 그림자

Question

나는 다음과 같은 HTML 소스가 있습니다

<div id="page"> 
     <div id="header"> 
      <!-- end header div --> 
     </div> 
     <div id="dropdown"> 
     <!--navigator menu is here!--> 
     </div> 

    <div id="main"> 
<!--main is here!--> 
    </div> 
     <div id="sidebar"> 
      <!--sidebar menu is here!--></div> 
     <div id="footer"> 

     </div> 
     <!-- end page div --> 
    </div> 
    <div id="leftshadow"></div> 
    <div id="rightshadow"></div> 
</body> 

을 그리고 이것은 내가이 결과

그러나에있어 일반적으로

/* html selectors ---- */ 

html, body { 
    font-family: 'Arial Unicode MS'; 
    margin: 0; 
    padding: 0; 
    background-repeat: repeat-x; 
    background-color: white; 
    direction: rtl; 
    font-size: 10.3pt; 
} 



/*page -----------*/ 
#page { 
    width: 900px; 
    padding: 0px; 
    margin: 0 auto; 
    direction: rtl; 
    position: relative; 
    z-index: 100; 
    z-index: 5; 
    background-image: url("images/bgimage.png"); 
} 

#leftshadow { 
    width: 100px; 
    height: 900px; 
    background-image: url("images/leftshadow.png"); 
    position: absolute; 
    right: 1220px; 
    z-index: none; 
    top: -50px; 
} 

#rightshadow { 
    width: 100px; 
    height: 900px; 
    background-image: url("images/rightshadow.png"); 
    position: absolute; 
    right: 345px; 
    z-index: none; 
    top: -25px; 
} 


/* header ---------- */ 

#header { 
    height: 110px; 
    top: 0px; 
    line-height: 30px; 
    background-image: url("images/header.png"); 
    background-position-x: center; 
    background-repeat: repeat-x; 
} 


/* main -------------- */ 



#main { 
    line-height: 21px; 
    font-family: arial; 
    width: 625px; 
    padding: 30px; 
    position: relative; 
    right: 205px; 
    padding-bottom: 80px; 
    direction: rtl; 
    top: 42px; 
    padding-right: 60px; 
    min-height: 750px; 

     text-align: justify; 

} 

는 CSS 소스입니다 Internet Explorer이 결과가

삽입 할 것인지 알 수 있습니다.

<div id="leftshadow"></div> 
     <div id="rightshadow"></div> 

****** 여기에 실례가 있습니다! http://lawb.co.il/ ****** #page 사업부 속으로

문제는 해결 될 수 있지만, 유일한 문제는 콘텐츠에 complatly보다 그림자, 놀이가

당신이 행복이 나를 도와 드릴까요 그에게 behund하지 않는 것이있다 이걸로?

감사합니다.

Answer 1

왜 CSS3를 사용할 수있을 때 이미지를 사용하여 그림자를 만드는 이유는 무엇입니까? box-shadow?

당신은 내가 지금처럼 HTML 구조를 바꿀 것이 방법을 사용하려는 경우 :

<div id="page"> 
    <div id="leftshadow"></div> 
    <div id="header"> 
     <!-- end header div --> 
    </div> 
    <div id="dropdown"> 
     <!--navigator menu is here!--> 
    </div> 

    <div id="main"> 
     <!--main is here!--> 
    </div> 
    <div id="sidebar"> 
     <!--sidebar menu is here!--> 
    </div> 
    <div id="footer"> 
     <!-- footer --> 
    </div> 
    <!-- end page div --> 
    <div id="rightshadow"></div> 
</div> 

을 그리고 오른쪽 왼쪽으로 왼쪽 그림자 사업부에 대한 권리 그림자 DIV 플로트. 재설정을 사용하고 있지 않아서 물건이 상대적으로 배치되어 있기 때문에 대부분 불일치가 발생합니다. #page 컨테이너 내부가 절대 위치 지정을 필요로하지 않으면 모든 것을 상대적으로 배치하고 그림자를 배치 할 필요가 없습니다.