私は正確に(多かれ少なかれ)900pxである中央のDIVを持っています。常に中央に配置し、2 つのフィラー div でページの残りの部分を埋めるようにしたい...
(z-indexを使用して)下のコンテンツに強調表示されたタイプの効果を与えます...(これはフィラーdivの使用です...「SPOTLIGHT」コンテンツの両側に他のコンテンツがあることを示しますが、「SPOTLIGHT」の下にはありません"。
以下のコードは機能しません...しかし、私がやろうとしていることの感覚を与えてくれます
CSS:
/* DIV I WANT TO BE CENTERED, SURROUNDED BY 50% OPACITY DIVS FILLING REST OF PAGE */
.shadercentered {
width:950px;
margin-left:auto;
margin-right:auto;
position:relative;
background-color:green;
height:73px;
float:left;
top:-28px
}
/* DIVS THAT FILL THE REST OF THE PAGE ON EACH SIDE OF 900px CENTERED DIV */
.shaderblindsleft {
background-color:black;
opacity:0.5;
width:fill;;
height:73px;
float:left;
position:relative;
top:-28px;
}
.shaderblindsright {
background-color:black;
opacity:0.5;
width:fill;;
height:73px;
float:right;
position:relative;
top:-44px;
}
HTML:
<div class="shaderdiv">
<div class="shaderblindsleft"> </div>
<div class="shadercenter"> </div>
<div class="shaderblindsleft"> </div>
</div>