| Версия для печати
Нажмите сюда для просмотра этой темы в оригинальном формате |
| Форум на Исходниках.RU > HTML, CSS > div,relative,height |
| Автор: _XAV 05.10.04, 15:56 |
| Здрасте. Идея такая: Есть таблица 150*20,картинка и текс поверх. При наведении и картинка и текст должны меняться, т.е они должны быть в разных div (размер тот же) позиционированных относительно, но если div 2 штуки таблица вокруг растягивается в высоту. Вот такой css: <{CODE_COLLAPSE_OFF}><{CODE_WRAP_OFF}> .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} И код: <{CODE_COLLAPSE_OFF}><{CODE_WRAP_OFF}> <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? плз... |
| Автор: fatalist 05.10.04, 16:57 |
| По моему придется использовать "position:absolute;" и расчитывать координаты дивов относительно левого верхнего угла самого окна(документа)... Я думаю примерно так: <{CODE_COLLAPSE_OFF}><{CODE_WRAP_OFF}> var table = document.getElementById('Table1'); div1.top = table.offsetTop; div1.left = table.offsetLeft; |
| Автор: _XAV 06.10.04, 08:12 |
| ну наверное немного не так: <{CODE_COLLAPSE_OFF}><{CODE_WRAP_OFF}> <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 работать будет? |
| Автор: _XAV 06.10.04, 13:36 |
| А можно как-нить без JS? |
| Автор: Mixxx 06.10.04, 15:07 |
| Цитата _XAV, 6.10.04, 19:36 Да:А можно как-нить без JS? <{CODE_COLLAPSE_OFF}><{CODE_WRAP_OFF}> <?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> |
| Автор: fatalist 06.10.04, 16:21 |
| Цитата _XAV,6.10.04, 11:12 ну наверное немного не так: Да конечно, я постоянно "style" забываю... Цитата Единственное, в NN4.7 работать не хочет. А document.getElementById('Tab1').offsetTop во всех MSIE работать будет? В NN4.7 вообще мало чего работает... А в MSIE 4.0 и выше работает... |
| Автор: Mixxx 06.10.04, 17:39 |
| Цитата А в MSIE 4.0 и выше работает... Неправда ваша. В IE 5.0 и выше работает! (IE5+) |
| Автор: _XAV 06.10.04, 19:36 |
| Ну спасибо, вы меня просто спасли. А у .div1 a абсолютное позиционирование теперь от div1? А что такое ridge white- первые раз вижу, он за рамку отвечает что ли? |
| Автор: Mixxx 06.10.04, 20:21 |
| Цитата _XAV, 7.10.04, 01:36 А что такое ridge white- первые раз вижу, он за рамку отвечает что ли? Да. Цитата _XAV, 7.10.04, 01:36 А у .div1 a абсолютное позиционирование теперь от div1? Да, тег <a> обсолютно позиционирован относительно <div> |
| Автор: fatalist 07.10.04, 16:49 |
| Цитата Mixxx,6.10.04, 20:39 Неправда ваша. В IE 5.0 и выше работает! (IE5+) На самом деле я имел в виду, что свойство "offsetTop" в четвертом есть... А остальное я не уверен... |