2011-08-11 8 views
-2

テーブルの上にdivを表示させるにはどうすればいいですか?テーブルの行は展開されません。divを他のテーブル行の上にオーバーレイするにはどうすればよいですか?

「.property_menu_link」アンカータグのいずれかをクリックしてメニューを展開すると、行全体が展開されます。私は、テーブルを拡張するのではなく、TRの上にメニューをオーバーレイしたいが、これが起こるのを苦労している。

私は間違っていますか? HTML:

<table> 
    <tr> 
     <td valign="top" align="left"> 
       <div class="property_menu_container"> 

        <div style="display: none;" class="property_links_box ui-corner-all"> 
         <ul class="basic"> 
          <li>  
           <a onclick="open_me()" >Property Details</a> 
          </li> 
          <li>  
           <a onclick="open_me()" >Units, Leases &amp; Occupants</a> 
          </li> 
         </ul> 
        </div> 
        <div class="property_menu_link"> 
         <a> 
          <img src="images/maximize.png" id="68_p_img_folder"> 
         </a> 
        </div> 
       </div>     
       <span class="page_name property_name_span">Property Name 1 Here</span> 
     </td> 
    </tr> 
    <tr> 
     <td valign="top" align="left"> 
       <div class="property_menu_container"> 

        <div style="display: none;" class="property_links_box ui-corner-all"> 
         <ul class="basic"> 
          <li>  
           <a onclick="open_me()" >Property Details</a> 
          </li> 
          <li>  
           <a onclick="open_me()" >Units, Leases &amp; Occupants</a> 
          </li> 
         </ul> 
        </div> 
        <div class="property_menu_link"> 
         <a> 
          <img src="images/maximize.png" id="68_p_img_folder"> 
         </a> 
        </div> 
       </div>     
       <span class="page_name property_name_span">Property Name 2 Here</span> 
     </td> 
    </tr> 
</table> 

CSS:

/****************************** 
    Property Menu dropdown 
******************************/ 
.property_menu_container { 
    width: 200px; 
    /*height: 300px; --> this causes the row height for properties to be 300px before it's expanded*/ 
    position: relative; 
} 
.property_name_span{position: absolute; left:40px;} 
.property_links_box { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 15px; 
    padding:10px; 
    border: 3px solid #000000; 
    background-color: #FFFFFF; 
    filter:alpha(opacity=75); 
    opacity:.75; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/ 


} 
.property_menu_link { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.property_links_box{ 
    z-index: 10; 
} 

/****************************** 
    END Property Menu dropdown 
******************************/ 

はjavascript:

$(document).ready(function(){  

    $("div.property_menu_link a").toggle(function(){ 
      //1st Click 
      $(this).parent().siblings(\'.property_links_box\').show(); 
      $(this).parent().parent(\'.property_menu_container\').css("height", "300px"); 
     }, function() { 
      //2nd click 
      $(this).parent().siblings(\'.property_links_box\').hide(); 
      $(this).parent().parent(\'.property_menu_container\').css("height", "1px") 
     }); 
}); 
+0

TomalakGeret'kal @からの質問にスラッシュについてのコメントを見ますが、これは十分に問題として単離されていません。また、Javascriptにランダムなバックスラッシュがありますが、私はそこにいるはずはないと確信しています! –

+0

私はそれを更新しました...バックスラッシュはPHP用です...私はPHPスクリプト内でこの特定のjavascriptを生成します。書き出されるとバックスラッシュはそこにありません。 – Ronedog

答えて

0

あなたはCSSを使ってスタイリングテーブルについて学ぶ必要があります。 divやテーブルでやりたいことはできません。 あなたは

は、ここでは詳細http://www.w3.org/TR/html4/struct/tables.htmlとは、ここを参照してください(... ROWSPAN、COLSPANなど)あなたはおそらくスパンを使用する必要があります行の内容を置き換えるのではなく、行に

をオーバーレイする必要があるとしていますhttp://www.w3schools.com/html/html_tables.asp

この2番目のリンクでは、Firebugを使用するよりも簡単で、ブラウザのソースコードにリンクして試してみることができます。

プラスあなたは申し訳ありません

関連する問題