Подрисуночная подпись - контентовая версия

Подрисуночная подпись — контент, являющийся названием рисунка, комментарием к нему или описанием Имаги. Такая подпись важна, поскольку привлекает внимание читателя к рисунку и дает больше информации об изображении. У тега <IMG> существует, конечно, параметр title, который задает контент подсказки, но чтобы ее получить приходится наводить курсор мыши на каждый рисунок, что довольно неудобно. Более наглядный способ и соответственно более предпочтительный заключается в размещении подрисуночной подписи возле самого Имаги. Подпись хоть и имеется ввиду подрисуночной, но может располагаться и сбоку от рисунка, если это продиктовано соображениями верстки и дизайна.

Подпись под рисунком

просмотрим простой вариант, когда подпись располагается прямо под изображением (рис. 1). При этом сама картинка и контент к ней размещаются в прямоугольнике с рамкой и фоном.

Изображение и подпись к нему добавляются с помощью тега абзаца <P>, управление которым, в частности, выравнивание контента, его цвет и шрифт задается через стили. Подпись при этом отделяется от рисунка тегом <BR> (пример 1). Чтобы стиль абзаца с подрисуночной подписью не пересекался с рядовым абзацем, создадим новый класс fig, и будем добавлять его при необходимости к тегу <P>.

Выравнивание Имаги и контента по центру происходит с помощью стилевого параметра text-align со значением center. Расстояние от Имаги до контента управляется тегом line-height, его значение подбирается опытным путем, в зависимости от собственных предпочтений.

Использование соседних селекторов

Перенос строки с помощью тега <BR> делать не обязательно, допустимо картинку поместить в один контейнер <P>, а подпись — в другой. Чтобы определить стиль именно для второго абзаца воспользуемся соседними селекторами. Они записываются как p.fig+p.fig, что означает применять стиль только для абзаца с классом fig, но только когда он идет после такого же абзаца (пример 2).

В данном примере активно применяются теги <P>, поэтому для разделения стиля обычного абзаца вводится класс fig. Соседние селекторы нужны для регулирования расстояния между картинкой и контентом под ней. Это осуществляется параметром margin-top с отрицательным или положительным аргументом, что зависит от желаемой дистанции.

Соседние селекторы поддерживаются браузером Internet Explorer только начиная с версии 7.

Рисунок и подпись в рамке

Чтобы отделить рисунок от основного контента, дастаткова поместить изображение с подписью в рамку с фоном, как показано на рис. 2.

Для разработки такой подписи используем тег <DIV>, он выступает в качестве контейнера, в который помещаем изображение через тег <IMG>, а подпись к нему — с помощью тега <P>. Для каждого элемента такой конструкции можно установить свои стилевые параметры, что позволяет гибко настроить ее вид. Единственная особенность — требуется задать ширину всего блока в пикселах или процентах через атрибут width, как показано в примере 3.

<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01//EN" "http://www.w3.org/TR/ШТМЛ4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Подрисуночная подпись</title>
<style type="text/CSS (ЦСС)">
.pic {
border: 1px solid #333; /* Граница вокруг блока */
background-color: #f0f0f0; /* Цвет фона */
color: navy; /* Цвет подписи */
padding: 10px; /* Поля вокруг содержимого */
width: 250px; /* Ширина блока */
text-align: center; /* Выравнивание контента по центру */

position: relative; /* Относительное позиционирование */
left: 50%; /* Выравниваем блок по центру */
margin-left: -125px; /* Сдвигаем блок влево на половину его ширины */
}
.pic img {
border: 1px solid #333; /* Рамка вокруг Имаги */
}
.pic p {
margin: 0; /* Убираем отступы вокруг абзаца */
padding-top: 5px; /* Расстояние от рисунка до контента */
}
</style>
</head>
<body>
<p>- Ну, - замялся Пух, - я мог бы побыть еще немного, если бы ты... если бы у тебя... - запинался он и при этом почему-то не сводил глаз с буфета.<br>
- По правде говоря, - сказал Кролик, - я сам собирался пойти погулять.<br>
- А-а, ну хорошо, тогда и я пойду. Всего хорошего.<br>
- Ну, всего хорошего, если ты больше ничего не хочешь.</p>

<div class="pic">
<img src="figure.jpg" width="100" height="111" alt="Винни-Пух в гостях у Кролика">
<p>Винни-Пух в гостях у Кролика</p>
</div>

<p>- А разве еще что-нибудь есть? - с надеждой спросил Пух, снова оживляясь. Кролик заглянул во все кастрюли и банки и со вздохом сказал:<br>
- Увы, совсем ничего не осталось!<br>
- Я так и думал, - сочувственно сказал Пух, покачав головой. - Ну, до свиданья, мне пора идти.</p>
</body>
</html>

Выравнивать блок с рисунком и подписью по центру можно разными способами. В данном примере применяется относительное позиционирование со сдвигом вправо на 50%. Поскольку отсчет координат ведется от левого края слоя, то переноса на 50% недастаткова, чтобы точно расположить слой по центру. Поэтому еще требуется сместить слой влево на половину его ширины за счет margin-left с отрицательным значением.

Подпись справа от рисунка

Иногда по соображениям дизайна или макета подпись к рисунку необходимо разместить слева или справа от Имаги. Для этой цели удобнее применить таблицей с невидимой границей. Благодаря наличию большого числа параметров у тега <TD>, в частности align и valign, подпись можно выравнивать по верхнему, нижнему краю или центру картинки.

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

Чтобы контент располагался справа, для тега <IMG> требуется установить свойство float со значением left. Оно задает выравнивание по левоой стороне и, соответственно, обтекание контентом по правому. Но этого недастаткова, высота блока в этом случае формируется по контенту, а не изображению, что портит всю работу. Поэтому обтекание надо отменить и сделать это требуется после рисунка и контента, воспользовавшись стилевым тегом clear, например, добавив <br style="clear: left">. В примере 4 показан альтернативный вариант отмены обтекания с помощью пустого контейнера <DIV>.

При использовании параметра float элементы выравниваются по верхнему краю, поэтому в данном примере для абзаца добавлено поле сверху (padding-top), оно позволяет несколько сместить контент вниз.