How do I get my div to overlay on top of other table rows?


Tags: javascript,jquery,css

Problem :

How can I make a div display over the top of a table tr, so the table row does not expand.

Wwhen I click on any of the ".property_menu_link" anchor tags to expand the menu the whole row expands. I want the menu to overlay over the top of the TR's, not expand the table, but I'm struggling on getting this to happen.

What am I doing wrong? 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")
        });
});


Solution :

You need to learn about styling tables using css. You can't do what you want to do with divs and tables. You are going to have to replace the contents of the row rather than overlay the row

You will probably need to use spans (rowspan, colspan etc...)

See here for more details http://www.w3.org/TR/html4/struct/tables.html and here http://www.w3schools.com/html/html_tables.asp

On that second link you can use the try it here link and paste in the source code from your browser which is great and easier than using firebug.

Plus see the comment about slashes on you question from @TomalakGeret'kal


    CSS Howto..

    How to style 3 (div) boxes using CSS

    How to add a simple card flip animation?

    How to assign CSS to images which have specific extension, height and width?

    Issue with floating divs - how can I have the widgets alongside the posts, not below?

    How to change and maintain multiple color themes at runtime with css?

    Images don't show up in quiz results after start over button

    css: how to force images to scale at same amount?

    How to Set Banner-Like Background Image With CSS

    How do I create triangle shaped vertical breadcrumbs

    How can I Highlight links only in Blog Posts with Mouseover?

    How to make CSS visible only for Opera

    How to Style CSS Checkboxes with Font Awesome

    How to scale and center text vertically in a fluid layout? (using CSS)

    How can I stop a text link to go up each time it is selected?

    How to have 100% width for last column only in html and css?

    How to set overlay on a page according to page height using CSS

    jQuery Slideshow in Chrome, Firefox, and Safari

    How to minify HTML with CSS and Javascript? [closed]

    How can I get the images in my carousel to center?

    How do CSS grid systems save time when implementing designs that aren’t grid-based?

    How to know from css if a select is opened

    How to implement a partially flexible screen layout with a grid framework?

    How can I position a form with controls over a Google Map?

    How to set jquery ui icon as background image per css?

    How to incorporate CSS into a table

    How to set a single value of transform while leaving the other values?

    How to stop default CSS in asp.net [closed]

    How to set content to -webkit-slider-thumb

    How to merge all with class

    How to visually position image before heading element