Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > display:block действует только на одну ячейку

Автор: Wowa 27.9.2004, 03:16

Есть таблица, состоит из 10 строк. В строках находятся ссылки, чтобы ссылкой являлась вся ячейка, а не только текст написанный в ней я применяю свойство display:block

Это помогает, но как выяснилось только для первой ячейки. В остальных ячейках(строках) почему-то ссылкой является только текст.

Автор: Gold Dragon 27.9.2004, 08:07

Не совсем понял при чём здесь display:block

Может это подойдёт

Код

<table border="1" width="400">
<tr>
<td onmouseover="style.cursor='hand'" onclick="location.href='http://yandex.ru'">тексе 1</td>
<td onmouseover="style.cursor='hand'" onclick="location.href='http://rambler.ru'">текст 2</td>
<td onmouseover="style.cursor='hand'" onclick="location.href='http://aport.ru'">текст 3</td>
<td onmouseover="style.cursor='hand'" onclick="location.href='http://vodka.h11.ru'">текст 4</td>
</tr>
...
</table>

Автор: Wowa 27.9.2004, 14:16

Цитата(Red @ 27.9.2004, 07:07)

Может это подойдёт

нет, т.к. в этом случае нельзя открыть ссылку в новом окне(через правую кнопку мыши)

Автор: Wowa 27.9.2004, 14:26

При добавлении к display:block еще WIDTH: 100%; - начинает работать.

Автор: Gold Dragon 27.9.2004, 14:27

Интересный вопрос получается, как то не подумал.. А внутри ячейки именно текст?

Автор: Се ля ви 27.9.2004, 16:06

В експлорере у ссылок есть стилевое свойство "width", которое можно задавать процентами, но в мазилле это не катит.

Поидее можно тегом "а" облепить снаружи теги ячейки, но мозилла тоже не поймёт, по-моему...

Я бы предложил такую конструкцию: прозрачный однопиксельный гиф растягиваешь по ширине ячейки, и его делаешь ссылкой, а текст ставишь вначале (перед растянутой прозрачной картинкой), обрамляя его div`ом со значением стиля "position: absolute;" - это зафиксирует его и одновременно не повлияет на ширину ячейки. Но тогда придётся следить за размером ячейки самому, регулируя ширину картинки - чтобы надпись не наехала на границы и другие ячейки. Текст тоже надо сделать ссылкой, а то при попадании а него курсор может обратно стать текстовым. Или вообще ещё лучше - всё содержимое ячейки включить внутрь одной ссылки - и картинку, и абсолютный слой с текстом.

Криво, канешь, но по крайней мере вариант. Больше пока придумать ничего не могу.

P.S. После картинки перед закрывающим тегом ячейки нужно будет поставить <br /> во избежание неприятностей, об этом я писал раньше...

Автор: Alx 27.9.2004, 21:12

Цитата

<td onmouseover="style.cursor='hand'" onclick="location.href='http://yandex.ru'">тексе 1</td>

Зачем это? просто style="cursor:hand;"...

да, странная проблема... надо будет подумать на досуге...
Добавлено @ 21:14
ну, уж если прижмёт, то можно нарисовать выпадающую менюшку, как в браузере, где будет пункт "открыть", а его выполнять уже через window.open()

Автор: Aliance 27.9.2004, 21:29

ALEXANDRO

Цитата(ALEXANDRO @ 27.9.2004, 21:12)

Зачем это? просто style="cursor:hand;"...

Цитата(Admin @ 27.9.2004, 14:16)

нет, т.к. в этом случае нельзя открыть ссылку в новом окне

Обязательно через правую кнопку мыши? Можно ведь по умолчанию поставить открытие в новом окне...

Автор: Wowa 28.9.2004, 02:04

Цитата(Aliance @ 27.9.2004, 20:29)

Обязательно через правую кнопку мыши?

Да, страницы должна иметь нормальную функциональность.

Цитата(Aliance @ 27.9.2004, 20:29)

Можно ведь по умолчанию поставить открытие в новом окне...

Далеко не всегда это подходит. Представьте себе, если бы на форуме каждая ссылка в новом окне открывалась бы.

Автор: Gold Dragon 28.9.2004, 08:23

Может отталкиваться от сюда

Код

<table width="400" border="1">
<tr>
<td><a href="http://yandex.ru"><table width="100%"><tr><td>Текст 1</td></tr></table></a></td>
<td><a href="http://rambler.ru"><table width="100%"><tr><td>Текст 2</td></tr></table></a></td>
<td><a href="http://aport.ru"><table width="100%"><tr><td>Текст 3</td></tr></table></a></td>
<td><a href="http://vodka.h11.ru"><table width="100%"><tr><td>Текст 4</td></tr></table></a></td>
</tr>
</table>

В строке состояния показывается куда указана ссылка, но перехода нет. Может это и не правильно.

Цитата(ALEXANDRO @ 27.9.2004, 22:12)

Зачем это? просто style="cursor:hand;"...

У меня MyIE2, так не работает.

Автор: Aliance 28.9.2004, 14:31

Цитата(Admin @ 28.9.2004, 02:04)

Далеко не всегда это подходит. Представьте себе, если бы на форуме каждая ссылка в новом окне открывалась бы.

Я имел ввиду с помощью сценария на странице, только опр. группу ссылок.

Автор: dm9 28.9.2004, 18:08

Работает: Опера, ИЕ.
НЕ работает: NN (там обычные ссылки).

Код

<html>
<head>
<style>
body {
	font-family: Verdana;
	font-size: 16;
	text-decoration: none;
}
a {
	text-decoration: none;
	color: #004075;
	width: 250; 
	height: 50;
}

a:hover {
	color: #E37B26;
}

td {
	width: 250;
	height: 50;
}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
	<tr>
  <td>
  	<a href="#">qwe</a>
  </td>
  <td>
  	<a href="#">rty</a>
  </td>
	</tr>
	<tr>
  <td>
  	<a href="#">uio</a>
  </td>
  <td>
  	<a href="#">asd</a>
  </td>
	</tr>
</table>
</body>
</html>

Примечание:
a {
text-decoration: none;
color: #004075;
width: 250; <-- Здесь можно поставить просто 100%
height: 50; <-- Здесь для Оперы надо ставить размер явно (попробуйте)
}
Добавлено @ 18:12
Сейчас увидел, что Се ля ви говорил о том, что я использовал, ну да ладно

Автор: dm9 28.9.2004, 19:07

Вот, сделал

Работает в Опере, ИЕ, НН.
Только чтоя понял, что совершенно не знаю css.
Как, например, cellpadding сделать нулевым?
Ещё вопрос знтокам css. Можно ли здесь обойтись без JavaScript? Чую, что можно

Код

<html>
<head>
<style>
body {
	font-family: Verdana;
	font-size: 16;
	text-decoration: none;
}

a {
	text-decoration: none;
}

table.auxtable {
	width: 200;
	height: 50;
	border-spacing: 0;
}

.supertext {
	text-decoration: none;
	color: #004075;
}

</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" class="bigtable">
	<tr>
  <td>
  	<a href="#">
    <table class="auxtable">
    	<tr>
      <td class="supertext" onmouseover="this.style.color='#E37B26'"
      	onmouseout="this.style.color='#004075'">
      	qwe
      </td>
    	</tr>
    </table>
  	</a>
  </td>
  <td>
  	<a href="#">
    <table class="auxtable">
    	<tr>
      <td class="supertext" onmouseover="this.style.color='#E37B26'"
      	onmouseout="this.style.color='#004075'">
      	rty
      </td>
    	</tr>
    </table>
  	</a>
  </td>
	</tr>
	<tr>
  <td>
  	<a href="#">
    <table class="auxtable">
    	<tr>
      <td class="supertext" onmouseover="this.style.color='#E37B26'"
      	onmouseout="this.style.color='#004075'">
      	uio
      </td>
    	</tr>
    </table>
  	</a>
  </td>
  <td>
  	<a href="#">
    <table class="auxtable">
    	<tr>
      <td class="supertext" onmouseover="this.style.color='#E37B26'"
      	onmouseout="this.style.color='#004075'">
      	asd
      </td>
    	</tr>
    </table>
  	</a>
  </td>
	</tr>
</table>
</body>
</html>

Добавлено @ 19:10
Совет: проверяйте код при внесении изменений во всех трёх браузерах

Автор: Aliance 29.9.2004, 15:04

Цитата(dm9 @ 28.9.2004, 19:07)

Как, например, cellpadding сделать нулевым?

В CSS`е - padding: 0;

Автор: dm9 29.9.2004, 17:26

Ни фига, <table cellpadding="0"> изменяет представление таблицы, а если я добавляю padding: 0 в стиль таблицы, то ничего не меняется. Проверял в Опере.
Добавлено @ 17:31
Тьфу, я ошибся. Только что попробовал, Опера и НН работают с моим кодом, а explorer показывает ссылки, но не открывает их. Идиотизм какой-то. Сегодня ещё подумаю.

Автор: Се ля ви 2.10.2004, 14:54

Кароче, есть способ проще: для Оперы и Мазиллы нужно внутри тега "а" текст ссылки включить внутрь тега "div" без параметров, а для IE - задать стиль для этой ссылки - "width: 100%".

Вобщем, такой код будет работать везде и делать то, что нужно:

Код

<table><tr>
<td><a href="/" style="width: 100%"><div>текст ссылки</div></a></td>
</tr></table>

Демонстрация - (на выпадающем меню) http://trespass.sabotag.ru/dealer/

P.S. можно не критиковать - там всё пока в разработке, а дизайн - видно по подписи, что даже не наш...

Автор: Wowa 2.10.2004, 15:05

Насчет Мозиллы не знаю, но в Opera и Fireworks работает даже без div

Автор: Gold Dragon 2.10.2004, 17:17

Лучше использовать <div> - это типа куска кода который работает внутри <div> не зависимо от внешних ...

Автор: Wowa 3.10.2004, 02:41

Цитата(Red @ 2.10.2004, 16:17)

не зависимо от внешних ...

от внешних чего?

Автор: Gold Dragon 3.10.2004, 08:35

Ну в смысле структура в структуре. Между <div> и </div> ведь можно влипить не только строчку, но и форматированный абзац, и здесь <div> лучше. И здесь <div> занимает объём ячейки, а текст может не полностью занимать..

Добавлено @ 08:36

Ну я и сказанул

Автор: Wowa 3.10.2004, 11:58

Понятно. Тогда по идее style="width: 100%" не нужен?

Автор: Gold Dragon 3.10.2004, 12:23

Цитата(Admin @ 3.10.2004, 12:58)

Тогда по идее style="width: 100%" не нужен?

Все браузеры по разному понимают "по умлчанию". Я пришёл к выводу, что лучше прописать ещё раз, чтоб уж везде работал