На главную Наши проекты:
Журнал   ·   Discuz!ML   ·   Wiki   ·   DRKB   ·   Помощь проекту
ПРАВИЛА FAQ Помощь Поиск Участники Календарь Избранное RSS
msm.ru
! Прежде чем задать вопрос, полистайте форум и загляните в FAQ!
Модераторы: Vasya2000, Serafim, fatalist
  
> div,relative,height
_XAV
Сообщ. #1 ,
    Junior
    *
    Профиль · PM
    Рейтинг (т): 0
    Здрасте.
    Идея такая: Есть таблица 150*20,картинка и текс поверх. При наведении и картинка и текст должны меняться, т.е они должны быть в разных div (размер тот же) позиционированных относительно, но если div 2 штуки таблица вокруг растягивается в высоту.

    Вот такой css:
    ExpandedWrap disabled
       
      .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}


    И код:

    ExpandedWrap disabled
       
      <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?
    плз...
    Monster fatalist
    Сообщ. #2 ,

      Moderator
      ********
      Профиль · PM
      Поощрения: 20 Dgm
      Рейтинг (т): 327
      По моему придется использовать "position:absolute;" и расчитывать координаты дивов относительно левого верхнего угла самого окна(документа)...

      Я думаю примерно так:
      ExpandedWrap disabled
         
        var table = document.getElementById('Table1');
         
        div1.top = table.offsetTop;
        div1.left = table.offsetLeft;
      _XAV
      Сообщ. #3 ,
        Junior
        *
        Профиль · PM
        Рейтинг (т): 0
        ну наверное немного не так:
        ExpandedWrap disabled
          <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
        Сообщ. #4 ,
          Junior
          *
          Профиль · PM
          Рейтинг (т): 0
          А можно как-нить без JS?
          Mixxx
          Сообщ. #5 ,

            Profi
            *****
            Профиль · PM
            Поощрения: 13 Dgm
            Рейтинг (т): 107
            Цитата _XAV, 6.10.04, 19:36
            А можно как-нить без JS?
            Да:
            ExpandedWrap disabled
               
              <?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>
            Monster fatalist
            Сообщ. #6 ,

              Moderator
              ********
              Профиль · PM
              Поощрения: 20 Dgm
              Рейтинг (т): 327
              Цитата _XAV,6.10.04, 11:12
              ну наверное немного не так:

              Да конечно, я постоянно "style" забываю...


              Цитата
              Единственное, в NN4.7 работать не хочет.
              А document.getElementById('Tab1').offsetTop во всех MSIE работать будет?


              В NN4.7 вообще мало чего работает...
              А в MSIE 4.0 и выше работает...
              Mixxx
              Сообщ. #7 ,

                Profi
                *****
                Профиль · PM
                Поощрения: 13 Dgm
                Рейтинг (т): 107
                Цитата
                А в MSIE 4.0 и выше работает...

                Неправда ваша.
                В IE 5.0 и выше работает! (IE5+)
                _XAV
                Сообщ. #8 ,
                  Junior
                  *
                  Профиль · PM
                  Рейтинг (т): 0
                  Ну спасибо, вы меня просто спасли.
                  А у .div1 a абсолютное позиционирование теперь от div1?
                  А что такое ridge white- первые раз вижу, он за рамку отвечает что ли?
                  Mixxx
                  Сообщ. #9 ,

                    Profi
                    *****
                    Профиль · PM
                    Поощрения: 13 Dgm
                    Рейтинг (т): 107
                    Цитата _XAV, 7.10.04, 01:36
                    А что такое ridge white- первые раз вижу, он за рамку отвечает что ли?

                    Да.
                    Цитата _XAV, 7.10.04, 01:36
                    А у .div1 a абсолютное позиционирование теперь от div1?

                    Да, тег <a> обсолютно позиционирован относительно <div>
                    Monster fatalist
                    Сообщ. #10 ,

                      Moderator
                      ********
                      Профиль · PM
                      Поощрения: 20 Dgm
                      Рейтинг (т): 327
                      Цитата Mixxx,6.10.04, 20:39
                      Неправда ваша.
                      В IE 5.0 и выше работает! (IE5+)

                      На самом деле я имел в виду, что свойство "offsetTop" в четвертом есть...
                      А остальное я не уверен...
                      0 пользователей читают эту тему (0 гостей и 0 скрытых пользователей)
                      0 пользователей:


                      Рейтинг@Mail.ru
                      [ Script execution time: 0,0357 ]   [ 15 queries used ]   [ Generated: 27.04.24, 13:05 GMT ]  
                      Powered by Invision Power Board(U) v1.2 © 2003  IPS, Inc.