Problem in Div in asp.net_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-07 23:49 出处：网络

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org> <html xmlns=\"http://www.w3.org/1999/xhtml\">

相关专题：.net css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org>     
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Ryan Merl's Portfolio</title>
 <style type='text/css'>
 .dataBold{
float:left;
padding:10px 0 0 80px; 
font-weight:bold;
  }
  .dataContact{ 
    height: 1%; 
    padding:10px 0 0 170px; 
    position:absolute;
   } 
   .data1{ 
    height: 1%; 
    padding:10px 0 0 550px; 
    position:absolute;

   } 


   .dataBold1
   {
            float:right;
        padding:10px 0 0 450px; 
        font-weight:bold;
        text-align: right;
        position:absolute;
    }



   </style>

   </head>
   <body>

   <div class="dataBold">
   <asp:Label ID="lblOffice" runat="server" Text="Office"/>  
   </div>
   <div class="dataContact">
   <asp:TextBox ID="txttitle" runat="server"></asp:TextBox>
   </div>
   <div class="dataBold1">
  开发者_StackOverflow中文版 <asp:Label ID="lblRegion" Text="Region"  runat="server"></asp:Label>
   </div>
   <div class="data1">
   <asp:DropDownList ID="ddlRegion" runat="server"></asp:DropDownList>
   </div>

   </body>
   </html>

Now the Problem is that when i click on text box name txttitle.....cursor is not focusing on text-box....so,i cant able to write in text box...

The problem is because of your absolutely positioned elements, and the fact that you are positioning them using the padding-left style.

This means that your Region <select> control is actually appearing above everything else and stopping you from clicking the textbox.

If you have a look at this http://jsfiddle.net/jVQQS/6/ This is your HTML and Css. See how the background colours show you the actually layers of your html. You will need to update your html/css and not use absolutely positioned elements, or change the way the elements are positioned.

This is an example of what you could do to get it working properly http://jsfiddle.net/jVQQS/11/

Replace the Tag coding inside the body like follows and try again.

       <form runat="server" >
       <div class="dataBold">
        <asp:Label ID="lblOffice" runat="server" Text="Office"/>  
       </div>
       <div class="dataContact">
        <asp:TextBox ID="txttitle" runat="server"/>
       </div>
       </form>