yuiグリッドを使ってサイドバーを固定した3列のレイアウトを作る

Question

私はこれをあまり成功させようとしていませんでした。

yui-gridsを使用してyui-t1（左側に160pxのサイドバーがあるもの）のテンプレートを作成できますが、同じ幅の右側にサイドバーもありますか？

中央の列は液体でなければなりません...

Answer 1

はthis pageによると、180ピクセル幅の右サイドバーには、デフォルトのクラスYUI-T4を持っています。 CSSに入り、このピクセル値を160に変更することができます。

Answer 2

代わりにliquid layoutを試してみることができますか？

Answer 3

あなたはYUIのグリッドを使用してみましたhttp://developer.yahoo.com/yui/examples/grids/grids-gb_source.html

のレイアウトが、その後第二YUI-Uの上の余分なクラスを追加するには、第三YUI-Uの上.mainまたは.lastのクラスと呼ばれます。

あなたは幅19/59/19

で3つのcolsのを取得するために

.yui-gb .yui-u { 
width: 19%; 
} 

.yui-gb .main { 
    width: 59%; 
} 

の下に上書きスタイルを追加することができたのあなたに任意の使用？

Answer 4

あなたはマシューの答えを選んだが、彼はあなたの質問に答えなかった。彼はあなたの問題を解決したかもしれませんが、将来この質問を読む人は答えを知りたいかもしれません。このようなことは、私には思われますが、回答を与えたり開発したりすることを嫌う人もいます。&は、他の人にこの質問を繰り返すよう強制します。

Answer 5

この例を適用して拡張することができます。

<div id="bd"> 
    <div id="yui-main"> 
     <div class="yui-b yui-b1"> 
      <div class="yui-u-main"> 
       <div class="yui-u"> 
        <p>Main column: fluid width</p> 
       </div> 
      </div> 
      <div class="yui-u"> 
       <p>Left column: 200px fixed</b> 
      </div> 
     </div> 
    </div> 
    <div class="yui-b"> 
     <p>Third column: fixed width, follows template preset.</p> 
    </div> 
</div> 

CSSは簡単です：ここでは200pxの固定/流体コンテンツ/レイアウトプリセット列のHTMLだ私はそれを行うことができ

.yui-b1 .yui-u-main { 
    float: left; 
    width: 100%; 
} 
.yui-b1 .yui-u { 
    float: left; 
    /* Width of left column */ 
    width: 200px; 
    margin-left: -100%; 
} 
.yui-b1 .yui-u-main .yui-u { 
    float: none; 
    width: auto; 
    /* Width of left column + 13px margin (default YUI margin) */ 
    margin-left: 213px; 
}