Резиновый дизайн css. Резиновый веб-дизайн

Цель урока: Знакомство с принципами блочной верстки для резинового дизайна сайта. Изучение основных свойств для построения резинового макета

Резиновый дизайн сайта означает, что при изменении размеров окна браузера все слои масштабируются согласно текущей ширине . Это и есть основное преимущество резинового дизайна: независимо от размеров экрана, вся его область будет занята, при этом не возникают лишние полосы прокрутки при использовании «маленького» монитора.

«Резиновость» достигается за счет того, что определенные слои макета не имеют фиксированную ширину, приспосабливая свои размеры под размеры окна браузера .

Минусом данного типа дизайна являются «разногласия» между браузерами, необходимость применять «хитрости» css-стилей , для того чтобы достичь необходимой кроссбраузерности.

Две колонки в резиновой дизайне

Дизайн CSS две колонки, пожалуй, самый популярный. Создать страницу с таким расположением колонок можно двумя способами, рассмотрим каждый отдельно.

Свойство float для создания эффекта плавающего элемента

Рассмотрим пример, в котором присутствуют следующие блоки, изображенные на рис. 1 : шапка (бордовый), меню (светло-серый), контент (белый), подвал (темно-серый).

Рис. 1. Резиновый дизайн сайта в две колонки

Левую колонку выполним с фиксированным размером, а правая колонка будет занимать остальную ширину окна, что и обеспечит «резиновость» дизайна.

Основные свойства

1. «Разбиваем» все основные элементы страницы на блоки следующим образом:

2. Для левой колонки задаем свойства, обязательные при использовании резинового дизайна: float и width
1 вариант:

#content{ margin-left: 21%; }

2 вариант:

#content{ margin-left: 210px; }

Все остальные свойства зависят от оформления сайта.

Весь код CSS будет выглядеть так:

#top { /* Шапка с заголовком страницы */ background: #e3e8cc; /* Цвет фона */ border: solid 1px black; /* Параметры рамки */ padding: 10px 0 10px 10px; /* Поля вокруг текста */ margin-bottom: 5px; /* Расстояние между шапкой и колонками */ font-size: 24px; /* Размер шрифта */ font-weight: bold; /* Жирное начертание */ } #menu { /* Меню сайта */ width: 200px; /* Ширина меню */ background: #e3e8cc; /* Цвет фона */ border: solid 1px black; /* Параметры рамки */ float: left; /* Состыковка со слоем контента по горизонтали */ padding: 3px; /* Внутренние поля */ } #content { /* Основное содержание */ background: #e3e8cc; /* Цвет фона */ border: solid 1px black; /* Параметры рамки */ margin-left: 210px; /* Отступ слева с учетом ширины левой колонки */ margin-bottom: 5px /* Отступ снизу */ } #content p{ padding: 3px; /* Внутренние поля контента*/ } #bottom { /* Подвал */ background: #e3e8cc; /* Цвет фона */ border: solid 1px black; /* Параметры рамки */ padding: 3px; /* Поля вокруг текста */ }

Результат:

Рис. 2. Левая колонка с фиксированной шириной в резиновом дизайне

Рассмотрим пример, когда фиксированной шириной обладает не левая, а правая колонка.

Правая колонка с фиксированной шириной: основные свойства

Код html-структуры остается прежним , меняются лишь CSS-свойства.

1. Для левой колонки задаем свойства, обязательные при использовании резинового дизайна: float и width
1 вариант:

#content{ margin-right: 21%; }

2 вариант:

#content{ margin-right: 210px; }

Результат:

Рис. 3. Правая колонка с фиксированной шириной в резиновом дизайне

Применение позиционирования в резиновом дизайне

При использовании данного варианта дизайна для левой или правой колонки устанавливается абсолютное позиционирование с заданием координат.
Например:
Левая колонка:

margin-left: ...px; /* отступ слева, равный ширине первой колонки */

«Резиновость» достигается в данном случае за счет правой колонки, у которой нет определенной ширины.

Пример: Создать веб-страницу в формате резинового дизайна. Для левой колонки задать абсолютное позиционирование с координатами от левого и верхнего края окна браузера

1. Расположим основные html-элементы страницы следующим образом: