besoin d'aide pour le positionnement

Question

J'utilise "beassistance validation" pour mon formulaire et en utilisant l'info-bulle plugin et cela fonctionne bien, sauf ce positionnement.

s'il vous plaît jeter un oeil à this lien et je télécharge mon formulaire pour avoir une idée de quoi je parle.

ce que je veux est:

si ma validation échoue je veux afficher le message après l'icône de l'info-bulle, mais son affichage du message avant l'icône de l'info-bulle. S'il vous plaît voir here

est ici le Css j'utilise:

validation

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

Ajoutez simplement la position: absolute; dans #aspnetForm label.error css

Answer 2

Je pense que vous devez float: left votre info-bulle icône, faisant ainsi apparaître à gauche du message d'erreur ...

Answer 3

Je ne vois aucun champ avec un identifiant d'info-bulle. Juste une classe. Votre css devrait être .tooltip{} De plus, je placerais les champs dans un span, p ou un autre élément en ligne similaire afin que vous puissiez flotter de manière prévisible vos éléments laissés selon la recommandation de Zuul. IE:

ÉDITÉ:

<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> 

Puis css:

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

J'utilisé des éléments simples html dans cet exemple par souci de simplicité que je ne suis pas trop au courant de la façon dont asp crée ces contrôles. Mais vous avez l'idée.

ÉDITÉE:

Les modifications ci-dessus vous se rapprocher de ce que vous voulez, mais vous voudrez peut-être envisager de revoir la structure de votre élément en quelque chose de plus maintenable.