VPF::Верстка div, странный эффект - Форум программистов

lerguide

Дата 27.6.2010, 00:02 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 16
Регистрация: 28.10.2008

Репутация: нет
Всего: нет

Нужна помощь. Я не разбираюсь в верстке, но понадобилось кое-что сделать. И вот один прием у меня не работает. Почему - я уже голову сломал.
Дано четыре слоя: подложка, серый, темно-серый, светлый и самый внутренний (inner - черный пунктир). От подложки все наследуют высоту. Кроме иннера - у него высота 30 и верхнее поле 15. Так вот из-за этого поля, слой, в котором содержится иннер (светлый) смещается на 15 пикселей вниз! Еще больше удивительно, что этого не происходит, если у него (у светлого) есть граница.
Вопрос: почему это происходит? Как устранить эту проблему?

Код


<html>
<style type="text/css" madia="all">
.layer0{
    border: 1px solid #000;
    margin-top: 20px;
    height: 100px;
}

.layerL{
    border: 1px solid #000;
    height: inherit;
    padding-left: 20px;
    background: #999;
}

.layerR{
    border: 1px solid #000;
    height: inherit;
    padding-right: 20px;
    background: #777;
}

.layerC{
    /*border: 1px solid #000;*/
    height: inherit;
    background: url(1.png);
}

.layerInner{
    border: dashed 1px #000;
    margin: 15px 0 0 0;
    height: 30px;
}
</style>
<body>

<div class="layer0">
    <div class="layerL">
        <div class="layerR">
            <div class="layerC">
                <div class="layerInner">
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

Пояснение для чего это надо.
Первый слой - плашка для контента. Вторым, третьим и четвертым создаем бекграунд для правого угла, левого угла и для центральной области соответсвенно. В пятом - иннере - непосредственно сам контент. Положение этого слоя мы корректируем при помощи поля в 15 пикселей от верха. При этом все слои накладываются и перекрывают друг друга полностью (ну, за исключением иннера). Наверняка можно сделать по другому, но я так замучился, что это уже дело принципа.

lerguide

Дата 27.6.2010, 00:23 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 16
Регистрация: 28.10.2008

Репутация: нет
Всего: нет

Да, проблема решается паддингом вместо маргина. Но почему с маргином проблема?

blah

Дата 27.6.2010, 13:39 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Если это ни о чем не скажет, просто замените бордер на overflow:hidden

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »