CSS: Делаем подписи к картинкам
2 комментария 16 сентября 2005, 12:04 • CSS, UA, Дизайн
Восхотелось мне вчера в очередной раз странного – пожелал иметь на вебстраницах оформление статей, схожее с их полиграфическими аналогами, к примеру, журнальными. Естественно мне восхотелось поиметь толковое описание к картинкам (т.е. «классические» подписи под изображениями) и при этом желательно без использования костылей. Поставленную вчера перед самим собой задачу я решил, но... Впрочем, давайте по-порядку.
Идея
Идея весьма простая: надо каким-то образом содержимое атрибута title – который и выполняет роль пояснения или подписи – изображений помещать под изображения. При этом желательно обойтись средствами только CSS.
С применением JavaScript задача решается проще, но мне хотелось именно «чистого решения» задачи.
Решение
Вначале я попытался поиграть с позиционированием именно title-атрибута элемента img и у меня естественно ничего не вышло. Зато при этом обнаружил одну интересную странность в работе CSS-конструкций вида element [attribut]{ набор свойств }, о которой я расскажу в другой раз.
Этот «обускураживающий» факт меня не остановил и дал толчок к более внимательному ознакомлению со спецификацией CSS 2. В ней я с удивлением обнаружил, что «все уже придумано до нас» – © не помню чей. Есть такое замечательное свойство content, которое как раз и делает то, что мне нужно.
Итак, в теле web-страницы изображаем элементарное подключение картинки без каких-либо костылей и подпорок:
<img src="rover.jpg" width="280" height="209" title="Rover на поверхности Марса." class="desc" />
В CSS описываем поведение этой картинки:
img.desc {
display: block;
counter-increment: pic-num;
text-align: justify;
margin: 5px;
padding: 5px;
border: 1px solid #666;
background-color: #dcdcdc;
float: left;
}
img.desc:after {
content: "Рис. " counter(pic-num) ". " attr(title);
display: block;
font-size: 8pt;
font-family: Georgia;
}
В результате мы получили то, что вы видите на рисунке снизу. Непорядок!
Самое интересное, что если у изображения убрать атрибуты width и height, то картина существенно меняется.
Странно... А что будет, если описание будет больше ширины картинки?
Кхм... Добавляем к img.desc:after дополнительное свойство width: 280px; – ширину картинки – и все становится намного симпатичнее.
Вроде бы нужно кричать "ура, мы победили! ", но... вас ждет горькое разочарование – content-свойство поддерживается только браузером Opera. Получается, что все пользователи IE и Gecko-браузеров пролетают как фанерка над Парижем :(.
Делаем костыли
Для того, чтобы у всех зашедших подписи у картинок были необходимы костыли – к сожалению без них обойтись не получилось. В web-страничке изображаем костыль:
<div class="wrap"><img src="03rover3.gif" width="280" height="209" title="Rover на поверхности Марса. "/><span>Подпись картинки с костылями :( Теперь проверка на очень длинный комментарий-описание :)</span></div>
В CSS-файле «рисуем» такое:
.wrap {
float: left;
width: 280px;
margin: 5px;
padding: 15px 15px 0 15px;
background: #F5B404 url(top-left.gif) top left no-repeat;
}
.wrap span {
float: left;
display: block;
text-align: justify;
width: 100%;
font-size: 8pt;
font-family: Georgia;
padding-bottom: 15px;
padding-right: 15px;
margin-right: -15px;
background: transparent url(bottom-right.gif) bottom right no-repeat;
}
* html .wrap span {
padding-top: 5px;
}
И в результате получаем в IE6, FF, Opera & Safari такую картинку:
Достаточно симпатично получилось, хотя над внешним видом еще можно поработать...
Выводы
К сожалению подписи к картинкам возможно сделать только при помощи дополнительных манипуляций, т.к. поддержка штатных средств CSS для организации подписей в большинстве браузеров отсутствует.
Кстати, может кто предложит более красивое решение?
P.S. Копия опубликована в моем блоге «Заметки на полях...»
Тош • 6 апреля 2011 г. в 15:39 edit_comment_link(__('Edit', 'sandbox'), ' ', ''); ?>
Ну дак, весь смысл этого теряется, когда вы ставите обертке width: 280px.
Все, универсальности нет, будет картинка размером 100 пикселей и все будет плохо.
начиная читать статью, я думал будет крутой универсальный метод, а в итоге мы получили статью «Как сверстать картинки и фразу под эту конкретную картинку».
Где то находил в сети универсальное решение, но счас найти не получается. Найду — кину сюда ссыль.
Александр Вольф • 6 апреля 2011 г. в 16:15 edit_comment_link(__('Edit', 'sandbox'), ' ', ''); ?>
Статья писалась 6 лет назад и с тех пор многое поменялось. Тогда это был практически единственный вариант, сейчас — уже нет.