Библиотека Интернет Индустрии I2R.ru

Статья взята с сайта "Заметки HTML-кодера". HTML вёрстка для умных :-) В меру регулярные заметки профессионального HTML кодера об HTML, CSS и JavaScript.

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

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

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

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

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

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

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

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

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

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

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

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