Создание двух колонок с помощью отступов и слоев


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis.

    Существует несколько способов создания колонок с помощью стилей. Это применение плавающих элементов, абсолютного и относительного позиционирования, а также с помощью отступов.
     В этом уроке я рассмотрю создание двух колонок с помощью отступов и слоев.
    Для создания двух колонок понадобится три слоя. Первый с именем column, выступает в роли основного контейнера, он задает общую ширину макета и цвет фона левой колонки. Ширина определяется атрибутом width и может быть указана как в пикселах так и в процентах.
     Следующий слой, column1, определяет параметры левой колонки, в частности цвет текста и ширину, которая также может быть задана в любых доступных для CSS единицах. Чтобы колонки располагались по горизонтали, для этого слоя следует установить атрибут float:left.
     Элементы div являются блочными и по умолчанию располагаются вертикально друг под другом. Использование float, как показано в листинге обеспечивает их положение по горизонтали.
     Последний слой с именем column2, задает параметры оформления правой колонки – цвет фона и текста. Кроме того, здесь обязательно следует привести параметр margin-left, задающий смещение левой границы элемента вправо. Значение у него должно быть таким же как и ширина слоя column1. Иными словами, если ширина левой колонки установлена в процентах, также в процентах следует задавать отступ. Это условие касается и других единиц. Ширину этой колонки указывать не нужно, она будет вычислена автоматически исходя из уже заданных размеров. Чтобы не произошло ненужного выхода текста за пределы колонок в случае добавления полей к тегу div (браузер firefox), поля устанавливаются для параграфа (тег p), который располагается внутри каждого слоя. Для устранения отступов по умолчанию устанавливаем свойство margin: 0px, применительно к селектору параграфа (тег P).



Устанавливаем стили:
<style type="text/css">      
 
.column {
background: #424242;    /*Цвет фона левой колонки */
width:600px;                   /*Суммарная ширина колонок*/
margin: 0 auto;                /*Расположение по центру*/
}
 
.column1 {             
width: 200px;                /*Ширина левой колонки*/
float:left;                        /*Обтекание с правого края*/
color: white;                  /*Цвет текста в левой колонке*/
}
 
.column2 {
background: #e0e0e0;    /*Цвет фона правой колонки*/
margin-left: 200px;        /*Сдвиг правого края на ширину левой колонки*/
color: black;                   /*Цвет текста в правой колонке*/
}
 
p.columnp {
padding: 10px;             /*Поля вокруг текста*/
margin: 0px;                 /*Отменяем отступы у параграфа*/
}

</style>


Программный код:
<div class="column">
    <div class="column1">
        <p class="columnp">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis.</p>
    </div>
    <div class="column2">
        <p class="columnp">&nbsp;&nbsp;&nbsp;&nbsp;Существует несколько способов создания колонок с помощью стилей. Это применение плавающих элементов, абсолютного и относительного позиционирования,  а так же с помощью отступов.<br />&nbsp;&nbsp;&nbsp;&nbsp; В этом уроке я рассмотрю создание двух колонок с  помощью отступов и слоев.<br /></p>
    </div>
</div>

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

Автор: Сергей Зарубин

Дата: 2011-04-12

Колличество просмотров: 3945

Нравится

Комментарии к заметке:



Добавить новый комментарий


Введите число с картинки:

captcha