Подрисуночная подпись

Влад Мержевич

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

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

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

Рис. 1

Рис. 1. Вид подрисуночной подписи

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

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

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

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

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

Пример 2. Соседние селекторы

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

Замечание

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

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

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

Рис. 2

Рис. 2. Вид подрисуночной подписи в рамке

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

Пример 3. Подпись под рисунком в рамке

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<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>.

Пример 4. Подпись справа от рисунка

Результат данного примера показан на рис. 3.

Рис. 3

Рис. 3. Подпись справа от изображения

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

Статья опубликована: 05.02.2007

Последнее обновление: 04.04.2008

Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.

Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
Потренироваться в написании комментариев вы можете в песочнице.

Комментарии к статье

HiltoN

06.02.2007

Я использовал следующую таблицу стилей для создания рисунков с подрисуночными подписями и <врезок>:

img { border:none; margin:0.5em 0; padding:0; }
.pic-l img, .pic-r img { display:block; }
.pic img { display:inline; vertical-align:top; }
.pic, .pic-l, .pic-r, .ins, .ins-l, .ins-r { margin:0.5em 0; text-align:center; }
.pic { margin:1em 0; }
.ins { margin:1em 0; padding:0.5em 1em; background:#f5f5ea; }
.ins-l, .ins-r { padding:0.8em 1em 0.4em; background:#f5f5ea; width:20em; }
img.left, .pic-l, .ins-l { float:left; margin-right:1em; }
img.right, .pic-r, .ins-r { float:right; margin-left:1em; }
.pic p, .pic-l p, .pic-r p { font-size:90%; font-style:italic; }
.pic p { text-align:center; }
.pic-r p { text-align:right; }
.ins p, .ins-l p, .ins-r p { font-size:100%; font-style:normal; font-weight:normal; text-align:left; }
.ins .pic-r, .ins .pic-l { margin:0; }

Например:
<div class="pic-r" style="width:200px"><img src="image.jpg" /><p>Подпись</p></div>

Мне показался такой способ очень простым и удобным. Результаты можно посмотреть, к примеру, здесь:

e-hil.info opicarchive17928index.html
e-hil.info opicarchive15547index.html
e-hil.info opicarchive18927index.html
e-hil.info opicdiet91index.html

HiltoN

06.02.2007

Извините, в предыдущем сообщении слеши и кое-какие буквы вырезало: e-hil.info_topic_archive_17928_index.html и т. д. (вместо _ следует писать слеш

14.03.2007

Эх, еще бы какой скрипт в CSS чтобы текст из alt у картинки вытаскивал и справа его выставлял, было бы вообще супер.

Влад Мержевич

15.03.2007

В CSS таких скриптов ты не найдешь. А вот на каком-нибудь PHP это вполне возможно.

Deonis

18.03.2007

Думаю, вс?-таки на JS это получше будет...
вот здесь подобное видел: http://htmlcoder.visions.ru/JavaScript/?11

Виталий

05.08.2007

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

Влад Мержевич

09.08.2007

Это не повторения, вложенный DIV нужен, чтобы рамка по высоте равнялась высоте картинки. Без дополнительных тегов получится некрасиво.

Lev

05.10.2007

>Эх, еще бы какой скрипт в CSS чтобы текст из alt у картинки >вытаскивал и справа его выставлял, было бы вообще супер.
Можно написать соответсвующие сниппеты для textmate (mac os), intype (win).

shopox

04.02.2008

а заместо пустого дива можно к классу .pic прицепить overflow:auto

ариэль

05.03.2008

Батюшки а у меня одни закарючки ...видно всего адрес кому отвечать.

dreamer:viipru@mail

23.03.2008

спешу поделиться своими результатами исследования.
У меня заработал такой код (2 картинки с текстом в 1 линию)
одинаково смотрится и в FF и в злосчастном IE7:
<code>
br {clear:both;}
p.pic{
vertical-align: bottom;
text-align: center;
width:150px;
float:left;
margin:2px;/*л?гкий отступ*/
display:-moz-inline-stack;/*Нужно для Firefox*/
display:inline-block; /*Не применяется в IE и Firefox*/
_overflow:hidden;/*фикс для IE6*/
zoom:1;/*включаем hasLayout*/
*display:inline;/*при hasLayout true display:inline вед?т себя как display:inline-block*/
}
<p class=pic><img align=left src=img1.gif><br> 1 картинка</p>
<p class=pic><img align=left src=img2.gif><br> 2 картинка</p>
</code>

shopox

26.03.2008

<br /> - зло.

Михаил Червоненко

19.05.2008

Следовало упомянуть что подрисуночная подпись имеет большое значение для позиции сайта на поисковиках. В тему подписанные картинки (через Alt="подпись") повысят рейтинг Вашего сайта на поисковиках.

img { border:none; m

05.06.2008

img { border:none; margin:0.5em 0; padding:0; }
.pic-l img, .pic-r img { display:block; }
.pic img { display:inline; vertical-align:top; }
.pic, .pic-l, .pic-r, .ins, .ins-l, .ins-r { margin:0.5em 0; text-align:center; }
.pic { margin:1em 0; }
.ins { margin:1em 0; padding:0.5em 1em; background:#f5f5ea; }
.ins-l, .ins-r { padding:0.8em 1em 0.4em; background:#f5f5ea; width:20em; }
img.left, .pic-l, .ins-l { float:left; margin-right:1em; }
img.right, .pic-r, .ins-r { float:right; margin-left:1em; }
.pic p, .pic-l p, .pic-r p { font-size:90%; font-style:italic; }
.pic p { text-align:center; }
.pic-r p { text-align:right; }
.ins p, .ins-l p, .ins-r p { font-size:100%; font-style:normal; font-weight:normal; text-align:left; }
.ins .pic-r, .ins .pic-l { margin:0; }

img { border:none; m

05.06.2008

Блендер

18.06.2008

Скрипт коммерческой доски объявлений Elite-Board 1.2
Сайт производителя: www.illusionweb.ru
Цена производителя: 90$
Обновление: 20 марта 2008 года.
Качаем тут:http://slil.ru/25379396

ICQ:96-49-82

Подрисуночная подпись

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

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

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

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

Комментарии к статье

Добавить комментарий