Реальный пиарHTMLCSS → Ссылки а-ля ячейки в HTML таблицах

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

В своё время Азат писал заметку про ссылки в ячейках в разделе 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+ (иногда, правда, с некоторыми причудливыми глюками). Согласитесь, это неплохая совместимость.


Источник: http://htmlcssjs.ru

Рекомендуем



Что такое CSS Инструкции CSS удобно хранить в виде отдельного текстового файла с расширением


Берегите зрение, товарищи! Прежде всего это касается указания в таблице стилей размеров шрифтов