Наши проекты:
Журнал · Discuz!ML · Wiki · DRKB · Помощь проекту |
||
ПРАВИЛА | FAQ | Помощь | Поиск | Участники | Календарь | Избранное | RSS |
[3.128.199.162] |
|
Сообщ.
#1
,
|
|
|
Здрасте.
Идея такая: Есть таблица 150*20,картинка и текс поверх. При наведении и картинка и текст должны меняться, т.е они должны быть в разных div (размер тот же) позиционированных относительно, но если div 2 штуки таблица вокруг растягивается в высоту. Вот такой css: .div1 {Z-INDEX: 11; LEFT: 0px; VISIBILITY: visible; WIDTH: 150; POSITION: relative; TOP: 0px;height=20} .div2 {Z-INDEX: 22; LEFT: 0px; VISIBILITY: visible;WIDTH: 150; POSITION: relative; TOP: -20px;height=20} И код: <table border="1" cellpadding="0" cellspacing="0" width="150" height="20" ID="Table1"> <tr> <td width=150 height=20 valign=middle align=center> <div class="div1"><img src="1.gif" width=150 height=20> </div> <div class="div2"><a href='#'>text</a> </div> </td> </tr> </table> Кто-нить знает , как сделать так, чтобы Table1 не растягивалась вниз на величину div2? плз... |
Сообщ.
#2
,
|
|
|
По моему придется использовать "position:absolute;" и расчитывать координаты дивов относительно левого верхнего угла самого окна(документа)...
Я думаю примерно так: var table = document.getElementById('Table1'); div1.top = table.offsetTop; div1.left = table.offsetLeft; |
Сообщ.
#3
,
|
|
|
ну наверное немного не так:
<html> <head> <style> <!-- .div1 {Z-INDEX: 11; LEFT: 0px; VISIBILITY: visible;POSITION: absolute; WIDTH: 150; TOP: 0px;height=20} .div2 {Z-INDEX: 22; LEFT: 0px; VISIBILITY: visible;WIDTH: 150; POSITION: relative; TOP: -20px;height=20} --></style> <script><!-- function move(){ div1.style.top=document.getElementById('Tab1').offsetTop+2;alert(div1.style.top); } --> </script> </head> <body onload="move();"> <br> <br> <br> <table border="1" cellpadding="0" cellspacing="0" width="150" height="20" ID="Tab1"> <tr> <td width="150" height="20" valign="middle" align="center"> <img src="pics/rb.gif" width="150" height="20"><br> <div id="div1" class="div1"> <a href='#'>text</a> </div> </td> </tr> </table> </body> </html> Единственное, в NN4.7 работать не хочет. А document.getElementById('Tab1').offsetTop во всех MSIE работать будет? |
Сообщ.
#4
,
|
|
|
А можно как-нить без JS?
|
Сообщ.
#5
,
|
|
|
Цитата _XAV, 6.10.04, 19:36 Да:А можно как-нить без JS? <?xml version="1.0" encoding="windows-1251"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <meta http-equiv="content-type" content="text/html;charset=windows-1251" /> <title>XHTML page</title> <style type="text/css"> <!--/*--><![CDATA[/*><!--*/ .div1{width:150px; height:20px;position:relative;border:2px ridge white} .div1 img{width:150px;height:20px;margin:0px;padding:0px} .div1 a{position:absolute;top:0px;left:55px;display:block} /*--><!*/]]> </style> </head> <body> <div class="div1"><img src="font.gif" /><a href='#'>text</a></div> </body> </html> |
Сообщ.
#6
,
|
|
|
Цитата _XAV,6.10.04, 11:12 ну наверное немного не так: Да конечно, я постоянно "style" забываю... Цитата Единственное, в NN4.7 работать не хочет. А document.getElementById('Tab1').offsetTop во всех MSIE работать будет? В NN4.7 вообще мало чего работает... А в MSIE 4.0 и выше работает... |
Сообщ.
#7
,
|
|
|
Цитата А в MSIE 4.0 и выше работает... Неправда ваша. В IE 5.0 и выше работает! (IE5+) |
Сообщ.
#8
,
|
|
|
Ну спасибо, вы меня просто спасли.
А у .div1 a абсолютное позиционирование теперь от div1? А что такое ridge white- первые раз вижу, он за рамку отвечает что ли? |
Сообщ.
#9
,
|
|
|
Цитата _XAV, 7.10.04, 01:36 А что такое ridge white- первые раз вижу, он за рамку отвечает что ли? Да. Цитата _XAV, 7.10.04, 01:36 А у .div1 a абсолютное позиционирование теперь от div1? Да, тег <a> обсолютно позиционирован относительно <div> |
Сообщ.
#10
,
|
|
|
Цитата Mixxx,6.10.04, 20:39 Неправда ваша. В IE 5.0 и выше работает! (IE5+) На самом деле я имел в виду, что свойство "offsetTop" в четвертом есть... А остальное я не уверен... |