2012-04-23 36 views
0

私は3つの縦のDIVを並べて2つの列を配置しようとしています。左側の列はメインのテキスト領域で、右側の列はその他の情報用です。 各列の上部と下部のDIVは角が丸いイメージに過ぎません。中央のDIVはテキストのためのものです。さらに、理想的には、各列の中央のDIVがテキストの内容に比例して自動的に垂直方向に拡張されるようにします。続きそれぞれ3つのDIVの2つの列

は私のCSSです:

.main_bkgd_tp_img { 
    background: url(../images/text.main.tp.gif); 
    float:left; 
    width: 400px; 
    height: 20px; 
} 
.main_bkgd_btm_img { 
    background: url(../images/text.main.btm.gif); 
    float:left; 
    width: 400px; 
    height: 20px; 
} 
.mainbody { 
    background: url(../images/text.main.fill.gif); 
    position:relative; 
    float:left; 
    width: 400px; 
    height: 300px; 
} 
.mainbody .text { 
    position:absolute; 
    top:10px; 
    left:20px; 
    width:95%; 
} 
.mainbody p { 
    position:relative; 
    font:normal 12px verdana, arial, helvetica, sans-serif; 
    color:#000; 
    line-height:15px; 
} 
.mainbody h1, h2 { 
    position:relative; 
    color:#000; 
    line-height:15px; 
    } 
.rtcol_bkgd_tp_img { 
    background: url(../images/rtcol.main.tp.gif); 
    float:right; 
    width: 100px; 
    height: 20px; 
    } 
    .rtcol_bkgd_btm_img { 
    background: url(../images/rtcol.main.btm.gif); 
    float:right; 
    width: 100px; 
    height: 20px; 
} 
.rtcolbody { 
    background: url(../images/rtcol.main.fill.gif); 
    position:relative; 
    float:right; 
    width: 100px; 
    height: 300px; 
} 
.rtcolbody .text { 
    position:absolute; 
    top:10px; 
    right:20px; 
    width:95%; 
} 
.rtcolbody p { 
    position:relative; 
    font:normal 12px verdana, arial, helvetica, sans-serif; 
    color:#000; 
    line-height:15px; 
} 
.rtcolbody h1, h2 { 
    position:relative; 
    color:#000; 
    line-height:15px; 
} 

そして、次は私のHTMLです:

<div class="main_bkgd_tp_img"></div> 
<div class="mainbody"> 
     <div class="text"> 
      <h4> This is made up text just for testing purposes. The real text will be added later.</h4> 
      <h4> This is more made up text just for testing purposes. The real text will be added later. </h4> 
     </div> 
    </div> 
    <div class="main_bkgd_btm_img"></div> 
    <div class="rtcol_bkgd_tp_img"></div> 
    <div class="rtcolbody"> 
     <div class="text"> 
      <h4> This is a test. </h4> <br/> 
      <h4>This text is just for testing purposes. The real text will be added later. </h4> 
     </div> 
</div> 
<div class="rtcol_bkgd_btm_img"></div> 

プロセスにおける実際のページがhereを見ることができます。

ありがとうございました!


私はこれを考え出したと信じています。 "rtcol _...." CSSエントリのそれぞれについて、 "float:right"を "margin-left:420px"に変更しました。

中間のDIVを自動的に。!テキストコンテンツ

おかげ

+1

ようこそStackOverflow!将来の参照のために、4つのスペースでコードをインデントするとPretty-Printになります。 – Dennis

+0

あなたはどんなブラウザをサポートしようとしていますか? CSSだけで丸みのあるコーナーを作成できます。 –

答えて

0

私はとにかく、独自のdiv内の各列を包むが、少し異なる方法でページレイアウトを構築するだろうあなたはこのようにCSSに変更します。

.rtcolbody
  • .mainbodyセットheight: auto;または単に.rtcolbody .text.mainbody .textにその行
  • を削除し、私は以下の言及していて、あなたのCSSでのいくつかの変更をしなければならないので、私は、あなたのスタイルのコードで行く場合position: absoulute;
+0

気にしないでください。提案されたコーディング方法では、画像は標準のfloatオブジェクトを使用して完全に浮動します。再度、感謝します! – Mike

0

を削除します -

削除ポジションからのクラスです。 テキストとクラスにメインボディ ....

.mainbody { 
    background: url("../images/text.main.fill.gif") repeat scroll 0 0 transparent; 
    float: left; 
    min-height: 300px; 
    opacity: 0.8; 
    position: relative; 
    width: 450px; 
}   

.mainbody .text { 
     padding: 20px 12px; 

    } 

そしてそこに1あなたの質問の他のCSS3方法を最小の高さを与え、あなたはデモを参照してください曲線とあなたのボックスに背景透明を与えることができます:http://jsfiddle.net/8LFLd/31/

この方法では、背景の不透明度を増減することができます。これは、ボックス内のテキストの色には影響しません。シンプルに表示するには、基本的に背景アルファfのrgbカラーまたは不透明度& の上、中、下の画像と余分なdivは不要など

+0

これは素晴らしいです!まさに私が探していたものなので、きれいでシンプルです。ありがとう!注:私が奇妙に感じたことの1つは、不透明度が.8を除くすべての度合いで機能することでした。それを使用すると背景が黒くなります。下と上のすべてがうまく動作します。 – Mike

+0

最終的な問題の1つは、不透明度属性を使わずにウィンドウ内で画像を浮動させることです。私は、Z - インデックスオブジェクトを使用して別のDIVでそれをオーバーレイしようとしましたが、それは動作しますが、浮動小数点は画像の上にあるすべてのものに適用されます。どうすれば修正できますか? 多くのありがとう! – Mike

+0

@Mikeあなたの問題のライブコードの例を教えてください.....問題を理解する方がはるかに良いでしょう –

関連する問題