カスタムテンプレートの幅を持つ100％幅ページのYUIグリッドCSS

Question

私はYahooのUIグリッドを使用して、ほとんどのページを構成しています。私のページの1つはGoogleマップです。マップの凡例情報を入れるには400ピクセル固定の左欄が必要です。ただし、YUIグリッドは100％ページレイアウト（160px、180px、300px）の3つの列しか提供しません。

私が必要とする400pxの列を得るために300pxの列を提供する「テンプレート3」をカスタマイズできる方法はありますか？

Answer 1

私はこれを行う方法を決定しました。私を正しい方向に向けるためのYUIフォーラムのネイトのための功労者。

固定された左の列を設定するには、IE以外のすべてのブラウザのemを決定するために、列のピクセル幅を13で割る必要があります。 IEの場合は、列の幅を13.3333で割ります。

非IEを掲載し36.9231em与え、480/13.33はテンプレート3を使用してIE

ため、正確に36emで13分の480固定480PX幅を、望む、CSSは次のとおりです。

.yui-t3 .yui-b { 
    float: left; 
    width: 12.3207em; *width: 12.0106em; 
} 

.yui-t3 #yui-main .yui-b { 
    margin-left: 36.9231em; *margin-left: 36em; 
} 

また、あなたがしたい場合マージンを調整する - 私はそれを見た時の衝撃のビットグリッドが現在YUI 3で廃止され

#doc3 { 
    margin: auto 0; 
} 

：ゼロマージン、あなたのような何かを行うことができます。 7月にAカテゴリを削除するブラウザがいくつかあります。その結果、当初の設計上の決定のいくつかは古いブラウザに基づいていたため、グリッドは修正されます。

Answer 2

確かに方法があります。私は、別の400pxの列を追加するか、既存の列を変更してニーズに合わせるためにCSSを調整するだけの問題だと思います。別の列を追加する場合は、追加の幅（プラスマージン）を考慮し、他の要素の幅を減らすか、または含まれている要素の幅を増やしてください。

レイアウトがブラウザの100％幅を使用している場合、幅は問題ではありませんが、コンテンツがすべての列を保持するコンテナ要素にラップされている場合は、既存の要素を調整してくださいあなたの新しい列のサイズ。

編集：100％幅のレイアウトを扱っている場合は、固定ピクセルサイズではなく、パーセンテージを使用して列のサイズを変更してください。列の要素がユーザーの画面になるので、パーセントを使用すると、列のサイズは解像度/ウィンドウのサイズに合わせて調整する必要があります。

新しい列を他の列の左側に表示する場合は、通常はマークアップの他の列の前に配置し、「float：left」プロパティを適用します。しかし、他の列がYUI CSSでどのように設定されているかを見て、その方法に従ってください。

私は役立つことを願っています。

どんぐり