Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Создание меню


Автор: _Developer_ 22.2.2008, 08:10
Есть меню следующего вида:
user posted image
Мой код:
Код

<table class="menu">
            <tr align="center">
                <td><a class="menuRef" href="" ><span class="menuItem">Hardware</span></a></td>
                    <td class="menuDivider" />
                <td><a class="menuRef" href="" ><span class="menuItem">Software</span></a></td>


Код

table.menu{
height : 38px;
width  : 100%;
background-image : url(../img/menu.jpg);
}

td.menuDivider{
 width : 4px;
 background-image : url(../img/menuDivider.jpg);
}
and so on

Все нормально, только указатель меняется на лапу(указатель ссылки), только при непосредственном наведении на надпись(что вообщем естественно).
Как сделать так, чтобы вся ячейка была ссылкой, т.е. при щелчке на любое место ячейки, осуществлялся переход по указанной ссылке.


Автор: Itsys 22.2.2008, 08:18
В этом случае надо использовать слой поверх ячейки с прозрачным изображением, растянутым на всю ячейку, которое и будет ссылкой.

По моему проще повесить обработчик onClick на ячейку - работать будет, но на лапу меняться не будет (так даже приконее - получается, что это не ссылка а кнопка.

Автор: _Developer_ 22.2.2008, 08:26
Цитата(Itsys @  22.2.2008,  08:18 Найти цитируемый пост)
В этом случае надо использовать слой поверх ячейки с прозрачным изображением, растянутым на всю ячейку, которое и будет ссылкой.

А можно пример, а то я не совсем понял?

Автор: NDenis 22.2.2008, 09:52
1. меню это список ссылок и никак не таблица
2. растянуть ссылку на 100% высоты ячейки => height:100%;

Автор: bars80080 22.2.2008, 10:35
Код

a { display: block; width: 100%; height: 100%; }

почти тоже что и NDenis

а чтобы лапу сделать в любом месте, добавь:
Код

/*тэг*/ { cursor: hand; }

Автор: _Developer_ 22.2.2008, 12:25
Спасибо, помогло!

Автор: SelenIT 22.2.2008, 21:14
bars80080, только не hand (который IE-only), а pointer (который везде, кроме вымершего IE5).

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)