#007 Модуль section dev-header

[basn]

Навигация

• Топик с элементами viewtopic.php?t=143
  • Экскаватор viewtopic.php?p=368#p368
  • новый пункт
• файл user.css viewtopic.php?t=136
  • класс .dev-header viewtopic.php?p=361#p361
  • применение настроек стилей класса .dev-header в инспекторе viewtopic.php?p=375#p375
  • новый пункт
• новый пункт

начало #007
HTML-тег модуля section
CSS-класс модуля dev-header
Стиль модуля html5

задаю классу модуля стиль в файле user.css (viewtopic.php?t=136 #p361), чтобы видеть его на сайте - я думаю в будущем повторно использовать этот класс для новых подобных модулей, поэтому данный стандарт пока такой
.dev-header{
/*display: flex;*/
/*justify-content: space-between;*//*содержимое раскидать по бокам*/
/*background: #f00;*//*красный цвет*/
position: relative;
}

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

для тех, кто не в теме:

Что делает space between?
Space-between придает равное расстояние между каждым прямоугольником, но не берет в расчет основной контейнер, как это делает space-around.
Space-around облекает каждый прямоугольник равными отступами. Это означает, что пространство между крайними прямоугольниками и контейнером в два раза меньше пространства между двумя прямоугольниками — так происходит из-за того, что отступы не накладываются друг на друга, а суммируются.

вместо kit-header читать dev-header (см. сообщение viewtopic.php?p=375#p375)

space-between.png (74.87 КБ) 9126 просмотров

для сравнения space-around

space-around.png (75.07 КБ) 9126 просмотров

[basn]

что то произошло и перестали работать bbcode в этом сообщении, сейчас это сообщение восстановлено и доступно ниже по ссылке viewtopic.php?p=378#p378

[basn]

kit-header заменил на dev-header в стилях и в настройках модуля
dev=developer
теперь в инспекторе всё понятно, что данные настройки специально для разработчика сайта

настройки включены

2024-09-09_21-47-35.png (295.28 КБ) 9080 просмотров

настройки выключены

2024-09-09_21-48-42.png (457.11 КБ) 9080 просмотров

[basn]

Продолжу заниматься этим модулем: для начала скрою название модуля, теперь модуль состоит лишь из содержимого его контейнера с HTML кодом.

я добавил немного информации и прилепил картинку экскаватора, раскинул логически всё на 2 блока внутри этой секции, которым добавил класс item, чтобы иметь 2 дочерних элемента с одинаковыми классами, одна часть у меня получилась с текстом (класс kit-header-text), вторая с изображением (класс kit-header-img).

Для этого я предварительно загрузил обработанное изображение экскаватора в папку images/elements

Топик с элементами viewtopic.php?t=143
Экскаватор viewtopic.php?p=368#p368

код наглядно:

Код: Выделить всё

<section class="moduletable dev-header" aria-labelledby="mod-112">
<h3 id="mod-112">section dev-header</h3>
<div id="mod-custom112" class="mod-custom custom">
<div class="item kit-header-text">
<p>содержимое модуля section dev-header</p>
<p>Мини экскаватор</p>
<p>Ямобур</p>
<p>8-927-207-08-05</p>
<p>Никита</p>
</div>
<div class="item kit-header-img"><img class="sec1-img1" src="/kit/images/elements/excavator1.png" alt="мини экскаватор" loading="lazy" data-path="local-images:/elements/excavator1.png"></div></div>
</section>

Если кто то тренируется на Joomla по моему примеру, то теги section и div с id="mod-custom112" копировать не нужно, так как это сгенерировано нашими настройками в панели управления, для наполнения достаточно вот этого кода:

Код: Выделить всё

 <div class="item kit-header-text">
<p>содержимое модуля section kit-header</p>
<p>Мини экскаватор</p>
<p>Ямобур</p>
<p>8-927-207-08-05</p>
<p>Никита</p>
</div>
<div class="item kit-header-img">
<img class="sec1-img1" src="/kit/images/elements/excavator1.png" alt="мини экскаватор" loading="lazy" data-path="local-images:/elements/excavator1.png">
</div>

Если кто то заметил, то для тега img я задал тоже класс (sec1-img1), для того, чтобы в дальнейшем можно было настраивать картинку более тонко через CSS стили

Сохраняем модуль в панели управления, заходим на страницу с отображением модуля, и прямо в инспекторе красим дочерние элементы в разные цвета, допустим в чёрный и зелёный

background: black;
background: green;

наблюдаем примерно такую картину

2024-09-09_16-14-46.png (283.82 КБ) 9041 просмотр

вот ещё пример

2024-09-09_22-21-49.png (252.91 КБ) 9041 просмотр