Создание белой прямоугольной области

Приступим к созданию центральной части –белой прямоугольной области, на фоне которой выводится текст (см. рис. 8.19):

Рис. 8.19

Эта область будет формироваться с помощью трех изображений в файлах: sheet1.png, sheet2.png, sheet3.png:

· sheet1.png –это верхняя часть,

· sheet2.png –это средняя часть,

· sheet3.png –это нижняя часть.

Все три изображения имеют ширину 550 пикселей.Верхнее и нижнее изображение имеют высоту 10пикселей, а среднее изображение высоту 4пикселя.

Среднее изображение будет многократно повторяться сверху вниз–в зависимости от размера текста. Перейдем в файл index.php,найдем текст "Центр":

<td valign="top" width="200">

Левая боковина

</td>

<td valign="top" width="580">

Центр

</td>

<td valign="top" width="200">

Правая боковина

</td>

Удалим этот текст и вместо него добавим следующий код:

<div id="sheet">

<div id="sheet1"></div>

<div id="sheet2"></div>

<div id="sheet3"></div>

</div>

Мы добавили блок div с идентификаторомsheet,внутри которого находятся еще три блока div. Эти три блока будут отвечать за верхнюю, среднюю и нижнюю части белой прямоугольной области. Перейдем в файл puh.css и в самом низу добавим CSS-код для созданных блоков div:

/*Центральная часть с белым фоном*/

#sheet

{

width: 550px;

padding: 15px;

}

/*Верхняя часть поля с белым фоном*/

#sheet1

{

width: 550px;

height: 10px;

background: url('img/sheet1.png') left top no-repeat;

}

/*Средняя часть поля с белым фоном*/

#sheet2

{

width: 550px;

height: auto;

background: url('img/sheet2.png') left top repeat-y;

padding: 0px 10px;

}

/*Нижняя часть поля с белым фоном*/

#sheet3

{

width: 550px;

height: 10px;

background: url('img/sheet3.png') left top no-repeat;

}

Для всех блоков указана одна ширина:

width: 550px;

Обратите внимание, что для средней части указана еще и высота:

height: auto;

Т.е, для этого блока высота определяется автоматически, а для верхнего и нижнего блока –высота будет фиксированной:

height: 10px;

Дело в том, что центральный блок будет иметь разную высоту, в зависимости от объема расположенного внутри него текста.

Для указания фона можно использовать сокращенную форму в виде:

background: url('img/sheet1.png') left top no-repeat;

В этом варианте все основные настройки разделены пробелами, апорядок должен соответствовать указанному нами!

Для средней части указано повторение фона по высоте repeat-y:

background: url('img/sheet2.png') left toprepeat-y;

Для верхней и нижней части фон выводится однократно без повторений no-repeat. Свойство paddingдля основного блока делает поля по15 пикселей со всех четырех сторон: слева, справа, сверху,снизу. Это необходимо, чтобы белая прямоугольная область имела отступы от границ ячейки таблицы:

padding: 15px;

Если после свойств paddingи margin – указано одно значение, то оно применяется сразу по четырем направлениям: право, лево, верх,низ. Свойство padding для средней части будет выглядеть так:

padding: 0px 10px;

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

Если после свойств: padding, margin указаны два значения, то первое отвечает за верх и низ, а второе за лево и право.

Посмотрим на результат в браузере, появилась белая область (см. рис. 8.20):

Рис. 8.20

Внутри этой белой прямоугольной области будут располагаться данные наших разделов сайта. Для разделаТовары в этой области будет находиться описание товаров.

Внимание!!!Старайтесь больше экспериментировать с CSS-свойствами, изменяйте значения свойств и смотрите на результат в браузере. Параллельно хорошо посмотреть их описание в справочнике по CSS.