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

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

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%". Но я не знаю, как это исправить.

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

источник

2009-05-05 Vinzcent

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

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

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

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

* html #content { height: 100%; }

источник

2009-05-05 11:40:31 roborourke

, как вы используете тень вертикального градиента этот метод не будет работать в IE6 (из-за его плохой PNG прозрачность), поэтому вам придется выбирать между тенью и градиентом для ie6. – wheresrhys

Я пошел по пути прогрессивного улучшения с помощью IE6 лично, но всегда есть http://www.dillerdesign.com/experiment/DD_belatedPNG/ - сортирует фоны png, включая повторение и позицию в IE6, используя VML – roborourke

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

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

источник

2009-05-05 10:29:21

идентификатор сказать, что ваш HTML неправильно. Его плохая практика, чтобы иметь закрывающиеся ДИВ-х

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

это немного Судо, как он разорвал с другого сайта шахты, но ти должны дать вам основные, как это должно быть сделано

<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; 
}

источник

2009-05-05 16:26:45 nickmorss

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

ответ

Смежные вопросы