07 июн 2011
Обводка тела страницы
wiillow Категория: Web-Мастеру » Разное
У нас вы можете скачать бесплатно Обводка тела страницы .

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Обводка тела страницы

Метод №1. 4 элемента div.
Данный метод имеет наилучшую совместимость с браузерами. Для его реализации мы используем 4 элемента div.

<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>

Затем устанавливаем правила CSS. Некоторые свойства общие для всех элементов, некоторые - для пар верх/низ, право/лево, и есть уникальные для каждого элемента свойства. Код не содержит избыточных повторяющихся свойств.
top, #bottom, #left, #right {
        background: #a5ebff;
        position: fixed;
        }
        #left, #right {
                top: 0; bottom: 0;
                width: 15px;
                }
                #left { left: 0; }
                #right { right: 0; }

        #top, #bottom {
                left: 0; right: 0;
                height: 15px;
                }
                #top { top: 0; }
                #bottom { bottom: 0; }

Все должно работать в IE 7 и во всех остальных нормальных браузерах. Поддержка для IE 6, который не поддерживает фиксированного позиционирования, заключается в условном комментарии в разделе head, который отключает обводку. Никаких угрызений совести и сожалений по данному поводу нет.
<!--[if lte IE 6]>
        <style>#top, #bottom, #left, #right { display: none; }</style>
<![endif]-->

Также надо отгородиться от маленьких экранов (например, экранов мобильных устройств), которые не поддерживают фиксированное позиционирование:
@media

/* Маленькие экраны, включая iPhone */
only screen and (max-width: 500px),

/* iPad */
only screen and (min-device-width: 768px) and (max-device-width: 1024px)

{
    #top, #bottom, #left, #right { display: none; }
}

Метод № 2. Псевдо элементы.
В вышеприведенном примере, нам нужно 4 уникальных элемента, чтобы добиться нужного эффекта. Но это четыре дополнительных элемента, которые встраиваются в семантику документа. В идеале таких элементов должно быть 0. Ну что ж, у нас есть два элемента, которые уже имеют размер равный размеру окна браузера - это и . Используем псевдо элементы :before и :after для них и получим нужные четыре!

Можно использовать те же свойства и значения, как и в методе №1, только с небольшими изменениями:
html:before, html:after, body:before, body:after {
    content: "";
    position: fixed;
    background: #a5ebff;

    /* и так далее... */
}

Хотя поддержка псевдо-элементов достаточно хороша, данный метод несколько хуже метода №1. Большой проблемой является ошибка браузеров WebKit, которая приводит к растеканию фона псевдо-элемента по всему экрану. Такие проблемы делают использование псевдо элементов преждевременным.

Но есть решение. И при этом удовлетворяющее требованиям семантичности!

В действительности нам не нужно четыре уникальных элемента, нужно только два. Верх и низ должны быть уникальны, поэтому они могут иметь фиксированное положение и не прокручиваться. А для правой и левой стороны обводки можно использовать border для элемента .
body:before, body:after {
    content: "";
    position: fixed;
    background: #900;
    left: 0;
    right: 0;
    height: 10px;
}
body:before {
    top: 0;
}
body:after {
    bottom: 0;
}
body {
    border-left: 10px solid #900;
    border-right: 10px solid #900;
}

Тот же эффект. Правда, с более слабой поддержкой, но зато весьма семантический.


Некоторые проблемы: Opera (Mac, 11.10) неправильно выполняет команды, расширяя размер элемента, чтобы он соответствовал тени снаружи (даже если тень установлена как внутренняя). В результате появляется ненужная полоска прокрутки, так как используется элемент body на всю ширину. Горизонтальная полоска прокрутки скрывается с помощью свойства overflow-x. Но, к сожалению, снизу остается небольшое пространство.

Решение работает в браузерах: IE 9+, Firefox 3.5+, Opera 10.5+, Chrome, Safari 3+










Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Itachi Uchiha | 7 июня 2011 18:04 | (0|0)
  • Группа: Посетители |
  • Комментарий: 1 (ссылка)

а может будет копирайты оставлять ?

Nik | 7 июня 2011 18:57 | (2|0)
  • Группа: Проверенные |
  • Комментарий: 2 (ссылка)

Itachi Uchiha,
для тебя лично

Переводчик: Сергей Фастунов
Источник урока: хттр://css-tricks*com/body-border/

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.