Как сверстать синхронное выделение ссылки и картинки
Довольно давно у Горбунова был совет о вёрстке синхронного выделения картинки и ссылки. Артём Поликарпов тогда уж больно мудрёно насоветовал: спозиционировать картинку абсолютом, а оборачивающему тегу сделать сверху отступ, равный высоте картинки. Последнее свойство можно использовать, когда все картинки у тебя одного размера, но так бывает далеко не всегда. А вёрстка должна быть универсальной и не разваливаться при загрузке нового контента.
Другие советчики предложили завернуть и текст, и картинку в ссылку и не париться. Вот такой метод я и решила опробовать.
Разметка
href="">
ome text
lt;br>
lt;img src="img/application.png" alt="1mebel1" >
Хочу обратить внимание на тег
. Я не сильно люблю его использовать. Но здесь именно такой случай, когда он вполне уместен. Его основное значение - перенос строки. А когда его ставят 100500+ раз, чтобы увеличить отступы между блоками, - это костыли.
Без него здесь два строчных элемента - текст и картинка - встанут в ряд, а нам такого не нужно.
Стили
a:hover {
nbsp; color: green;
}
a img {
nbsp; border: 1px solid transparent;
}
/*нужен, чтобы картинка не прыгала при наведении на 1рх бордера*/
a:hover img {
nbsp; border: 1px solid green;
}
Результат - 4ый пункт на страничке моих экспериментов.