需要帮助定位

Question

我正在为我的表单使用“beassistance validation”并使用工具提示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

我认为你需要浮动：留下你的工具提示图标，从而使它出现在错误信息的左边......

Answer 2

我没有看到任何带有工具提示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如何创建这些控件。但是你明白了。

编辑：

上面的编辑可以让您更接近您想要的内容，但您可能需要考虑将元素结构修改为更易于维护的内容。

Answer 3

只需添加位置：绝对;在#aspnetForm label.error css

中