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 DIV伸展向下加入min-height: 100%;它和IE6黑客：

* html #content { height: 100%; }

来源

2009-05-05 11:40:31 roborourke

基本由于其PNG差透明度支持），所以你必须在ie6的阴影和渐变之间做出决定。 – wheresrhys 2009-05-05 13:04:11

100％的阴影高度没有高度从因此它使用自动模式计数100％。所以到目前为止，我看到3种方式来解决问题，他们都不是很好的，因为它应该是：

在父格设置固定的高度（不好，如果含量延长）
使用3x3的表格（但再次有人说不使用表格进行布局）
使用双面阴影背景图像来填充内容div。 1px高度974px宽度bg图像与repeat-y; （不是很优雅，如果网站宽度变化）

来源

2009-05-05 10:29:21

ID说你的HTML是错误的。它不好的做法，有自行闭合的div的

他们包裹在你的内容，并使用负利润率的和背景的位置，以获得跨越流动性内容

这有点须藤的高度的右侧影响，因为它撕开从我的另一个网站，但TI应该给你的应该如何为你使用了一层阴影垂直梯度这种技术不会在IE6（工作要做

<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问题

回答

相关问题