Hello everyone and thanks for your help in advance. I developing an ASP.Net webform that has certain help items, that when clicked, use jQuery toggle to display the informational div. These links are placed within columns on the page. Currently, when the link is clicked and the div displayed, the columns are shifted down and to the right. I would like to have the div overlay the page content. Here is my CSS and page structure:
- <td class="menulist">
<span class="menuname">Insurance Sites</span>
<div id="InsuranceSites">
<ul>
<asp:Repeater ID="rptMenu" runat="server" OnItemDataBound="RenderData2">
<ItemTemplate>
<li>
<asp:HyperLink ID="lnkMenuLink" runat="server"></asp:HyperLink>
<asp:HyperLink ID="lnkHelpLink" CssClass="lnkHelpLink" ImageUrl="images/help5.png" BorderWidth="0" runat="server"></asp:HyperLink>
</li>
<li>
<asp:Panel ID="MenuPanel" CssClass="infodiv" runat="server">
<asp:HyperLink ID="lnkClosePanel" CssClass="close-image" runat="server" >
<img src="images/close-clear.png" alt="Close" class="close-image" />
</asp:HyperLink>
<div id="MenuPanelTitle"><asp:Literal ID="ltlMainTitle" runat="server"></asp:Literal></div>
<div id="MenuPanelDetails">
<ul>
<li><asp:Label ID="lblUserName" AssociatedControlID="txtUserName" Text="User Name:" runat="server"></asp:Label><asp:TextBox ID="txtUserName" runat="server"></asp:TextBox></li>
<li><asp:Label ID="lblPassword" AssociatedControlID="txtPassword" Text="Password:" runat="server"></asp:Label><asp:TextBox ID="txtPassword" runat="server"></asp:TextBox></li>
</ul>
</div>
</asp:Panel>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
</td>
The CSS looks like this:
- <style type="text/css">
.infodiv
{
border-color: #990000; border-width: 1px;
display: none;
border-style: solid;
width: 400px;
min-height: 150px;
}
#MenuPanelTitle {
text-align: center;
background-color: Green;
font-family: Arial;
color: White;
font-size: 14px;
font-weight: bold;
padding: 5px;
}
#MenuPanelDetails
{ padding: 5px;
}
#InsuranceSites ul
{
list-style-type: none;
}
#InsuranceSites li
{
padding-top: 4px;
padding-bottom: 4px;
vertical-align: middle;
}
#InsuranceSites label
{
float: left;
width: 5em;
margin-right: 1em;
}
#InsuranceSites li img
{
border-style: none;
}
#InsuranceSites li a
{
vertical-align: middle;
}
.close-image
{
display: block;
float:right;
position:relative;
top:-5px;
right: -5px;
height: 20px;
}
</style>
I've played around with various Z-index schemes without any success. Any help would be appreciated.