Шаблоны Joomla. Часть 6.
(Модули - СТИЛЬНЫЙ дизайн НА таблицах. Продолжение)
Уровень: Пользователь - Веб-мастер
Здравствуйте, уважаемые подписчики. Сегодня мы продолжим разговор о стилевом оформлении модулей. Попытаемся воспроизвести дизайн модулей сайта MailList.ru Почему именно его? Потому что там он ярко выражен. Откройте, например, сайт http://MailList.ru/", предварительно отключив загрузку изображений в Вашем браузере. Приятно смотрится? Да. По сравнению с некоторыми сайтами, которые в подобном случае будут пестреть дырками от пустых рисунков. Обращаем внимание, что мы будем воспроизводить дизайн как можно точнее с внешней точки зрения. HTML-структуру сайта мы воспроизводить не будем, а используем собственные приемы, немного упрощенные в некоторых случаях. Проделываем мы это исключительно в учебных целях, чтобы показать насколько легко и быстро можно создать дизайн не хуже любого популярного сайта в сети.
У нас есть учебный шаблон, разработанный в выпуске рассылки №25,который мы будем дорабатывать (cкачать исходный шаблон).
План разработки
В исходном шаблоне стилями оформлены сами модули, а в воспроизводимом дизайне видно, что модули находятся в контейнере (это правый и левый столбцы с обрамлением). Необходимо изменить текущий стиль модулей и задать стиль для контейнера, которым являются ячейки таблицы, в которые модули выводятся.
Изменение стиля модулей
Необходимо получить следующее:
- Модули имеют заголовок с фоном (это уже есть), фон в самом модуле и рамку по нижней границе модуля (в оригинале это реализовано изображением, а мы сделаем стилями).
- Между модулями есть вертикальный интервал, который также воспроизведем.
Измененные стили:
table.moduletable {
border-bottom: solid 1px #FAA74A; /* Рамка по нежней границе модуля*/
x padding-bottom: 5px; /*Различно действует для Мозиллы и ИЕ*/
x padding-left: 10px; /*Различно действует для Мозиллы и ИЕ*/
width:100%;
margin-bottom:15px; /* Устанавливаем вертикальный интервал между модулями*/
}
- изменили border на border-bottom, так как нужна рамка только внизу;
- закомментировали padding-bottom, причина описана ниже;
- добавили margin-bottom, отступ первого модуля от верхней границы контейнера устанавливается в стилях контейнера.
Это для таблицы в целом, теперь для ячейки:
table.moduletable td {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
padding-left: 10px;
/* Если отступ слева задать для всей таблицы,
то в Мозилле этот стиль подействует на фон заголовка
(он тоже будет с отступом - получается кривовато :)
Раскомментируйте этот стиль в table.moduletable и посмотрите на результат :)
*/
padding-bottom: 5px;
/* Если отступ слева задать для всей таблицы,
то в Мозилле между нижней рамкой модуля и его фоном получается разрыв как раз 5px
*/
background-color:#FFE5AA;
}
- добавили padding-bottom, для обеспечения мультибраузерности;
- добавили background-color, фон модуля.
Модули готовы :)
Установка стиля контейнера
Зададим стиль для ячеек таблицы, в которых выводятся модули (в шаблоне для соответствующих тегов <td> необходимо установить class=maillist):
td.maillist {
border: solid 2px #FAA74A;
border-top-width: 25px;
padding: 15px 5px 5px 5px;
}
Как видите, все предельно просто. Единственное, что нуждается в комментарии, это способ установки жирной рыжей полосы вверху столбцов с модулями.
Мы решили проблему единственным стилем border-top-width. При этом внутри полосы простым способом не написать какой-либо текст. Если посмотреть оригинальный сайт, в нем над центральным столбцом присутствует надпись "Почтовые рассылки MailList.Ru". Используя наше решение, такую надпись не создашь, в таблице необходимо создавать дополнительные ячейки. У оригинального сайта разметка, вообще, на много сложнее. Например, разрывы между столбцами, задаются тоже дополнительными ячейками с рисунками-растяжками, а мы лишь зададим для таблицы значение свойства cellspacing="5" ( подробнее об этом ниже), а визуальный эффект тот же!
Последние штрихи
Чтобы результат трудов выглядел более менее эстетично. Сделаем еще несколько действий:
- для столбца с контентом сделаем такой же внешний вид, для чего в теге соответствующей ячейки установим свойство class=maillist
- в результате столбцы слились друг с другом. Чтобы исправить ситуацию, зададим для таблицы значение свойства cellspacing="5"
- шапку шаблона сделаем такого же стиля
- замечаете, что растянутая на весь экран страница выглядит хуже, чем фиксированная страница maillist? Особенно это заметно, если вы используете разрешение монитора "1280" или больше. Сделаем страницу фиксированной по ширине размером 1000px. Для этого в шаблоне во всех каркасных таблицах заменим свойство width="100%" на align="center" width="1000px"
Шаблон в работе и его дистрибутив
Посмотреть шаблон на демо-сайте (имя шаблона efft_table_27).
Скачать шаблон
Автор данной статьи: Леонид Мальков
javascript:ac_smilie('
')javascript:ac_smilie(':ee
