www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > FAQ CSS (ЦСС) > Подрисуночная подпись

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

контентовая версия  

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

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

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

Рис. 1

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

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

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

Валидный HTML
Валидный CSS

<!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=windows-1251">
<title>Подрисуночная подпись</title>
<style type="text/CSS (ЦСС)">
p.fig {
 color: #800000; /* Цвет контента */
 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. Соседние селекторы

Валидный HTML
Валидный CSS

<!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=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

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

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

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

Валидный HTML
Валидный CSS

<!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=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. Подпись справа от рисунка

Валидный HTML
Валидный CSS

<!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=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: 0; /* Убираем отступы вокруг абзаца */
 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

Рис. 3. Подпись справа от Имаги

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

Статья опубликована: 05.02.2009 Последнее обновление: 04.04.2009
Поиск по сайту
FAQ CSS (ЦСС)
Разделы
Теги по теме

DIV
Элемент DIV является блочным элементом и предназначен для выделения фрагмента объекта с целью изменения вида содержимого.

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

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

CSS (ЦСС) по теме

background-color
Устанавливает фоновый цвет элемента.

border
Параметр позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

clear
Параметр устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено обтекание элемента с помощью параметра float, свойство clear отменяет его действие для указанных сторон.

float
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.

line-height
Устанавливает интерлиньяж (межстрочный интервал) контента, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически.

margin-top
Устанавливает величину отступа от верхнего края элемента.

text-align
Определяет горизонтальное выравнивание контента в пределах элемента.

width
Устанавливает ширину блочных или заменяемых элементов. Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект