htmlbook.ru - Подрисуночная подпись

Главная страница > Статьи > Рецепты CSS > Подрисуночная подпись

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

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

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

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

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

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

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

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

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

<!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">
p.fig {
color: brown; /* Цвет текста */
font-style: italic; /* Курсивное начертание */
text-align: center; /* Выравнивание по центру */
line-height: 25px; /* Межстрочное расстояние */
}
</style>
</head>
<body>
<p class="fig">
<img src="figure.jpg" width="100" height="111" alt="Винни-Пух в гостях у Кролика"><br>
Винни-Пух в гостях у Кролика</p>
</body>
</html>

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

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

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

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

<!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">
p.fig {
text-align: center; /* Выравнивание по центру */
font-style: italic; /* Курсивное начертание */
}
p.fig img {
border: 1px solid #333; /* Рамка вокруг изображения */
}
p.fig + p.fig {
margin-top: -1em; /* Второй абзац поднимаем вверх */
}
</style>
</head>
<body>
<p class="fig"><img src="figure.jpg" width="100" height="111" alt="Винни-Пух в гостях у Кролика"></p>
<p class="fig">Винни-Пух в гостях у Кролика</p>
</body>
</html>

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

Замечание

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

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

Чтобы отделить рисунок от основного текста, достаточно поместить изображение с подписью в рамку с фоном, как показано на рис. 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: 0px; /* Убираем отступы вокруг абзаца */
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. Подпись справа от рисунка

<!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; /* Ширина блока */
}
.pic img {
border: 1px solid #333; /* Рамка вокруг изображения */
float: left; /* Обтекание по правому краю */
margin-right: 7px; /* Расстояние между рисунком и текстом */
}
.pic p {
margin: 0px; /* Убираем отступы вокруг абзаца */
padding-top: 20px; /* Поле сверху */
}
.pic div {
clear: left; /* Отменяем обтекание */
}
</style>
</head>
<body>
<div class="pic">
<img src="figure.jpg" width="100" height="111" alt="Винни-Пух в гостях у Кролика">
<p>Винни-Пух в гостях у Кролика</p>
<div></div>
</div>
</body>
</html>

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

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

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

Статья опубликована: 05.02.2007 | Последнее обновление: 05.02.2007

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

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 и т. д. (вместо _ следует писать слеш

LD

14.03.2007

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

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

15.03.2007

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

Deonis

18.03.2007

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

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

Имя
Комментарий

Сохранить имя (используется cookie)

Copyright © 2002–2007 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru

О сайте | Планы на будущее | Использование сайта | Борьба с ошибками | Технологии