Вопрос по CSS верстке и CMS - PullRequest
Новая
       15

Вопрос по CSS верстке и CMS

2 голосов
/ 27 августа 2009

Я работаю с SiteFinity CMS. Мой конкретный макет состоит из 3 столбцов с шириной 100% (боковые столбцы имеют фиксированную ширину, центр - жидкий). В центральной колонке я хочу разделить его на несколько «ящиков» с помощью 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>

Вот скриншот с результатом:

alt text

Однако, если я использую дополнительные теги класса (tl, tr и т. Д.) И добавляю отступы, вот что происходит:

alt text

Вот CSS, который я использовал для добавления отступов: 

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

Я полагаю, что это из-за противоречивого CSS, поскольку и SiteFinity, и 960gs имеют свои собственные таблицы стилей.

Может ли кто-нибудь дать мне дополнительную информацию о том, почему это происходит, и, возможно, как заставить этих двоих работать вместе?

Спасибо!

EDIT:

Итак, я добавил следующий 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 */

alt text

Мне кажется, это исправление с помощью клейкой ленты. Есть ли какие-либо отзывы по этому поводу?

1 Ответ

2 голосов
/ 27 августа 2009

Ваш макет называется CSS «Святой Грааль». В отдельном списке есть отличная статья. http://www.alistapart.com/articles/holygrail

Это тоже хорошо. http://matthewjamestaylor.com/blog/perfect-3-column.htm

Если вы считаете, что css в sitefinity вызывает проблему, то возьмите reset.css из yui-grids и добавьте его непосредственно перед вашим собственным css. Он сбрасывает каждый элемент CSS обратно к стандартному значению по умолчанию. (IE, Firefox, Safari и т. Д. Все начинаются с одинаковых настроек по умолчанию.) Вы можете использовать элемент сетки yui вместо сетки 960. Возвращайтесь, если хотите увидеть пример с yui-grid.

...