Заметки о вёрстке сайтов  ·  Александр Шуркаев об HTML, CSS и JavaScript (скрипты, справочники и примеры по сайтостроению)
Путь: Заметки о вёрстке сайтов  >  CSS  >  17

Ссылки а-ля ячейки в HTML таблицах

4 июля 2002 г.

Как сделать на CSS «кликабельные» вертикально и горизонтально расположенные ссылки-ячейки?

В своё время Азат писал заметку про ссылки в ячейках в разделе JavaScript. Предложенный метод, конечно, очень хорош, но недавно на своём любимом сайте anfrax.ru я столкнулся с совершенно замечательным CSS трюком, который, во-первых, в точности воспроизводит JavaScipt'овый метод, а во-вторых, очень лаконичен и красив. Странно, я встречал подобное решение (переопределение свойства display) раннее, но не принял во внимание, что оно может пригодиться и в данной ситуации…

Итак, вот, что необходимо для достижения нирваны в случаях с вертикальным и горизонтальным расположением ячеек (спасибо тов. dragster за дельные замечания):

Вариант с вертикальными ячейками:

a {
background-color:#CCCCCC;
border:2px dotted #000000;
display:block;
line-height:100%;
margin:3px;
padding:20px
}
a:hover {
background-color:#FFC0CB;
}

В итоге мы имеем следующее:

это у нас ссылкаэто у нас ссылка нумер два

Вариант с горизонтальными ячейками:

a {
background-color:#CCCCCC;
border:2px dotted #000000;
display:"inline-block"; /* кавычки необходимы, чтобы NN6 нормально воспринимал (т. е. игнорировал) нестандартное, IE'шное значение inline-block, которое правильно вписывает тег A в layout страницы (для NN6 и Opera не нашлось подобного, правильно работающего значения display) */
margin:3px;
padding:20px
}
a:hover {
background-color:#FFC0CB;
}

Получаем следующее:

это у нас ссылкаэто у нас ссылка нумер два

А можно поступить с горизонтальными ячейками по-другому, как любезно указал г-н Серега (я почему-то забыл о замечательном свойстве float):

a {
background-color:#CCCCCC;
border:2px dotted #000000;
display:block;
float:left;

margin:3px;
padding:20px
}
a:hover {
background-color:#FFC0CB;
}

В итоге мы имеем следующее:

это у нас ссылкаэто у нас ссылка нумер два


Большим плюсом использования одного из указанных методов является тот факт, что они безоговорочно работают в IE5.5+ (в IE5.0 не работают варианты с горизонтальными ячейками) и в NN6+ и Opera5+ (иногда, правда, с некоторыми причудливыми глюками). Согласитесь, это неплохая совместимость.

Хитовые статьи про разработку сайтов

Рассылка новостей и новых статей

Сообщения будут приходить пару раз в неделю, не чаще

Объявления

LiveInternet