2

私は SiteFinity CMS を使用しています。私の特定のレイアウトは、幅が 100% の 3 列です (横の列は幅が固定され、中央は流動的です)。中央の列では、CSS を使用して複数の「ボックス」に分割したいと考えています。私の最初の試みは960 Grid Systemでした。使用したマークアップは次のとおりです。

<div class="container_12">
    <div class="grid_12">
        <div class="grid_5 alpha tl">
            <p class="tlc">
                <asp:ContentPlaceHolder ID="TopLeftBox" runat="server" />
            </p>
        </div>
        <div class="grid_2">
            &nbsp;
        </div>
        <div class="grid_5 omega tr">
            <p class="trc">
                <asp:ContentPlaceHolder ID="TopRightBox" runat="server" />
            </p>
        </div>
        <div class="clear">
        </div>
        <div class="grid_5 alpha bl">
            <p class="blc">
                <asp:ContentPlaceHolder ID="BottomLeftBox" runat="server" />
            </p>
        </div>
        <div class="grid_2">
            &nbsp;
        </div>
        <div class="grid_5 omega br">
            <p class="brc">
                <asp:ContentPlaceHolder ID="BottomRightBox" runat="server" />
            </p>
        </div>
    </div>
</div>

結果のスクリーンショットを次に示します。

代替テキスト

ただし、追加のクラス タグ ( 、 など) を使用tlしtrてパディングを追加すると、次のようになります。

代替テキスト

パディングを追加するために使用したCSSは次のとおりです。

.tl
{
    background-color:#EEEEEE;
    padding:5px;
}
.tr
{
    background-color:#DDDDDD;
    padding:5px;
}

SiteFinity と 960gs の両方に独自のスタイル シートがあるため、これは CSS の競合が原因であると考えられます。

なぜこれが起こっているのか、そしておそらくこれら2つをうまく連携させる方法について、誰かが私に追加の洞察を提供できますか?

ありがとう！

編集：

そこで、次の CSS を追加しました。

.tl
{
    background-color:#EEEEEE;
    margin:-5px;
    padding:5px;
    margin-bottom:25px;
    margin-top:15px;
}
.tr
{
    background-color:#DDDDDD;
    margin:-5px;
    padding:5px;
    margin-bottom:25px;
    margin-top:15px;
}
/* I am almost ashamed of how ugly this CSS is */

代替テキスト

私には、これはダクトテープの修正のように思えます。これに関するフィードバックはありますか？

4

1 に答える 1

2

後のレイアウトは CSS の「聖杯」と呼ばれます。 別のリストには素晴らしい記事があります。http://www.alistapart.com/articles/holygrail

これもいいですね。http://matthewjamestaylor.com/blog/perfect-3-column.htm

sitefinity の css が問題を引き起こしていると思われる場合は、yui- grids から「reset.css」を取得して、カスタム css の直前に追加してください。すべての css 要素を標準のデフォルト値にリセットします。(IE、Firefox、Safari などはすべて同じデフォルトで始まります。) 960 グリッド システムの代わりに yui-grids ピースを使用できます。yui-grids の例を見たい場合は、大声を出してください。

于 2009-08-27T14:26:38.427 に答える