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

Сервис обмена электронных валют

Партнерская программа Kredov

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

#1 drugoi

drugoi
  • Пользователь
  • 18 сообщений
  • Репутация: 0
0

Отправлено 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
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 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
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 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
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 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
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 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


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