Disclaimer: статья содержит описание deprecated-элемента, вместо <media_container> рекомендуется использовать <div>
Медиа-контейнер представляет собой универсальный контейнер для медиа-контента, позволяющий задавать настройки взаимодействия и дополнительные свойства содержимому.
Контентом контейнера может являться (обязательный атрибут “type”):
“3d” – 3д-модель
“image”– изображение
“audio” – звуковой файл
“table” – таблицу
“video” – видео файл
“slideshow” – слайдшоу
“text” – текст
“line” – горизонтальная линия (сепаратор)
Наиболее востребованным для словарей типом будут являться text и image контейнеры. Главной особенностью для нас является возможность добавления взаимодействия медиа-контейнеров друг с другом и с остальными объектами словарной статьи.
Используя атрибуты float и display можно заставить текст обтекать изображение или другие элементы, в том числе другой блок текста.
Пример медиа-контейнера с обтеканием:
<p depth="1" indent="-1">
<media_container type="text" width="2%" float="left" dispay="inline" expansion="no" interactivity="yes" align_horizontal="left" align_vertical="top" padding_left="0" padding_right="0"> </media_container>
<media_container type="image" width="AUTO" float="right" dispay="inline" expansion="no" interactivity="yes" align_horizontal="right" align_vertical="top" padding_left="0" padding_right="0"></media_container>
<media_container type="text" width="AUTO" dispay="inline" expansion="no" interactivity="yes" align_horizontal="left" align_vertical="top" padding_left="0" padding_right="0"></media_container>
</p>Требование:
сверстать каждый перевод так, чтобы он был пронумерован (причем нумерация выводится по левому краю с отступом от текста), а в правой части должно быть расположено изображение, обтекаемое основным текстом перевода. Последнее требование делает невозможным использование таблиц для верстки статьи.
Решение:
весь блок перевода заворачивается в параграф с глубиной и отрицательным отступом одинакового значения для компенсации нумерации.
- Первым вложенным элементом делается медиа-контейнер типа “text” с нумерацией внутри, его ширина в идеале задается равной значению depth параграфа, отступы нулевые. Float (расположение элемента, который следует обтекать) – по левому краю. Значение атрибута expansion нужно установить “no”, чтобы избежать растяжения контейнера на всю ширину экрана. Ширина медиа-контейнера задается в единицах (пиксели), либо %, глубина параграфа на текущий момент задается в аналогично (предпочтительно в %)
- Вторым вложенным элементом должно стоять соответствующее изображение в медиа-контейнере типа “image”, шириной “auto” (по контенту), привязанное к правому краю экрана (float=”right”), можно задать небольшой отступ слева/справа/снизу для зазора между текстом и изображением. expansion и display соответствуют первому контейнеру.
- Последним добавляется контейнер с текстом перевода, тип “text”, шириной auto, без float. Благодаря свойствам float двух предыдущих контейнеров третий блок будет размещаться по середине между двумя медиа-контейнерами.
Для сброса настроек обтекания предыдущих блоков используется атрибут clear с возможными значениями left, right и both. Этот атрибут должен содержаться в контейнере, который следует за блоком перевода и начинает новый блок
Также есть возможность задавать цвет фона контейнеру, в том числе градиентом, через атрибуты:
- colour – цвет фона контейнера (RGB+Alpha) в 16-тиричной форме
- gradient – фон добавляется градиентом с переходом от одного цвета к другому, направление задается атрибутом to_top” – снизу вверх, “to_left” – справа налево, “to_bottom” – снизу вверх, “to_right” слева направо, “to_top_left” – от правого нижнего угла к левому верхнему, “to_top_right” – от левого нижнего угла к правому верхнему, “to_bottom_left” – от правого верхнего угла к левому нижнему, “to_bottom_right” – от левого верхнего угла к правому нижнему
- colour_begin – начальный цвет для градиента, формат аналогично colour
- colour_end – конечный цвет для градиента, формат аналогично colour
- background – атрибут для задания фоновой картинки (вписывается имя файла)
- tiling – тип тайлинга для фоновой картинки. Возможные значения: “horizontal” – горизонтальный тайлинг, “vertical” – вертикальный тайлинг, “both” – горизонтальный и вертикальный тайлинг, “no” – без тайлинга, “ spread” – растягиваем изображение на весь контейнер.