Фиксированные подписи к изображениям

Раньше веб-дизайнеры создавали фотогаллереи на основе 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;.