Box Shadow не распространяется на всю оболочку - PullRequest
Новая
       15

Box Shadow не распространяется на всю оболочку

0 голосов
/ 29 апреля 2011

Я использую 

.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');
}

Чтобы добавить тень к моей # Обертке.По какой-то причине он перемещается только в конец моего меню.Может кто-нибудь понять, почему в этом примере http : //www.kerrydean.ca/MATHESON/home5.html

Спасибо !!

Ответы [ 2 ]

0 голосов
/ 29 апреля 2011

Проблема в том, что у вас есть плавающий контент внутри не плавающего контента. Вам нужен 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, и все будет готово.

0 голосов
/ 29 апреля 2011

в зависимости от того, как вы расположили макет, вам нужно настроить стиль # Wrapper.

это должно сделать это: 

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