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

12 3
lazio
На сайте с 05.10.2006
Offline
47
7216

Вобщем-то сегодня столкнулся со следующей проблемой, есть таблица состоящая из 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)
drima
На сайте с 17.07.2007
Offline
46
#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
inetessentials
На сайте с 19.05.2005
Offline
480
#2

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

Продвигаем естественно (http://www.inetessentials.ru/) и непринужденно Проект All in Top (http://www.allintop.ru/) - обучение поисковой оптимизации без воды и на реальных примерах
drima
На сайте с 17.07.2007
Offline
46
#3
inetessentials:
эхх, господа извращенцы, забудьте про таблицы и юзайте дивы и будет вам счастье

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

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

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

drima
На сайте с 17.07.2007
Offline
46
#5
inetessentials:
дык тут ситуация явно для извращенцефф

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

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

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

drima
На сайте с 17.07.2007
Offline
46
#7
inetessentials:
не.. явно технология извращенца.. зачем такое делать не понимаю

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

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

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

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

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

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

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

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

drima
На сайте с 17.07.2007
Offline
46
#9

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

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

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

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

12 3

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий