Довольно-таки интересное решение: как дизайнерское, так и относительно верстки. Суть в том, что по краям видимой части у нас появляется некий бордер.
Мне показалось, что реализация и идея очень интересны 
Итак, начнем.
HTML код
Создаем 4 div элемента с уникальными ID (это вполне логично и естественно).
<div id="left"></div> <div id="right"></div> <div id="top"></div> <div id="bottom"></div>
Теперь CSS для этих элементов. Заметьте, насколько 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; }
Надо сказать, что иерархичность очень способствует восприятию кода. Красивый код, согласитесь.
Вот такая вот незамысловатая идея реализация нестандартной идеи.
Совместимость браузеров
Да, конечно, IE6 как всегда выделяется из толпы. Иногда мне кажется, что разработчики сего чуда руководствовались правила “не будь как все, выделяйся из толпы”.
Как вы знаете, IE6 не знает что такое position:fixed. Я искал различные хаки и фиксы для этой версии браузера, но все они какие-то корявые. Итак, подумав немного меня осенила гениальная идея!
[if lte IE 6]> <link href="ie6.css" type="text/css" rel="stylesheet" media="screen" /> < ![endif]
А в этом CSS’е мы напишем следующее:
#top, #bottom, #left, #right { display: none; }
Вот так-то. Пользуйтесь нормальными браузерами Это, возможно, неправильно, но другого выхода я не вижу.
Случайные посты:
Иногда глючит такой подход
[Ответить]
а вы отловили этот момент? если да - то скажите…интересно в каких ситуациях это происходит
[Ответить]
Не хочу вас огорчать но вы не правы. Чем вот этот фикс плох ? Никаких дерганий нет
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% соответстевнно. и заменить fixed на absolute. в ие6 будет работать без хаков.
[Ответить]