www.kaminskiy-web.com | contact@kaminskiy-web.com
Статьи для веб-мастера - Kaminskiy-web

Главная страницаОбо мнеКонтактная информация
Статьи HTML и CSS JavaScript PHP и MySQL Раскрутка сайтов Хостинг Рейтинг украинского хостинга Анекдоты Анекдотов стрит

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

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

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

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

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

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

Этот код помещаем в "теле" нашей страницы:

<div class="frame">
Это пользовательское соглашение может содержать: <br /><br /> 
обычный текст<br /><br /><h1>Заголовки</h1>
<img src="http://www.kaminskiy-web.com/style/logo.jpg" alt="картинки" />
<br /><br /><a href="http://www.kaminskiy-web.com/">ссылки</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
Вот что у нас получилось

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

Другие записи по теме в разделе статьи по HTML и CSS

Копирование статьи запрещено.