Создание белой прямоугольной области
Приступим к созданию центральной части –белой прямоугольной области, на фоне которой выводится текст (см. рис. 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.