Текст за картинками
Прячем текст за картинками на случай если некто ошибётся в наименовании или переименует картинку, она не загрузится тогда будет показан текст картинки. Это одно из тестовых заданий для верстальщиков Яндекса от 2012 года.
Но тут надо уточнить вопрос по заданию с какой именно целью нужно переместить текст за картинки? Ведь есть тег alt который в случае потери адреса картинки покажет что именно было изображено.
Я сделал такой вариант при котором при случае удаления всего тега img будет, в правильном месте, отображаться текст того что здесь должно было быть.
Я специально поставил картинке единичку «safary1.png» что бы вы увидели текст который за картинкой. Конечно вам необязательно использовать таблицы в своей реализации.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<style> .dsf{ margin: 0 auto; width: 1050px; } .obertka{ width: 128px; float: left; margin: 0px 20px; background: white; } .tekst{ position: absolute; top: 90px; right: 70px; background: red; z-index: -1; } table td{ position: relative; } </style> |
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="dsf"> <table> <tr> <td><div class="obertka"><img src="img/firefox.png" alt="firefox"></div><span class="tekst">firefox</span></td> <td><div class="obertka"><img src="img/chrome.png" alt="chrome"></div><span class="tekst">chrome</span></td> <td><div class="obertka"><img src="img/ie.png" alt="ie"></div><span class="tekst">ie</span></td> <td><div class="obertka"><img src="img/opera.png" alt="opera"></div><span class="tekst">opera</span></td> <td><div class="obertka"><img src="img/safary1.png" alt="safary"></div><span class="tekst">safary</span></td> </tr> </table> </div> |
| Категория: CSS, HTML, Вёрстка
| Тэги: CSS / HTML / вёрстка
