Я уже писал о том, как можно сделать по краям видимой части сайта бордеры. С того времени появились некоторые новшества и дополнения.
Итак, что было придумано:
- Используем градиент вместо обычной заливки.
- Теперь бордеры не висят постоянно, а появляются только при наведении на какой-либо(определённый нами) элемент.
Шаг 1: HTML
Вставляем пустые (следовательно не семантичныо) DIV‘ы, перед закрывающимся тэгом . Вот так:
<div class="edge" id="left"></div> <div class="edge" id="right"></div> <div class="edge" id="top"></div> <div class="edge" id="bottom"></div>
Заметьте, что мы добавляем к ним класс (edge), а так же ID. ID нужны нам для CSS, а класс для JavaScrit’a.
Шаг 2: CSS
Изначально, мы скрываем наши div‘ы. Поэтому, применяем к ним display:none.
#top, #bottom, #left, #right {display: none;}
Впринципе, можно и к классу это применять. Меньше писать, и читабельнее.
div.edge{display:none;}
С основным разобрались. Теперь пройдемся по блокам. Тут мы поступаем хитро. Для каждой пары блоков мы выносим отдельно общие свойства, и затем уже применяем индивидуальные.
#left, #right {
position: fixed;
top: 0; bottom: 0;
width: 88px;
}
#left { left: 0; background: url(images/left.png) left center repeat-y;}
#right { right: 0; background: url(images/right.png) right center repeat-y;}
#top, #bottom {
position: fixed;
left: 0; right: 0;
height: 88px;
}
#top { top: 0px; background: url(images/top.png) top center repeat-x; }
#bottom { bottom: 0px; background: url(images/bottom.png) bottom center repeat-x; }
Все, это все наши стили. Изображения, которые мы используем тут буду лежать в архиве с исходниками в конце статьи.
Шаг 3: JavaScript
Последняя стадия-делаем появление наших бордеров. Делаем это при помощи jQuery. Все очень просто. По наведению на элемент с классом home мы показываем наши бордеры. Убираем мышку с элемента-убираются и бордеры.
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
$(".home").hover(function(){
$(".edge").stop().fadeIn();
}, function() {
$(".edge").stop().fadeOut();
});
});
</script>
Примечание
Хотите кроссбраузерность? Нет, не выйдет. В ИЕ6 вы не сможете ничего поделать с position:fixed 
Все существующие хаки весьма кривые. Так что просто смиритесь с тем, что пользователи данного браузера не увидят этой красоты. Уберите JS от ИЕ6.
Случайные посты:
Не хочу вас огорчать но вы не правы. Чем вот этот фикс плох ? Никаких дерганий нет
html { filter:progid:DXImageTransform.Microsoft.BasicImage; }
#bar { position:absolute; top:expression(eval(document.documentElement.scrollTop||document.body.scrollTop) + ‘px’ ); }
И вообще чтобы сделать бордеры с помощью дивов - position:fixed совсем не нужен.
Просто можно задать для body { position:relative; min-height:100%; _height:100%; }
position:relative; - для того чтобы дивы позиционировались относительно а не
а для дивов не использовать одновременно 2 значения left right, top bottom т.к. ие не поддерживает такое решение, а использовать height:100% и width:100% соответстевнно. в ие6 будет работать без хаков.
[Ответить]