CSS не срабатывает, когда страница загружается на главную страницу, но это происходит, когда страница не вложена в главную страницу

У меня есть CSS, который срабатывает, когда я нажимаю кнопку, чтобы указать на ошибку, если поле в форме пусто. Однако это работает только тогда, когда страница не находится на главной странице. Когда страница находится на главной странице, и я нажимаю кнопку, я получаю эту ошибку:

это код CSS:

    [ Alert validate ]*/

.validate-input {
  position: relative;
}

.alert-validate::before {
  content: attr(data-validate);
  position: absolute;
  max-width: 70%;
  background-color: #fff;
  border: 1px solid #c80000;
  border-radius: 3px;
  padding: 4px 25px 5px 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 12px;
  pointer-events: none;

  font-family: Ubuntu-Regular;
  color: #c80000;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;

  visibility: hidden;
  opacity: 0;

  -webkit-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.alert-validate::after {
  content: "\f12a";
  font-family: FontAwesome;
  display: block;
  position: absolute;
  color: #c80000;
  font-size: 18px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 18px;
}

.alert-validate:hover:before {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 992px) {
  .alert-validate::before {
    visibility: visible;
    opacity: 1;
  }
}

и это код на моей странице:

    <%@ Page Title = "" Language = "C#" MasterPageFile = "~/Principal.Master" AutoEventWireup = "true" CodeBehind = "Usuario.aspx.cs" Inherits = "Web.Usuario" %>
<asp:Content ID = "Content1" ContentPlaceHolderID = "ContentPlaceHolder1" runat = "server">
    <!DOCTYPE html>
    <html lang = "zxx" class = "no-js">
    <head>
        <!-- Mobile Specific Meta -->
        <meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Favicon-->
        <link rel = "shortcut icon" href = "img/fav.png">
        <!-- Author Meta -->
        <meta name = "author" content = "Colorlib">
        <!-- Meta Description -->
        <meta name = "description" content = "">
        <!-- Meta Keyword -->
        <meta name = "keywords" content = "">
        <!-- meta character set -->
        <meta charset = "UTF-8">
        <!-- Site Title -->
        <title>Destinos Naturales S.A</title>

        <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
<!--===============================================================================================-->  
    <link rel = "icon" type = "image/png" href = "images2/icons/favicon.ico"/>
<!--===============================================================================================-->
    <link rel = "stylesheet" type = "text/css" href = "vendor2/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
    <link rel = "stylesheet" type = "text/css" href = "fonts2/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
    <link rel = "stylesheet" type = "text/css" href = "fonts2/Linearicons-Free-v1.0.0/icon-font.min.css">
<!--===============================================================================================-->
    <link rel = "stylesheet" type = "text/css" href = "vendor2/animate/animate.css">
<!--===============================================================================================-->  
    <link rel = "stylesheet" type = "text/css" href = "vendor2/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
    <link rel = "stylesheet" type = "text/css" href = "vendor2/animsition/css/animsition.min.css">
<!--===============================================================================================-->
    <link rel = "stylesheet" type = "text/css" href = "vendor2/select2/select2.min.css">
<!--===============================================================================================-->  
    <link rel = "stylesheet" type = "text/css" href = "vendor2/daterangepicker/daterangepicker.css">
<!--===============================================================================================-->
    <link rel = "stylesheet" type = "text/css" href = "css2/util.css">
    <link rel = "stylesheet" type = "text/css" href = "css2/main.css">
<!--===============================================================================================-->

        <link href = "https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel = "stylesheet">
            <!--
            CSS
            ============================================= -->
            <link rel = "stylesheet" href = "css/linearicons.css">
            <link rel = "stylesheet" href = "css/owl.carousel.css">
            <link rel = "stylesheet" href = "css/font-awesome.min.css">
            <link rel = "stylesheet" href = "css/magnific-popup.css">
            <link rel = "stylesheet" href = "https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
            <link rel = "stylesheet" href = "css/bootstrap.css">
            <link rel = "stylesheet" href = "css/main.css">
        </head>
        <body>

            <!-- Start Contact Area -->
            <section class = "contact-area" id = "contact">
                <div class = "container-fluid">
                    <div class = "row align-items-center d-flex justify-content-start">
                        <div class = "col-lg-6 col-md-12 contact-left no-padding">
                            <div style = " width:100%;
                            height: 545px;" id = "map"></div>
                        </div>
                        <div class = "col-lg-4 col-md-12 pt-100 pb-100">
                            <form class = "login100-form validate-form flex-sb flex-w">
                    <span class = "login100-form-title p-b-51">
                        Usuario
                    </span>

                    <div>
                    <asp:TextBox ID = "txtid" class = "input100" type = "numeric" readonly = "true" runat = "server"></asp:TextBox>
                        <span class = "focus-input100"></span>
                    </div>

                    <div class = "wrap-input100 validate-input m-b-16" data-validate = "La cédula es requerida">
                        <asp:TextBox ID = "txtCedula" placeholder = "Ingrese la Cédula" class = "input100" type = "numeric" runat = "server"></asp:TextBox>
                        <span class = "focus-input100"></span>
                    </div>

                    <div class = "wrap-input100 validate-input m-b-16" data-validate = "El nombre es requerido">
                        <asp:TextBox ID = "txtNombre" placeholder = "Ingrese el Nombre" class = "input100" type = "text" runat = "server"></asp:TextBox>
                        <span class = "focus-input100"></span>
                    </div>

                    <div class = "wrap-input100 validate-input m-b-16" data-validate = "los Apellidos son requeridos">
                        <asp:TextBox ID = "txtApellidos" placeholder = "Ingrese los Apellidos" class = "input100" type = "text" runat = "server"></asp:TextBox>
                        <span class = "focus-input100"></span>
                    </div>

                     <div class = "wrap-input100 validate-input m-b-16" data-validate = "El usuario es requerido">
                        <asp:TextBox ID = "txtUsuario" placeholder = "Ingrese el Usuario" class = "input100" type = "text" runat = "server"></asp:TextBox>
                        <span class = "focus-input100"></span>
                    </div>

                    <div class = "wrap-input100 validate-input m-b-16" data-validate = "La contraseña es requerida">
                        <asp:TextBox ID = "txtContrasena" placeholder = "Ingrese la Contraseña" class = "input100" type = "password" runat = "server"></asp:TextBox>
                        <span class = "focus-input100"></span>
                    </div>

                    <div class = "flex-sb-m w-full p-t-3 p-b-24">
                        <div class = "contact100-form-checkbox">

                        </div>

                        <div>

                        </div>
                    </div>

                    <div class = "container-login100-form-btn m-t-17">
                        <asp:Button ID = "btnGuardar" class = "login100-form-btn" runat = "server" Text = "Guardar" OnClick = "btnGuardar_Click" />
                    </div>

                </form>



                        </div>
                    </div>
                </div>
            </section>
            <!-- End Contact Area -->

                <div id = "dropDownSelect1"></div>

<!--===============================================================================================-->
    <script src = "vendor2/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
    <script src = "vendor2/animsition/js/animsition.min.js"></script>
<!--===============================================================================================-->
    <script src = "vendor2/bootstrap/js/popper.js"></script>
    <script src = "vendor2/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
    <script src = "vendor2/select2/select2.min.js"></script>
<!--===============================================================================================-->
    <script src = "vendor2/daterangepicker/moment.min.js"></script>
    <script src = "vendor2/daterangepicker/daterangepicker.js"></script>
<!--===============================================================================================-->
    <script src = "vendor2/countdowntime/countdowntime.js"></script>
<!--===============================================================================================-->
    <script src = "js2/main.js"></script>

<script src = "js/vendor/jquery-2.2.4.min.js"></script>
            <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity = "sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin = "anonymous"></script>
            <script src = "js/vendor/bootstrap.min.js"></script>
            <script src = "js/owl.carousel.min.js"></script>
            <script src = "js/jquery.ajaxchimp.min.js"></script>
            <script src = "js/jquery.sticky.js"></script>
            <script src = "js/parallax.min.js"></script>
            <script type = "text/javascript" src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
            <script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
            <script src = "js/jquery.magnific-popup.min.js"></script>
            <script src = "js/main.js"></script>
        </body>
    </html>
</asp:Content>

Элементы head и body должны быть на главной странице ... у вас есть форма внутри формы?

— 02.05.2018 06:07

c# css asp.net

02.05.2018 05:21

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

главная страница должна выглядеть так:

<%@ Master Language = "C#" AutoEventWireup = "true" CodeFile = "MasterPage.master.cs" 
    Inherits = "MasterPage" %>

<!DOCTYPE html>

<html>
<head runat = "server">
    <title></title>
    <%--all meta tags--%>
    <%--all scripts put here will be available to every page that uses this master.--%>

    <asp:ContentPlaceHolder id = "head" runat = "server">
        <%--note this content placeholder in the head. don't put anything in it yet.
            it will be available to pages that use this master.--%>
    </asp:ContentPlaceHolder>
</head>
<body>

    <form id = "form1" runat = "server">
    <div>
        <asp:ContentPlaceHolder id = "ContentPlaceHolder1" runat = "server">

        </asp:ContentPlaceHolder>
    </div>
    </form>

    <%--add script tags and links-to-js before the closing body tag.
        they will be available to every page that uses this master page.--%>

</body>
</html>

форма, использующая главную страницу, будет выглядеть так:

<%@ Page Title = "" Language = "C#" MasterPageFile = "~/MasterPage.master" 
    AutoEventWireup = "true" CodeFile = "Default.aspx.cs" Inherits = "Default" %>

<asp:Content ID = "Content1" ContentPlaceHolderID = "head" Runat = "Server">
    <%--this is the content placeholder from the head of the master.
        add styles and links-to-css for use on just this page.--%>
</asp:Content>

<asp:Content ID = "Content2" ContentPlaceHolderID = "ContentPlaceHolder1" Runat = "Server">

    content for this page.

    <%--add scripts for just this page.--%>
</asp:Content>

Подробно и именно то, что мне нужно. Спасибо.

— 02.05.2018 10:09

02.05.2018 09:32