Медная поляна

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

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

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

a img {vertical?align: middle;}

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

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

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

5 комментариев

dreamhelg

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

a img{

border: none;

text-decoration: none;

}

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

К примеру решить можно так:

Текст ссылки

Текст ссылки

-----------------

.block a {text-decoration: none;}

.block a span:hover {text-decoration: underline;}

ВСе же попроще и поаккуратнее будет(ИМХО) :)

Блин ссылки сожрало! :))))

< a href="" > < img src="" / > < span > тута текст ссылки!

.block a {text-decoration: none;}

.block a span:hover {text-decoration: underline;}

Спасибо, помогло. Такую же проблему решал (картинки-ссылки с 4px рамкой, при наведении цвет рамки меняется, везде было всё норм., кроме Хрома - там появлялось желтое подчеркивание из-за того, что ссылки выделялись при наведении желтым цветом фона). Ваш метод всё исправил