Главная arrow РАССЫЛКА arrow №27. Шаблоны Joomla. Часть 6
17.12.2017 г.

Joomla для начинающих

Опрос (НОВЫЙ!)

Интересна ли Вам тема интернет-магазина для Джумлы?

Авторизация






Забыли пароль?

Последние 3 записи в Гостевой

Елена Васильева
Перед покупкой прилегающей одежды важно знать вашу форму тела. Некоторые женщины имеют неправильное представление о том, что ношение прилегающей одежд
Slimera Garcinia Cam
. You can select any trustworthy hospital when you purchase slimming tablets online.So searching for a sliming treatment? Wish to loose weight as earl
Фактор 4
Этот тип упражнений делается на коленях или лежа на животе. Это упражнение также устраняет напряжение в спине и шее, которое можно получить, делая скр

Сайты как небоскрёбы

Так почему бы не ускорить механизмы создания онлайн площадей:

  1. Применение метода "что вижу - то пою". Ежечасная транскрибация мыслей и образов с постингом в блоги.
  2. Массовый парсинг с последующим, массовым же, рерайтингом и постингом.

 

 

Последние новости
  • Компания Microsoft в июле 2015 года объявила о сокращении более 7 тысяч рабочих мест.
  • Facebook проектирует строительство дата-центра, электричество для которого будет полностью вырабатываться от энергии ветра.
Реклама:
 

№27. Шаблоны Joomla. Часть 6 Печать E-mail
Автор Леонид Мальков   
25.07.2008 г.

Шаблоны 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).

Скачать шаблон

 

Автор данной статьи: Леонид Мальков

 


Просмотров: 16543

Коментарии (3)
 
8) javascript:ac_smilie('8)')javascript:ac_smilie(':sigh')javascript:ac_smilie(':ee
 
javascript:ac_smilie(';)'), 17:40 17 мая 2011 г.
 
Я не могу разобраться, как задать в файле стилей CSS свой стиль для блока DIV. Мне необходимо несколько различных стилей. Хочу слелать уникальный фон и размеры и еще параметры отображения. Помогите...
 
Гоша, 13:51 01 октября 2013 г.
 
Добавил в конец файла CSS, при добавлении DIV отображается... поменял position:relative - не сохраняются размеры, они же прописаны в CSS - а у меня все отображается целиком :upset
 
Гоша, 13:56 01 октября 2013 г.

Добавить коментарий
Имя:
Коментарий:



Код:* Code

Последнее обновление ( 08.12.2011 г. )
 

 
   

2007+ © "efft" Lab

Яндекс цитирования