Подрисуночная подпись - Форум
( Новые сообщения ·Правила форума ·Поиск ·RSS )
Страница 1 из 11
Модератор форума: Ezhik 
Форум » Статьи о CSS » Рецепты CSS » Подрисуночная подпись
Подрисуночная подпись
EvgenyДата: Четверг, 25.02.2010, 20:12 | Сообщение # 1
Контр-Адмирал
Группа: Администраторы
Сообщений: 287
Статус:
Подрисуночная подпись — текст, являющийся названием рисунка, комментарием к нему или описанием изображения. Такая подпись важна, поскольку привлекает внимание читателя к рисунку и дает больше информации об изображении. У тега < IMG> существует, конечно, параметр title, который задает текст подсказки, но чтобы ее получить приходится наводить курсор мыши на каждый рисунок, что довольно неудобно. Более наглядный способ и соответственно более предпочтительный заключается в размещении подрисуночной подписи возле самого изображения. Подпись хоть и называется подрисуночной, но может располагаться и сбоку от рисунка, если это продиктовано соображениями верстки и дизайна.

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

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


[small]Рис. 1. Вид подрисуночной подписи[/small]

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

[small]Пример 1. Подпись под рисунком[/small]

Code
<!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: #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).

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

Code
<!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 с отрицательным или положительным аргументом, что зависит от желаемой дистанции.

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

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

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


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

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

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

Code
<!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>.

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

Code
<!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: 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.


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

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

 
Форум » Статьи о CSS » Рецепты CSS » Подрисуночная подпись
Страница 1 из 11
Поиск:

Статистика Форума
Уважаемые пользователи
Популярные темы
Недавно обновленные темы
Evgeny Репутация [ 122 ]
akkemir22 Репутация [ 113 ]
Kuks64 Репутация [ 49 ]
Gavrik Репутация [ 48 ]
Anatoliy03 Репутация [ 37 ]
MiRel Репутация [ 33 ]
hius Репутация [ 23 ]
mVizio Репутация [ 19 ]
ewa69 Репутация [ 16 ]
straik67 Репутация [ 14 ]
Прочие [ 10 ]
О програмистах и Веб-Мастерах [ 6 ]
Про детей [ 6 ]
Про автомобилистов [ 5 ]
Про женщин [ 3 ]
Блондинка сдает на права ! (МЕГА ЖЕСТЬ) [ 2 ]
Про новых русских [ 2 ]
ВАЗ-2107 1000 лошадей [ 2 ]
Новый вид ББ-кодов на вашем сайте [ 2 ]
Про компьютеры [ 1 ]
Игры на телефон бесплатно [ 0 ]
Лучшее онлайн казино. Как обыграть казино? [ 0 ]
Инвест-Проект. Прибыль каждые 5 мин. [ 1 ]
Финансовая Взаимопомощь. Каждые 24ч получаете % [ 0 ]
Играть и зарабатывать онлайн [ 0 ]
Новый Топ пользователей с аватарами для Ucoz [ 0 ]
Простой и красивый вид формы опроса [ 0 ]
Красивый информер "кто нас сегодня посетил" для Ucoz [ 0 ]
Flash радио для сайта [ 0 ]
Заработок на играх [ 0 ]