箱陰影犯規在整個包裝

Question

林去使用

.shadow { 
    -moz-box-shadow: 3px 3px 4px #000; 
    -webkit-box-shadow: 3px 3px 4px #000; 
    box-shadow: 3px 3px 4px #000; 
    /* For IE 8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; 
    /* For IE 5.5 - 7 */ 
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); 
} 

要將陰影添加到我的#wrapper指定。出於某種原因，它只能到我的菜單結尾。任何人都可以看到爲什麼在這個例子中http ://www.kerrydean.ca/MATHESON/home5.html

謝謝!!

Answer 1

的問題是，你已經得到的非浮動的內容裏面液浮內容。你需要一個clearfix。

或者，您可以浮動您的#Wrapper元素，但不能將具有邊距的浮動元素居中。這裏有一個例子：

<style type='text/css'> 
    #Wrapper { 
    margin: 0 auto; 
    width: 799px; 
    } 

    #Page { 
    float: left 
    } 
</style> 

[ snip... ] 

<div id='Wrapper'> 
    <div id='Page' class='shadow'> 
    [ The rest of your content goes here. ] 

你的頁腳也會導致問題，因爲你通過相對定位移動它。擺脫它，並給它一個10px的頂部邊距，你應該全部設置。

Answer 2

根據你佈置佈局的方式，你需要調整你的樣式#Wrapper。

這有啥可做到這一點：

#Wrapper { 
    background-color: #FFFFFF; 
    float: left; 
    left: 50%; 
    margin: 0 -400px; 
    padding-bottom: 13px; 
    position: relative; 
    width: 799px; 
}