Раньше веб-дизайнеры создавали фотогаллереи на основе HTML-тега таблицы <table>
, помещая изображения в ячейки, образуемые строками и столбцами. Но сейчас можно достичь отгоже самого эффекта с помощью короткого CSS-кода.
В данном уроке показан простейший вариант вывода фиксированных подписей к изображениям, используя теги <figure>
и <figcaption>
для группирования картинок и подписей к ним. Научившись правильно использовать эти элементы, в дальнейшем вам не составит особого труда, прикрутить к ним всевозможные эффекты.
Синтаксис(разметка html) во всех примерах будет примерно одинаков, тег <figcaption>
, который содержит описание для тега <figure>
, должен быть первым или последним элементом в группе, всё очень просто. Так:
<figure> <figcaption> Подпись к изображению... </figcaption> <img src="путь до картинки"> </figure>
или так:
<figure> <img src="путь до картинки> <figcaption> Подпись к изображению... </figcaption> </figure>
Внешний вид и расположение подписей будем формировать непосредственно в таблице стилей CSS, предварительно связав все элементы со стилями через определённые классы. Например, я сделал изображения в блоке <figure>
«резиновыми», используя процентные значения ширины картинки width: 100%;
.
.figure { border: 1px solid #666; background-color:#fff; padding:4px; }
.figcaption { text-align: center; margin: 10px 0 0 0; }
Во всех случаях базовому контейнеру <figure>
определяем относительное позиционирование position: relative;
, а подписям (элемент <figcaption>
), в вариантах с наложением, определяем абсолютное позиционирование position: absolute;
.