CSS - グラデーションドロップシャドウを設定するにはどうしたらいいですか？

2つの異なる画像を使用するグラデーションドロップシャドウがあります。それぞれの側に1つ。 OutsideContainerのサイズをCenterのサイズに設定するにはどうすればよいですか？したがって、センターのコンテンツが展開されるときにOutsideContainerが展開されます。CSS - グラデーションドロップシャドウを設定するにはどうしたらいいですか？

この方法で、私のグラデーションはコンテンツ領域全体に表示されます。あなたがやろうとしている何をしての

.Left 
{ 
    background-image:url(themes/Light/images/BorderLeft.gif); 
    background-repeat:repeat-y; 

    float:left; 
    background-color:#FF0000;/*Colors work in place of having the picture*/ 
    height:100%; 
    width:8px; 
} 
.Center 
{  
    float:left;  
    background-color:#FFFFFF; 
    width:745px; 
} 
.Right 
{ 
    background-image:url(themes/Light/images/BorderRight.gif); 
    background-repeat:repeat-y; 
    float:left; 
    background-color:#00FF00;/*Colors work in place of having the picture*/ 
    height:100%; 
    width:8px; 
} 
.OutsideContainer 
{ 
    margin:0 auto; 
    width:761px; 
    height:200px; 
} 

<body> 
<div class="OutsideContainer"> 
    <div class="Left"></div> 
    <div class="Center">blah blah <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />blah<br /></div> 
    <div class="Right"></div> 
</div> 
</body>

出典

2011-08-11 P.Brian.Mackey

良い方法はleftの幅の外箱に詰め物を与え、right左と右のdivを削除し、に設定し、両側の背景画像を使用することですあなたの設定された外側のdivの幅は、実際のdivが行く透明な背景となります。このような何か：

enter image description here

そしてCSSがそうのようになります。

.Center 
{  
    float:left;  
    background-color:#FFFFFF; 
    width:771px; 
} 
.OutsideContainer 
{ 
    padding: 0px 8px 0px 8px; 
    background: url('picture.png') repeat-y; 
    margin:0 auto; 
    width:761px; 
    overflow: hidden; 
}

HTML：

<body> 
<div class="OutsideContainer"> 
    <div class="Center">blah blah <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />blah<br /></div> 
</div> 
</body>

これは、CSSでこれを行うための唯一の方法かもしれません。

出典

2011-08-11 20:50:54 Nayish

幅を取り除くと、OutsideContainerによって作成されたセンタリングが失われます（divは無視されると思います）。高さの代わりにmin-heightを指定すると、私は 'Left'と' Right'を失います。私は 'オーバーフロー 'を追加しました。私はまだ結果を達成することができません。固定幅、動的高さが必要です。 –

申し訳ありませんが、あなたは幅をダイナミックにしたいと思っていましたが、私は答えを編集しましたが、問題は左と右のdivの高さを設定された高さに設定しない限り、さもなければdivはそのdivに与えられた高さに依存しています。div内にあるdivに一致するように設定されているため、フルブラウザサイズのdivになります。 – Nayish

私はすでに、親OutsideContainerから計算された固定高さを持っています。私は高さを「左」に移動し、「右」は何かを解決する方法はわかりません。これは単にできないと言っているのですか？ –

CSS - グラデーションドロップシャドウを設定するにはどうしたらいいですか？

答えて

関連する問題