Абсолютное позиционирование div в td - как в ИЕ? - Веб-строительство - Сайтостроение

47

lazio

8 октября 2008, 17:30

7223

Вобщем-то сегодня столкнулся со следующей проблемой, есть таблица состоящая из n-го колличества строк и столбцов. В некоторых ячейках есть ссылка-подсказка, т.е. при клике на нее, появляется блок с текстом, который до клика имеет свойство display:none и находится с ячейке таблицы вместе с ссылкой. Ячейки имеют свойство position:relative, и блоки внутри position:absolute, логично было бы что бы браузеры позиционировали блок относительно ячейки, но ИЕ сукин сын не хочет... у меня не получилось расположить div поверх ячейки, что бы он был впереди всей таблицы, а так получается его видно только в области одной ячейки... кароч, если я плохо объяснил, код:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

<style>

	td {

		position:relative;

		background:#FFF;

		height:25px;

	}

	div {

		width:300px;

		height:300px;

		position:absolute;

		left:0;

		top:0;

		background:#FF0000;

	}

</style>

</head>



<body>

<table width="100%" border="1" cellpadding="0">

  <tr>

    <td>

		<a href="/">ссылка</a>

		<div> текст </div>

	</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

</table>



</body>

</html>

прошу посмотреть в ие и опере, к примеру, все станет понятно =) нужно что бы было как в опере.

Жду помощи профи, спс...

COMFI - Начни Зарабатывать! (http://affiliate.comfi.ru/a2/466735/Program-Overview)

46

drima

9 октября 2008, 02:49

#1

Если я правильно понял идею, то лучше отказаться от позиционирования ячейки, а просто внутрь нее вставить относительно позиционированный блок с ссылкой, а уже в этот блок вставить абсолютно позиционированный блок с текстом. Ну, и задать этим блокам соответстующее положение в стеке (посредством z-index). Примерно так:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
	div.container {
		position:relative;
		background:#FFF;
		height:25px;
		z-index:1;
	}
	div.layer {
		width:300px;
		height:300px;
		position:absolute;
		left:0px;
		top:0px;
		background:#FF0000;
		z-index:2;
	}

	table {
		display:block;
	}

</style>
</head>

<body>
<table width="100%" border="1" cellpadding="0">
<tr>
<td>
<div class="container"><a href="/">link</a>
<div class="layer">text</div>
</div>
</td>
<td>another text</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<div class="container"><a href="/">link</a>
<div class="layer">text</div>
</td>
</tr>
</table>

</body>
</html>

Работает в FF 3, Opera 9, IE7.

P.S. Можно, конечно, поизвращаться и с относительным позиционированием табличной ячейки - если мотивируете такой моветон :)

No future 4 me

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие

480

inetessentials

9 октября 2008, 02:58

#2

эхх, господа извращенцы, забудьте про таблицы и юзайте дивы и будет вам счастье

Продвигаем естественно (http://www.inetessentials.ru/) и непринужденно Проект All in Top (http://www.allintop.ru/) - обучение поисковой оптимизации без воды и на реальных примерах

46

drima

9 октября 2008, 03:03

#3

inetessentials:
эхх, господа извращенцы, забудьте про таблицы и юзайте дивы и будет вам счастье

я думаю, применение таблицы не исключается и в блочной верстке, когда там именно таблица :) то есть, с рядами и колонками типа excel (прайс, к примеру, в котором ТС захотел сделать выскакивающие на посетителя справочные "окна"). но вот позиционировать ячейку внутри таблицы - это действительно только для юношей/девушек с неуемной энергией

480

inetessentials

9 октября 2008, 03:07

#4

drima:
я думаю, применение таблицы может быть оправдано: возможно, там именно таблица :) то есть, с рядами и колонками типа excel (прайс, к примеру, в котором ТС захотел сделать выскакивающие на посетителя справочные "окна"). но вот позиционировать ячейку внутри таблицы - это действительно только для юношей с неуемной энергией

дык тут ситуация явно для извращенцефф

46

drima

9 октября 2008, 03:10

#5

inetessentials:
дык тут ситуация явно для извращенцефф

не факт, просто ТС умолчал о перспективах применения этой технологии :) полагаю, без ajax или хотя бы просто javascript тут не обойдется

480

inetessentials

9 октября 2008, 03:12

#6

drima:
не факт, просто ТС умолчал о перспективах применения этой технологии :) полагаю, без ajax или хотя бы просто javascript тут не обойдется

не.. явно технология извращенца.. зачем такое делать не понимаю

46

drima

9 октября 2008, 03:19

#7

inetessentials:
не.. явно технология извращенца.. зачем такое делать не понимаю

ну, вот нужно, допустим, сделать большую таблицу. все равно какую. прайс или не прайс - не важно.

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

существует такая фишка: справочные окна, которые появляются при наведении на ссылку и исчезают при наступлении другого события. эти окна можно делать в абсолютно позиционированных слоях, у которых до наступления события onMouseClick/onMouseOver свойство display:none. Кликнул/навел юзер мышу на ссылку - высветилась справка. зачем? - экономия места и отсутствие прокрутки.

я бы, пожалуй, иначе реализовал: кликаешь на ссылку - раздвигается ячейка с полным описанием. ajax, типа. но если человек считает, что справочные окна круче, то почему нет?

нет здесь никакого антагонизма между блочной и табличной версткой. не в этом случае.

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие

480

inetessentials

9 октября 2008, 03:21

#8

drima:
я бы, пожалуй, иначе реализовал: кликаешь на ссылку - раздвигается ячейка с полным описанием. ajax, типа. но если человек считает, что справочные окна круче, то почему нет?

нет здесь никакого антагонизма между блочной и табличной версткой. не в этом случае.

эээ.. тут цсс рулит со страшной :) и аяксу не нуна

46

drima

9 октября 2008, 03:26

#9

inetessentials, охота вам спорить в половине восьмого утра? :) на голимом css делать - значит, вся инфа целиком - даже еще не затребованная - будет загружаться сразу вся, а выводиться только при клике. а если на ajax делать - справочная инфа загружается только тогда, когда наступает событие.

Google Updates - апдейты Различие контента на мобильной Яндекс кобласит

480

inetessentials

9 октября 2008, 03:29

#10

drima:
inetessentials, охота вам спорить в половине восьмого утра? :) на голимом css делать - значит, вся инфа целиком - даже еще не затребованная - будет загружаться сразу вся, а выводиться только при клике. а если на ajax делать - справочная инфа загружается только тогда, когда наступает событие.

спорить или нет, а тут не аякс, а одно событие на ява скрипте :)

лана.. не буду спорить.. юзайте аяксы шмаяксы

Переиграть и победить: как анализировать конкурентов для продвижения сайта

Яндекс Вебмастер вынес товарные фиды в отдельный раздел

Абсолютное позиционирование div в td - как в ИЕ?