CSS / HTML Shadow проблема - PullRequest
Новая
       6

CSS / HTML Shadow проблема

0 голосов
/ 05 мая 2009

У меня проблема с моим сайтом. Я хочу, чтобы тень остановилась в конце моего текстового поля.

ShadowProblem http://i39.tinypic.com/k37o6h.jpg

HTML 

<body>
<div id="shadow" class="floatfix">

<div id="shadowleft"></div>
<div id="shadowtop"><img src="img/shadowcornerleft.png" alt="hoek" id="shadowcornerleft" /><img src="img/shadowcornerright.png" alt="hoek" id="shadowcornerright" /></div>
<div id="shadowright"></div>
<div id="content">

Это мой код CSS: 

#shadow
{
margin-left: auto;
margin-right: auto;
margin-top: 75px;
width: 974px;
}

#shadowleft
{
position: absolute;
height: 100%;
width: 27px;
margin-top: 42px;
background-image: url("img/shadowleft.png");
background-position: top left;
background-repeat: repeat-y;
}

#shadowright
{
position: absolute;
height: 100%;
width: 27px;
margin-top: 12px;
margin-left: 947px;
background-image: url("img/shadowright.png");
background-position: top right;
background-repeat: repeat-y;
}

#shadowtop
{
width: 892px;
height: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 45px;
background-image: url("img/shadowtop.png");
background-position: 0 0;
background-repeat: repeat-x;
}

#shadowcornerleft
{
position: relative;
left: -42px;
top: 0;
}

#shadowcornerright
{
position: relative;
left: 850px;
top: 0;
}

#content
{
width: 920px;
margin-left: auto;
margin-right: auto;
background-color: white;
border-bottom: 1px solid #cccccc;
}

Я думаю, что у меня эта проблема из-за "высоты: 100%" Но я не знаю, как это исправить.

Заранее спасибо Винсент

Ответы [ 3 ]

2 голосов
/ 05 мая 2009

Есть гораздо более простой способ сделать это. Создайте новое фоновое изображение шириной 960 пикселей и высотой 10 пикселей, которое будет иметь тень по обе стороны от него. (Вам может понадобиться настроить ширину, чтобы получить 920 пикселей белого цвета в середине с тенями по бокам)

Используйте ваш #shadow div, чтобы добавить фон вокруг #content, например: 

#shadow
{
width: 960px;
margin-left: auto;
margin-right: auto;
background: url(shadow-sides.png) repeat-y left top;
}

В качестве альтернативы вы можете, вероятно, сделать ваш #content div растянутым, добавив к нему min-height: 100%; и взломать IE6: 

* html #content { height: 100%; }
0 голосов
/ 05 мая 2009

ID говорит, что ваш HTML неверен. Это плохая практика иметь самозакрывающийся div

оберните их вокруг своего содержимого и используйте отрицательные поля и фоновые позиции, чтобы получить правильный эффект, который охватывает высоту содержимого жидкости

это немного sudo, так как он скопирован с другого моего сайта, но я должен дать вам основную информацию о том, как это сделать 

<div id="header">
<div class="wrapper">
<div class="inner">
...
</div>
</div>
</div>


    #header {
height:100%;
background:transparent url(../img/left-gradient.png) repeat-y scroll left center;
margin:0 auto;
max-width:60em;
min-width:40em;
padding-left:7px;
text-align:left;
width:60em;
}

#header .wrapper {
background:transparent url(../img/right-gradient.png) repeat-y scroll right center;
padding-right:7px;
}

#header .inner {
background-color:#FFFFFF;
}
0 голосов
/ 05 мая 2009

100% высоты тени не имеет высоты для отсчета 100%, поэтому она использует автоматический режим. Итак, пока я вижу 3 способа решения проблемы, и ни один из них не хорош, как должно быть:

  • Установка фиксированной высоты для родительского div ( плохо, если содержимое расширяется )
  • Использовать таблицу 3х3 (, но еще раз люди говорят, что не использовать таблицы для макета )
  • Используйте двустороннее теневое фоновое изображение для заполнения содержимого div. 1px высота 974px ширина bg изображение с repeat-y; ( не очень элегантно, если ширина сайта меняется )
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...