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問題

回答

相關問題