Пример 1. Задание высоты слоя

Ширина слоев

Вначале следует определить общую ширину изобразительных элементов веб-страницы. Как упоминалось выше, это значение определяет сам дизайнер на основе предварительного сбора данных о будущих пользователях сайта. Хотя большинство дизайнеров устанавливают ширину, что называется «от фонаря», исходя из собственного удобства. Вот и в примере 1, используя этот же принцип, ширина всех слоев выбрана 750 пикселов.

Итак, вся ширина известна, теперь надо поделить ее на две части. Слой, обозначенный цифрой 2 (рис. 1), отводится под меню, ширина его должна быть минимальна, но достаточна для комфортного чтения текста. Сделаем ее круглым числом, например, 200 пикселов. Все остальное будет занимать контент.

Высота слоев

Высота слоя меняется динамически в зависимости от его содержимого. Если хочется установить высоту слоя самостоятельно, можно воспользоваться свойством height и задать высоту в пикселах, процентах или других единицах CSS. Учтите, что при таком подходе выравнивание содержимого слоя происходит всегда по его верхнему краю, поэтому слишком большую высоту задавать не стоит (пример 1).

Пример 1. Задание высоты слоя

<style type="text/css" > #top { text-align: left; /* Выравнивание по левому краю */ width: 750px; /* Ширина слоя */ background: #800000; /* Цвет фона */ height: 50px; /* Высота слоя */ } </style>

Аналогично, высоту слоя можно менять и отступами, изменяя значение padding-top и padding-bottom (пример 2). Но этот способ менее универсальный.

Дата добавления: 2015-07-16