Перейти к содержимому



Как сделать ячейку ссылкой?

#1 drugoi
drugoi
  • Неактивные
  • 18 сообщений
  • Репутация: 0
0

Обновлено 14 января 2013 - 17:07  Отправлено 13 января 2013 - 15:58

Нужно что бы вся ячейка <td> была ссылкой, а не только текст внутри.

 

 

  • 0

#2 verstaka
verstaka
  • Неактивированные
  • 6 сообщений
  • Репутация: 2

Отправлено 13 января 2013 - 20:44

http://jsfiddle.net/verstaka/Cxy58/ - сделайте ссылку блочной внутри ячейки (display: block)
  • 1

#3 yury
yury
  • Пользователь
  • 648 сообщений
  • Репутация: 195

Отправлено 14 января 2013 - 11:14

verstaka,
вопрос не такой простой, как вам кажется.
Посмотрите, что будет с вашим вариантом, если в ячейках таблицы будет различное кол-во строк текста.

Не спешите давать сырые советы.

drugoi,
если заранее известен размер ячеек таблицы, то можно пойти по пути предложенному verstaka, только с дополнением: нужно указать блочным ссылкам внутри ячеек ту же высоту, что и у ячеек таблицы).
если же высота ячеек заранее не известна, то самое простое, что мне приходит в голову — это использование js конструкции onClick:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>tst</title>
<style type="text/css">
table{border-collapse: collapse;}
table td{border:1px solid #000; cursor: pointer; padding: 0.5em; vertical-align: top;}
</style>
</head>
<body>
<table><tr>
<td onClick="window.location.href='1.htm'"><a href="1.htm">Каждый охотник</a></td>
<td onClick="window.location.href='2.htm'"><a href="2.htm">желает</a></td>
<td onClick="window.location.href='3.htm'"><a href="3.htm">знать,<br />где сидит фазан</a></td>
</tr></table>
</html>

  • 2

#4 drugoi
drugoi
    Topic Starter
  • Неактивные
  • 18 сообщений
  • Репутация: 0

Отправлено 14 января 2013 - 13:00

Высота ячеек изначально известена, но если сделать ссылку блочной, то текст становится выровненым по верхней стороне ячейки, а нужно по центру.

<html>
<head>
<style type="text/css">
a:link {
display: block;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 15px;
text-decoration: underline;
height: 50px;
padding-top: 2px;
background-color: #900;
}
</style>
</head>
<body>
<table border="0" width="100%" height="50">
<tr>
<td><a href="#">Страница1</a></td>
<td><a href="#">Страница2</a></td>
<td><a href="#">Страница3</a></td>
<td><a href="#">Страница4</a></td>
</tr>
</table>
</body>
</html>

  • 0

#5 yury
yury
  • Пользователь
  • 648 сообщений
  • Репутация: 195

Отправлено 14 января 2013 - 14:35

drugoi,
как-то так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>tst</title>
<style type="text/css">
.tbl{
  border: 0;
  width: 100%;
}
.tbl td{
  height: 50px;
  text-align: center;
}
.tbl td a{
  display: block;
  font: 15px Arial, "Nimbus Sans L", Helvetica, sans-serif;
  color: #fff;
  text-decoration: underline;
  background: #900;
  height: 50px;
  line-height: 50px;
}
</style>
</head>
<body>
<table class="tbl"><tr>
  <td><a href="#">Страница1</a></td>
  <td><a href="#">Страница2</a></td>
  <td><a href="#">Страница3</a></td>
  <td><a href="#">Страница4</a></td>
</tr></table>
</body>
</html>
Работает для случая, когда в ячейке строго одна строка, потому можно задать высоту блочной ссылке равной высоте строки ссылки, т.е. height == line-height.
В противном случае читаем статью о борьбе с вертикальным выравниванием
  • 1

#6 yury
yury
  • Пользователь
  • 648 сообщений
  • Репутация: 195

Отправлено 14 января 2013 - 15:07

Да и еще.
Судя по всему, вам требуется не таблица, а горизонтальная менюшка. В таком случае, правильнее использовать вместо таблиц списки:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>tst</title>
<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
.menu{
  list-style: none;
}
.menu li{
  float: left;
  width: 25%;
  height: 50px;
}
.menu li a{
  display: block;
  height: 50px;
  font: 15px Arial, "Nimbus Sans L", Helvetica, sans-serif;
  color: #fff;
  text-decoration: underline;
  background: #900;
  text-align: center;
  line-height: 50px;
  border: 1px solid #fff;
}
.menu li a:hover{
  color: #900;
  background: #fff;
  border: 1px solid #900;
}
</style>
</head>
<body>
<ul class="menu">
  <li><a href="#">Страница1</a></li>
  <li><a href="#">Страница2</a></li>
  <li><a href="#">Страница3</a></li>
  <li><a href="#">Страница4</a></li>
</ul>
gjhgjh
</body>
</html>

  • 1

#7 drugoi
drugoi
    Topic Starter
  • Неактивные
  • 18 сообщений
  • Репутация: 0

Отправлено 14 января 2013 - 15:52

Спасибо, то что я хотел сделать получилось. Вот только не пойму почему у менюшки сделаной списком остаётся небольшой отступ справа, а таблицей нет:
<html>
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.menu {
list-style: none;
}
.menu li {
float: left;
width: 25%;
height: 50px;
}
.menu li a {
display: block;
line-height: 50px;
font-size: 15px;
color: #FFF;
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
background-color: #900;
}
.menu li a:hover {
display: block;
line-height: 50px;
font-size: 15px;
color: #FFF;
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
background-color: #B30000;
}
td a:link {
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
font-size: 15px;
color: #FFF;
display: block;
background-repeat: repeat-x;
line-height: 50px;
background-color: #900;
}
td a:hover {
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
font-size: 15px;
color: #FFF;
display: block;
background-repeat: repeat-x;
line-height: 50px;
background-color: #B30000;
}
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<table border="0" width="100%" height="23" cellpadding="0" cellspacing="0">
<tr>
<td><a href="#">Страница1</a></td>
<td><a href="#">Страница2</a></td>
<td><a href="#">Страница3</a></td>
<td><a href="#">Страница4</a></td>
</tr>
</table>
<br>
<ul class="menu">
<li><a href="#">Страница1</a></li>
<li><a href="#">Страница2</a></li>
<li><a href="#">Страница3</a></li>
<li><a href="#">Страница4</a></li>
</ul>
</body>
</html>

  • 0

#8 yury
yury
  • Пользователь
  • 648 сообщений
  • Репутация: 195

Отправлено 14 января 2013 - 17:07

Спасибо, то что я хотел сделать получилось. Вот только не пойму почему у менюшки сделаной списком остаётся небольшой отступ справа, а таблицей нет:

Доктайп укажите. Иначе браузеры будут отображать вашу страницу в режиме совместимости, причем, у каждого браузера этот режим выглядит несколько по разному.
В моем коде доктайп такой
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Для вашего больше подходит такой
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

И у вас ошибки:
Так неправильно:
.menu li a {
display: block;
line-height: 50px;
font-size: 15px;
color: #FFF;
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
background-color: #900;
}
.menu li a:hover {
display: block;
line-height: 50px;
font-size: 15px;
color: #FFF;
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
background-color: #B30000;
}

Правильно так:
.menu li a{
  display: block;
  font: 15px Arial, "Nimbus Sans L", Helvetica, sans-serif;
  text-decoration: underline;
  color: #fff;
  height: 50px;
  line-height: 50px;
  background: #900;
}
.menu li a:hover {
  background: #B30000;
}

Т.е. указывать надо оба значения: и высоту блока и высоту строки.
Тоже самое относится и к блочным ссылкам в таблице:
неправильно
td a:link {
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
font-size: 15px;
color: #FFF;
display: block;
background-repeat: repeat-x;
line-height: 50px;
background-color: #900;
}
td a:hover {
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
font-size: 15px;
color: #FFF;
display: block;
background-repeat: repeat-x;
line-height: 50px;
background-color: #B30000;
}
правильно
td a {
  display: block;
  font: 15px Arial, "Nimbus Sans L", Helvetica, sans-serif;
  text-decoration: underline;
  color: #fff;
  height: 50px;
  line-height: 50px;
  background: #900;
}
td a:hover {
  background: #b30000;
}
помимо сказанного про высоты блока и строки
* свойство background-repeat для монотонной заливки не требуется
* свойства font-family и font-size правильнее объединить в одно — font
* правильный набор шрифтов подстановки не Arial, Helvetica, sans-serif, а Arial, "Nimbus Sans L", Helvetica, sans-serif ибо не только из под винды в инет ходят
* одинаковые свойства для просто ссылок и ссылок под курсором мыши в таблице стилей повторять не требуется, достаточно указать только то, что меняется.
* кусок CSS
body {
margin: 0px;
padding: 0px;
}
не нужен, потому что тоже самое (и даже больше: обнуляет вообще все поля и отступы на странице, а не только у тэга body) делает код в начале:
*{
  margin: 0;
  padding: 0;
}

  • 0

robot
robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Похожие темы
  Название темы Автор Статистика Последнее сообщение

Пользователь месяца
Megoydagi Megoydagi 1-й за Август
Очков активности: 30 4 темы, 8 сообщений, 1 балл репутации
Сайт: bank.net.ru
ТОП самых активных за этот месяц
  • Фотография Vmir
    #1

    Vmir
    Очков активности: 48 3 темы, 7 сообщений, 2 балла репутации

  • Фотография BLIK
    #2

    BLIK
    Очков активности: 40.5 Вне конкурса за определение пользователя месяца

  • Фотография SergiuS85
    #3

    SergiuS85
    Очков активности: 12 2 темы, 2 сообщения, 1 балл репутации

  • Фотография WGN
    #4

    WGN (worldgamenews.com)
    Очков активности: 12 1 тема, 5 сообщений, 1 балл репутации

  • Фотография Totti
    #5

    Totti
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

  • Фотография kuztoday
    #6

    kuztoday
    Очков активности: 10.5 1 тема, 4 сообщения, 1 балл репутации

  • Фотография Zevss
    #7

    Zevss (domles43.ru)
    Очков активности: 10.5 2 темы, 1 сообщение, 1 балл репутации

  • Фотография Sale_account
    #8

    Sale_account
    Очков активности: 10.5 2 темы, 1 сообщение, 1 балл репутации

  • Фотография Megoydagi
    #9

    Megoydagi (bank.net.ru)
    Очков активности: 9 Вне конкурса за определение пользователя месяца

  • Фотография mkreine
    #10

    mkreine (analiz-krovi.net)
    Очков активности: 9 1 тема, 3 сообщения, 1 балл репутации

  • Показать весь ТОП 10

Поддержите форум! =)
Топ 5 участников по репутации

Оформление форума – IPBSkins.ru