Как создать сайт бесплатно? Как сделать сайт? Журнал для веб-мастеров и блогеров от школы создания сайтов » Стили CSS - создаем рамку вокруг видимой области веб-браузера

Как создать сайт бесплатно? Как сделать сайт? Журнал для веб-мастеров и блогеров от школы создания сайтов

Об авторе Контакты Реклама Карта сайта

Важно! Создание прибыльных веб сайтов и поисковое продвижение сайтов в Москве: веб-компания StudioForYou!

Стили CSS - создаем рамку вокруг видимой области веб-браузера

Опубликовано Март 4th, 2008 в CSS |

+news2.ru +ВааУ.ru +newsland.ru +СМИ2.ru +del.icio.us +bobrdobr.ru +memori.ru +RUmarkz +Mister Wong +Мое Место
-->

Автор: Крис Койер
Перевод: Всеволод Козлов

Hicksdesign презентовали свой новый дизайн, изюминкой которого стала необычная и ранее невстречаемая рамка вокруг видимой области веб-браузера отличного от фона цвета.

Я подумал, что технология создания этой рамки будет интересна моим читателям и предлагаю Вам ознакомиться с требуемым для реализации кодом.

Сперва HTML-код:

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

ВНИМАНИЕ! Для успешного функционирования необходимо сохранить 4 уникальных элемента веб-страницы, как показано в коде выше.

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; }

Совместимость с браузерами

Данный css-трюк отлично работает в Firefox, Safari, Opera, IE7. Но не работает в IE6. Излечить это недоразумение можно путем добавления нижеследующих HTML и CSS кодов:

<!--[if lte IE 6]>
<link href="/ie6.css" type="text/css" rel="stylesheet" media="screen" />
<![endif]-->

HTML-код добавляется в код веб-страницы и указывает на место расположения css-стиля для IE6.

А теперь CSS-лекарство:

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

Все готово! Наслаждаемся рамкой!

Оригинал статьи: CSS Trick: Creating a Body-Border

Похожие статьи по блогингу и веб-местерингу:
Fatal error: Call to undefined function: similar_posts() in /home/u82003/w3school.ru/www/blog/wp-content/themes/w3school-blog/single.php on line 35