Question

我有一个css错误，我似乎找不到任何东西。我在asp网站上遇到过这个问题。我有一个导航栏，我有一些造型（不太好介意你）。我的导航栏的样式也用于我在表单条目上执行的任何验证，但我不知道为什么。我在下面的两个页面中展示了一个示例：

这是我尝试更改密码的页面，返回的错误是正确的，但样式不仅仅是红色＆＃39; danger-text＆＃39;但具有与导航栏相同的格式。

注册页面是相同的故事，但它也有一个巨大的空白空间

以下是我用于管理密码页面的代码

<%@ Page Title="Manage Password" Language="C#" MasterPageFile="~/SyntherMaster.Master" AutoEventWireup="true" CodeBehind="ManagePassword.aspx.cs" Inherits="ComputingProjectwh.Account.ManagePassword" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: Title %>.</h2>
    <div class="form-horizontal">
        <section id="passwordForm">
            <asp:PlaceHolder runat="server" ID="changePasswordHolder" Visible="true">
                <div class="form-horizontal">
                    <h4>Change Password Form </h4>
                    <hr />
                    <%-- Here a validation summary command shows any errors that occur furing the process of changing the password --%>
                    <asp:ValidationSummary runat="server" ShowModelStateErrors="true" CssClass="text-danger" />
                    <div class="form-group">
                        <%-- Here a label and textbox used so that the user can enter their current password and the input is controlled and confirmed in the backing code, the associatedcontrol id is the id of the input to validate--%>
                        <asp:Label runat="server" ID="CurrentPasswordLabel" AssociatedControlID="CurrentPassword" CssClass="col-md-2 control-label">Current password</asp:Label>
                        <div class="col-md-10">
                            <asp:TextBox runat="server" ID="CurrentPassword" TextMode="Password" CssClass="form-control" />
                            <%-- Here a validator cnfirms that the user has entered something into the box, whether it is correct or not will be confirmed in the backing code --%>
                            <asp:RequiredFieldValidator runat="server" ControlToValidate="CurrentPassword"
                                CssClass="text-danger" ErrorMessage="The current password field is required."
                                ValidationGroup="ChangePassword" />
                        </div>
                    </div>
                    <div class="form-group">
                        <asp:Label runat="server" ID="NewPasswordLabel" AssociatedControlID="NewPassword" CssClass="col-md-2 control-label">New password</asp:Label>
                        <div class="col-md-10">
                            <asp:TextBox runat="server" ID="NewPassword" TextMode="Password" CssClass="form-control" />
                            <asp:RequiredFieldValidator runat="server" ControlToValidate="NewPassword" CssClass="text-danger" ErrorMessage="The new password is required." ValidationGroup="ChangePassword" />
                            <%-- Because the password is being changed, the password needs to be validated to confirm that it is suitable and follows the same rules as on the register page --%>
                            <asp:RegularExpressionValidator ID="PasswordValidator" runat="server" ErrorMessage="Invalid Password" ControlToValidate="NewPassword" ValidationExpression="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}"></asp:RegularExpressionValidator>
                        </div>
                    </div>
                    <div class="form-group">
                        <asp:Label runat="server" ID="ConfirmNewPasswordLabel" AssociatedControlID="ConfirmNewPassword" CssClass="col-md-2 control-label">Confirm new password</asp:Label>
                        <div class="col-md-10">
                            <asp:TextBox runat="server" ID="ConfirmNewPassword" TextMode="Password" CssClass="form-control" />
                            <asp:RequiredFieldValidator runat="server" ControlToValidate="ConfirmNewPassword"
                                CssClass="text-danger" Display="Dynamic" ErrorMessage="Confirm new password is required."
                                ValidationGroup="ChangePassword" />
                            <%--  Here a compare validator is used in order to confirm the the user typed the password correctly by ensuring that they can type it twice --%>
                            <asp:CompareValidator runat="server" ControlToCompare="NewPassword" ControlToValidate="ConfirmNewPassword" CssClass="text-danger" Display="Dynamic" ErrorMessage="The new password and confirmation password do not match." ValidationGroup="ChangePassword" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <%-- Here a button is used in order to start the code behing of the page and to get it to perform the tasks it needs to --%>
                            <asp:Button runat="server" Text="Change Password" ValidationGroup="ChangePassword" OnClick="ChangePassword_Click" CssClass="btn btn-default" />
                        </div>
                    </div>
                </div>
            </asp:PlaceHolder>
        </section>
    </div>
</asp:Content>

这是注册页面的代码：

<%@ Page Title="Register" Language="C#" MasterPageFile="~/SyntherMaster.Master" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="ComputingProjectwh.Account.Register" %>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <h2><%: Title %>.</h2>
    <p class="text-danger">
        <asp:Literal runat="server" ID="ErrorMessage" />
    </p>

    <div class="form-horizontal">
        <h4>Create a new account</h4>
        <hr />

    </div>
    <div class="form-group">
        <%-- This section is a a labbelled textbox used for the input of the user desired password, it is validated to ensure that
             something is entered and also by REGEX that it has at least one upper and lower case letteras well as a number and a symbol --%>
        <asp:Label runat="server" AssociatedControlID="Password" CssClass="col-md-2 control-label">Password</asp:Label>
        <div class="col-md-10">
            <asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="form-control" />
            <asp:RequiredFieldValidator runat="server" ControlToValidate="Password"
                CssClass="text-danger" ErrorMessage="The password field is required." />
            <asp:RegularExpressionValidator ID="PasswordValidator" runat="server" ErrorMessage="Passwords must contain at least one upper and lower case character, be at least 8 characters in length and also contain one special character" ControlToValidate="Password" ValidationExpression="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}"></asp:RegularExpressionValidator>
        </div>
    </div>
    <div class="form-group">
        <%-- This section is a a labbelled textbox used for the input of the user desired password, it is validated to ensure that
             something is entered and also by REGEX that it has at least one upper and lower case letteras well as a number and a symbol.
                     The entered password is compared with the first password entry to ensure that the two are the same --%>
        <asp:Label runat="server" AssociatedControlID="ConfirmPassword" CssClass="col-md-2 control-label">Confirm password</asp:Label>
        <div class="col-md-10">
            <asp:TextBox runat="server" ID="ConfirmPassword" TextMode="Password" CssClass="form-control" />
            <asp:RequiredFieldValidator runat="server" ControlToValidate="ConfirmPassword"
                CssClass="text-danger" Display="static" ErrorMessage="The confirm password field is required." />
            <asp:CompareValidator runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword"
                CssClass="text-danger" Display="static" ErrorMessage="The password and confirmation password do not match." />
            <asp:RegularExpressionValidator ID="ConfirmPasswordValidator" runat="server" CssClass="text-danger" ErrorMessage="Passwords must contain at least one upper and lower case character, be at least 8 characters in length and also contain one special character" ControlToValidate="ConfirmPassword" ValidationExpression="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}"></asp:RegularExpressionValidator>
        </div>
    </div>
    <div class="form-group">
                <%-- This section is a a labbelled textbox used for the input of the user desired username, it is validated to ensure that
             something is entered and also by REGEX to ensure that it is suitable --%>
        <asp:Label runat="server" AssociatedControlID="Username" CssClass="col-md-2 control-label">Username</asp:Label>
        <div class="col-md-10">
            <asp:TextBox runat="server" ID="Username" CssClass="form-control" />
            <asp:RequiredFieldValidator runat="server" ControlToValidate="Username"
                CssClass="text-danger" ErrorMessage="The Username field is required." />
            <asp:RegularExpressionValidator ID="UsernameValidator" runat="server" CssClass="text-danger" ErrorMessage="Usernames mcut be 3-15 characters long and cannot contain special characters" ControlToValidate="Username" ValidationExpression="^[a-z0-9_-]{3,15}$"></asp:RegularExpressionValidator>
        </div>
    </div>
    <div class="form-group">
        <%-- This section is a a labbelled textbox used for the input of the user desired email, it is validated to ensure that something is entered and that it matches email format by REGEX --%>
        <asp:Label runat="server" AssociatedControlID="Email" CssClass="col-md-2 control-label">Email</asp:Label>
        <div class="col-md-10">
            <asp:TextBox runat="server" ID="Email" CssClass="form-control" TextMode="Email" />
            <asp:RequiredFieldValidator runat="server" ControlToValidate="Email"
                CssClass="text-danger" ErrorMessage="The email field is required." />
            <asp:RegularExpressionValidator ID="EmailValidator" runat="server" CssClass="text-danger" ErrorMessage="RegularExpressionValidator" ControlToValidate="Email" ValidationExpression=""></asp:RegularExpressionValidator>
        </div>
    </div>
    <div class="form-group">
        <%--  This section is a simple data entry, validated by REGEX and asp to ensure that something is entered and the date is suitable and in the correct format --%>
        <asp:Label runat="server" AssociatedControlID="DateOfBirth" CssClass="col-md-2 control-label">Date of birth</asp:Label>
        <div class="col-md-10">
            <asp:TextBox runat="server" ID="DateOfBirth" CssClass="form-control" TextMode="Date" />
            <asp:RequiredFieldValidator runat="server" ControlToValidate="DateOfBirth" CssClass="text-danger" ErrorMessage="Please enter a valid date." />
            <asp:RegularExpressionValidator ID="DateOfBirthValidator" runat="server" CssClass="text-danger" ErrorMessage="RegularExpressionValidator" ControlToValidate="DateOfBirth" ValidationExpression="^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$"></asp:RegularExpressionValidator>
        </div>
    </div>
    <div class="form-group">
        <%-- Text box for first name entry, this field is required but not validated --%>
        <asp:Label runat="server" AssociatedControlID="Firstname" CssClass="col-md-2 control-label">First Name</asp:Label>
        <div class="col-md-10">
            <asp:TextBox runat="server" ID="Firstname" CssClass="form-control" />
            <asp:RequiredFieldValidator runat="server" ControlToValidate="Firstname"
                CssClass="text-danger" ErrorMessage="Please enter your first name." />
        </div>
    </div>
    <div class="form-group">
                <%-- Text box for surname entry, this field is required but not validated --%>
        <asp:Label runat="server" AssociatedControlID="Surname" CssClass="col-md-2 control-label">Surname</asp:Label>
        <div class="col-md-10">
            <asp:TextBox runat="server" ID="Surname" CssClass="form-control" />
            <asp:RequiredFieldValidator runat="server" ControlToValidate="Surname"
                CssClass="text-danger" ErrorMessage="Please enter your Surname." />
        </div>
    </div>
    <div class="form-group">
        <%-- This button is used to trigger the code to submit the users data and to create a new user--%>
        <div class="col-md-offset-2 col-md-10">
            <asp:Button runat="server" OnClick="CreateUser_Click" Text="Register" CssClass="btn btn-default" />

        </div>
    </div>
    <asp:ValidationSummary runat="server" CssClass="text-danger" />

</asp:Content>

我也可以添加cs，但我不确定它是否相关很多，也许只有这一行：

    else 
    {//if any errors occur then they are returned to the user on the page, for example if a username already exists and is in use.
        ErrorMessage.Text = result.Errors.FirstOrDefault();
    }

这是我当前状态的site.css：

/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 280px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
        text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
        font-size: 12em;
        font-weight: bold;
        font-family: Helvetica;
    }
}
/*all of the below styling is used to create the navigation bar and to give it colour and style*/
li {
    border-right: 1px solid #ff6600;
    z-index: 299;
    position: relative;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #2B3533;
    border: 1px solid #ff6600;
    z-index: 299;
    position: relative;
}

    ul li {
        display: block;
        position: relative;
        float: left;
        background: #2B3533;
        z-index: 299;
        position: relative;
    }

li ul {
    display: none;
    z-index: 299;
    position: relative;
}

ul li a {
    display: block;
    padding: 1em;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    z-index: 299;
    position: relative;
}

li:hover > ul {
    display: block;
    position: absolute;
    z-index: 992;
}

li:hover li {
    float: none;
    z-index: 992;
    position: relative;
}

li:hover a {
    background: #2B3533;
    z-index: 992;
    position: relative;
}

li:hover li a:hover {
    background: #ff6600;
    z-index: 992;
    position: relative;
}

.main-navigation li ul li {
    border-top: 0;
    z-index: 299;
    position: relative;
}

ul li a:hover {
    background: #ff6600;
    z-index: 299;
    position: relative;
}

ul ul ul {
    left: 100%;
    top: 0;
    z-index: 299;
    position: relative;
}

ul:before,
ul:after {
    content: " ";
    display: table;
    z-index: 299;
    position: relative;
}

ul:after {
    clear: both;
    z-index: 992;
    position: relative;
}

.main-navigation > li > a {
    display: block;
    padding: 1em;
    text-decoration: none;
    white-space: nowrap;
    color: white;
    z-index: 299;
    position: relative;
}

.shadowing {
    color: #fff;
    font-size: 12em;
    font-weight: bold;
    font-family: Helvetica;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
    margin-top: 20px;
}

.shadowing {
    text-align: center;
}

Answer 1

导航中的链接和错误具有相同的样式但看起来不一样？那是问题吗？那么，导航元素是链接，它们有自己的风格，但错误不是链接？也许用错误代码类创建另一个CSS元素并在那里粘贴样式。

Answer 2

你的css看起来太通用了。这会将您的样式应用于页面中的每个ul或li元素。要么创建类，要么至少将.main-navigation添加到当前所有选择器，以便它只影响导航部分。 e.g：

.main-navigation li {
    border-right: 1px solid #ff6600;
    z-index: 299;
    position: relative;
}

CSS Style携带问题

2 个答案: