CSS вместо фрэймов

Регистрируя почтовый ящик или любой другой сервис вы, наверное, сталкивались с тем, что вам предлогают прочитать пользовательское соглашение перед началом регистрации. Соглашение обычно очень длинное и никто его не читает, поэтому для того чтобы сэкономить время посетителю, который хочет быстрее нажать на кнопку "Согласен", пользовательское соглашение, как правило, помещается в небольшом блоке с полосой прокрутки. Добиться нужного нам результата можно несколькими способами.
Если ваше пользовательское соглашение состоит только из обычного текста, то его можно поместить в <textarea> </textarea>. Но если вы хотите использовать заголовки, картинки или таблицы внутри блока, то первым что приходит в голову будет использование <iframe />. Но это не очень хороший способ решить проблему. Поскольку содержимое фрэйма подгружается с другого документа, то это увеличивает время полной загрузки страницы, а может случиться и так, что страница с соглашением вообще не подгрузится в фрэйм. Поэтому данный способ нам тоже не очень подходит.

На что способен CSS

Наверное, не многие знают, что сделать небольшой блок с полосой прокрутки можно с помощью CSS. В этом случае вся информация будет находиться в одном документе, а не в нескольких. Давайте рассмотрим следующий пример.
Этот код помещаем в "теле" нашей страницы:

<div class="frame">
Это пользовательское соглашение может содержать:

<br /><br /> 
обычный текст<br /><br /><h1>Заголовки</h1>
<img src="http://kaminskiy-design.com.ua/style/logo.jpg"

 alt="картинки" />

<br /><br />

<a href="http://kaminskiy-design.com.ua/">ссылки</a><br />

<br />
<ul><li>Списки</li></ul>
<table cellpadding="5" cellspacing="1" bgcolor="#FF0000">
<tr><td bgcolor="#FFFFFF">и даже</td>
<td bgcolor="#FFFFFF">таблицы</td></tr></table><br />

<br /> и <em>любые</em> <strong>другие</strong> 
<u>элементы страницы</u>
</div>

А следующую часть кода нужно добавить к вашим основным CSS-стилям, то-есть поместить между тэгами <style> и </style> или добавить в файл со стилями:

.frame {
    overflow: auto; 
    width: 550px; 
    height: 100px; 
    text-align: justify; 
    padding: 15px; 
    border-left: #000000 1px solid; 
    border-right: #000000 1px solid; 
    border-top: #000000 1px solid; 
    border-bottom: #000000 1px solid; 
    scrollbar-face-color: #DF0000; 
    scrollbar-highlight-color: #FF0000; 
    scrollbar-shadow-color: #BB0000; 
    scrollbar-3dlight-color: #660000; 
    scrollbar-arrow-color: #FFFFFF; 
    scrollbar-track-color: #F5F5F5; 
    scrollbar-darkshadow-color: #660000;
}

Самым главным CSS атрибутом в приведенном примере является overflow. Он определяет будет ли блок сжиматься до указанного параметрами width и height размера и может принимать следующие значения:

visible – блок отображается полностью, не зависимо от заданной высоты и ширины
hidden – отображается с заданной шириной и высотой, но с отсутствием полосы прокрутки, что не дает возможности увидеть все содержимое блока
auto – отображается с заданной шириной и высотой, а при необходимости браузер автоматически добавляет вертикальную и горизонтальную полосу прокрутки
scroll – присутствует как горизонтальная, так и вертикальная полоса прокрутки независимо от размера содержимого блока

А дальше идут уже знакомые всем параметры, определяющие расположение текста в блоке, отступ содержимого нашего блока от его краев, цвет и толщину рамки блока, а также цвета полосы прокрутки.
Имитация фрэйма с помощью CSS

Вот что у нас получилось

Конечно же данный способ можно применять не только для того чтобы размещать пользовательское соглашение. В такой блок можно помещать статьи, новости и другое содержимое.

Автор статьи: Сергей Каминский