需要幫助定位

Question

我使用「beassistance驗證」爲我的表單和使用工具提示plugin和它工作正常，除了定位。

請看this鏈接，我上傳我的表單以瞭解我在說什麼。

我想是：

如果我的驗證失敗，我想工具提示圖標後顯示的消息，但其工具提示圖標之前顯示消息。請參閱here

這裏是我使用的CSS：

驗證的.css

#aspnetForm 
     { 
      width: 670px; 
     } 
     #aspnetForm label.error 
     { 
      margin-left: 10px; 
      width: auto; 
      display: inline; 
     } 
     form.cmxform 
     { 
      width: 50em; 
     } 
     em.error 
     { 
      background: url("Images/unchecked.gif") no-repeat 0px 0px; 
      padding-left: 16px; 
     } 
     em.success 
     { 
      background: url("Images/checked.gif") no-repeat 0px 0px; 
      padding-left: 16px; 
     } 
     form.cmxform label.error 
     { 
      margin-left: auto; 
      width: 250px; 
     } 
     #aspnetForm label.error 
     { 
      background: url("Images/unchecked.gif") no-repeat 0px 0px; 
      padding-left: 16px; 
      padding-bottom: 2px; 
      font-weight: bold; 
      color: #EA5200; 
     } 
     #aspnetForm label.checked 
     { 
      background: url("Images/checked.gif") no-repeat 0px 0px; 
     } 
     em.error 
     { 
      color: black; 
     } 
     #warning 
     { 
      display: none; 
     } 



<asp:Label runat="server" ID='Label8' >Start Date:</asp:Label> 
     <asp:TextBox ID="txtStartDate" runat='server' ></asp:TextBox> 
     <a style="cursor: hand" class="tooltip" title="Select the starting date of a visit, example 05/05/2010 (MM/DD/YYYY)!"> 
      <img alt="" src="Scripts/JQuery/Tooltip/icon_tooltip.gif" style="width: 11px; height: 11px" /></a> 
     <p> 
     </p> 
     <asp:Label runat="server" ID='Label9' >End Date:</asp:Label> 
     <asp:TextBox ID="txtEndDate" runat='server' ></asp:TextBox> 
     <a style="cursor: hand" class="tooltip" title="Select the end date of a visit, example 05/06/2010 (MM/DD/YYYY)!"> 
      <img alt="" src="Scripts/JQuery/Tooltip/icon_tooltip.gif" style="width: 11px; height: 11px" /></a> 

tooltip.css

#tooltip{ 
    position:absolute; 
    border:1px solid #333; 
    background:#f7f5d1; 
    padding:2px 5px; 
    color:#333; 
    display:none; 
    } 

Answer 1

只需添加位置：絕對;在#aspnetForm label.error css

Answer 2

我想你需要浮動：離開你的提示圖標，從而使其出現在錯誤消息的左側...

Answer 3

我沒有看到任何帶有工具提示ID的字段。只是一堂課。你的CSS應該是 .tooltip{}另外，我會把這些字段放在一個span，p或其他類似的內聯元素中，這樣你就可以按照Zuul的推薦將元素留下。 IE：

編輯：

<p class="form_row"> 
    <asp:Label runat="server" ID='Label8' >Start Date:</asp:Label> 
    <asp:TextBox ID="txtStartDate" runat='server' ></asp:TextBox> 
    <a style="cursor: hand" class="tooltip" title="Select the starting date of a visit, example 05/05/2010 (MM/DD/YYYY)!"> 
    <img alt="" src="Scripts/JQuery/Tooltip/icon_tooltip.gif" style="width: 11px; height: 11px" /></a> 
</p> 
<p class="form_row"> 
    <asp:Label runat="server" ID='Label9' >End Date:</asp:Label> 
    <asp:TextBox ID="txtEndDate" runat='server' ></asp:TextBox> 
    <a style="cursor: hand" class="tooltip" title="Select the end date of a visit, example 05/06/2010 (MM/DD/YYYY)!"> 
    <img alt="" src="Scripts/JQuery/Tooltip/icon_tooltip.gif" style="width: 11px; height: 11px" /></a> 
</p> 

然後CSS爲：

.form_row { 
    position:relative; 
    width:400px; 
} 
#aspnetForm label.error { 
    float:right; 
} 

我用簡單的html元素在本例中爲簡單起見，因爲我不是太熟悉ASP是如何創建這些控件。但你明白了。

編輯：

上述修改將讓你更接近你想要什麼，但你可能要考慮修改你的元素結構到的東西更容易維護。