Twitter мой

Картинки в ссылках, продолжение

25 декабря 2009

Праздник на носу и оставлять что‑то недосказанным в уходящем году совершенно не хочется. В одном из предыдущих постов я начал выяснять как убрать подчеркивание (основанное на свойстве border) для ссылки, содержащей рисунок.

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

Пораскинув мозгами, обнаружил более своевременное решение, основанное на вертикальном выравнивании. Для рисунка расположенного внутри ссылки, в стилях достаточно указать

a img {vertical‑align: middle;}

вертикальное центрирование картинки в ссылке

Как видите, Firebug четко показывает, где теперь расположена область содержимого ссылки вместе с нижней рамкой. Такое поведение характерно для всех современных браузеров. Конечно, «былинные герои» верстальщиков опять в пролете. Для последних придется указывать {height:1 %;} контейнеру, в котором находится ссылка с картинкой. Хорошо, если это будет параграф <p>, как в примере. Маленькое условие — размер изображения не должен быть ниже, чем высота ссылки, в которой он расположен; в противном случае рамка будет видна.

Вот еще какая мысль посетила во время написания материала — достаточно ли будет будет курсора‑указателя, чтобы пользователь однозначно понял, что данный рисунок есть ссылка? Может, посетителю сайта нужно немножко подсказать: дополнительная надпись «кликабельно», рамка по контуру изображения с полями… Выскажитесь, не стесняйтесь.

из Раздела Верстка сайтов  

Комментариев: 2 

RSS
  1. dreamhelg (анонимно)
    1

    А если попробовать убрать подчеркивание вот таким образом:

    a img{

    border: none;

    text-decoration: none;

    }

  2. 2

    Не сработает. Правило будет применяться к рисунку, а не к ссылке. А последняя по-прежнему будет подчеркнута, поскольку где то уже объявлено (наш случай) a {border-bottom: 1px solid red; text-decoration: none; }

Вы —

Чтобы стать комментатором введите email и пароль. Напишите комментарий. В дальнейшем ваша связка email-пароль позволит вам комментировать и редактировать свои данные. Не забудьте про активацию (инструкция придет в ящик, указанный при регистрации).

Загрузите картинки