Табличный тайлинг

Home

Табличный тайлинг

( 0 - user rating )

Что такое тайлинг?

Люди которые причастны к web-мастерингу конечно же знают, что такое тайлинг, а для новичков это слово вызывает только непонимание.

Тайлинг (от английского слова tiling-мозаичное покрытие) - это свойство фонового изображение повторятся.

Это слово очень прижилось в web-дизайне и, как правило, означает фоновое изображение, которое располагается по сторонам от контентной области сайта.

Однородный тайлинг

Если тайлинг на сайте однородный, то есть используется одно изображение, то его реализация очень проста - нужно для тега <body> прописать следующее:

body
{

body:url('/images/til.gif') center top repeat;

}

Данная запись в css означает, что изображение til.gif будет тайлится по всему сайту.
Этот способ является самым простым и используется если в качестве тайлинга используется одно изображение.

Неоднородный тайлинг

Очень часто дизайнеры рисуют разный тайлинг по бокам для сайта. Это выглядит красиво, но при верстке такого дизайна могут возникнуть проблемы. Если каркас сайта сделан таблицами, то есть очень простой способ сделать разный талинг по сторонам.

.main-table
{

width:100%;

}

.til-left
{

width:50%;
background:#CC9900;

}

.til-right
{

width:50%;
background:#66CC33;

}

.main-width
{

width:300px;
background:#CCCCCC;

}

Рассмотрим созданные css классы:

.main-table - класс цепляется на главную таблицу и заставляет его растягиватся на всю ширину браузера.
.til-left - этот класс цепляется на тег <td> и служит для задания фона для левого тайлинга.
.til-right - этот класс цепляется на тег <td> и служит для задания фона для правого тайлинга.
.main-width - устанавливает фиксированную ширину сайта.

В html прописывается следующий код:

<tr>

<td class="til-left">Левый талинг</td>

<td>

<tr>

<td>Контент</td>

</tr>

</table></td>

<td class="til-right">Правый талинг</td>

</tr>

</table>

Структура использования таблиц очень проста. Общая таблица нужна, чтоб создать 3 колонки: 2 боковые для талинга, и одну центральную для контентной части. А в центральной колонке используем таблицу, чтоб установить фиксированную ширину сайта.

Этот код является самым оптимальным для создания разного тайлинга по бокам сайта с фиксированной шириной.
В результате мы имеем заготовку для создания сайта с табличным каркасом, и возможностью задать разное изображение или цвет для разных сторон в качестве фона.

Левый талинг

Контент

Правый талинг