Давайте ближе рассмотрим панель модуля, расположенную слева:
Рис. 26: Модуль, расположенный слева
В HTML коде файла index.php имеется следующий фрагмент:
В форматировании тега
Контент между тегами
В нашем случае имеется три модуля.
CSS идентификатор левой колонке выглядит в CSS файле следующим образом:
#leftcolumn {
padding: 0;
margin: 0;
width: 20%;
float:left;
}
Если вы посмотрите на исходный код страницы, отображаемой в веб браузере (нажать правой кнопкой на странице и выбрать Просмотреть исходный код страницы (View Page Source)), то увидите, что jdoc запрос Joomla! сгенерировал на самом деле значительно больший объем кода.
Листинг 7: Выдержка из исходного кодаHTML страницы
… дополнительные HTML команды
… дополнительные HTML команды
В данном фрагменте кода особо отметим CSS класс module_menu. Описание данного класса в CSS файле выглядит следующим образом:
div.module_menu {
background: url(../images/mw_box_blue_br.png)
100% 100% no-repeat;
… дополнительные команды …
}
div.module_menu div {
background: url(../images/mw_box_blue_bl.png)
0 100% no-repeat;
}
div.module_menu div div {
background: url(../images/mw_box_blue_tr.png)
100% 0 no-repeat;
}
div.module_menu div div div {
background: url(../images/mw_box_blue_tl.png)
0 0 no-repeat;
padding: 10px;
padding-top: 30px;
padding-bottom: 15px;
width: auto;
}
div.module_menu div div div div {
background: none;
padding: 0;
}
Четыре блока CSS активируют определенные фоновые рисунки в каждом из тегов
В нашем случае результатом использования этого кода является меню с закругленными углами. Также в этом CSS файле имеются дополнительные строки, форматирующие заголовки третьего порядка (
), и несортированный список элементов меню.Пока все идет нормально. Тип форматирования выбран, а отображение тегов