248 Давайте попробуем украсить ваш сайт с помощью техники body-border. Что делает эта техника? Ответ прост — эта CSS техника добавляет по краям вашего сайта цветовые полоски (бордюры). Все это выглядит симпатично и помогает пользователю лучше ориентироваться на сайте. И так, давайте разберемся, как это работает...
Код
Нужны четыре уникальных элемента. Очень хорошо подойдут DIV:
|
1 2 3 4 |
<div id="left"></div> <div id="right"></div> <div id="top"></div> <div id="bottom"></div> |
На очереди CSS. Вот вам памятка о том, какой должен быть CSS код. Некоторые свойства элементов являются одинаковыми, некоторые совпадают только для top/bottom и left/right, а некоторые являются уникальными. Не будем повторять свойства и значения свойств для элементов.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#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; } |
Совместимость с браузерами
Великолепно работает c
firefox safari opera IE 7+
Работает ли эта техника с IE6 (или ниже)? Конечно, нет!
В основном, из-за позиционирования. IE6 не любит fixed позиционирование, и для наших нужд нет нормальных хаков. Решение в том, чтобы избавится от этих границ для IE:
Прописываем в header HTML:
|
1 2 3 |
[if lte IE 6]> <link href="/ie6.css" type="text/css" rel="stylesheet" media="screen" /> <![endif] |
CSS для удаления body border:
|
1 |
#top, #bottom, #left, #right { display: none; } |
