1 Тема від vladalert67

  • vladalert67
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 26.04.2022
  • Повідомлень: 8
    • Репутація: 0

Тема: Не працюють стилі CSS

Повинен з'явитися надпис Немає в наявності, але після додавання цих стилів він не працюює. Хоча стилі створені саме для нього

.product-item_wrapper .product-item_not-available .product-item_price{
    display: none;
}
.product-item_notify-text{
    display: none;
    font-size: 18px;
    line-height: 21px;
    font-weight: 700;
}

2 Відповідь від vladalert67

  • vladalert67
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 26.04.2022
  • Повідомлень: 8
    • Репутація: 0

Re: Не працюють стилі CSS

Це код сторінки,зображення додати сюди неможливо.Допоможіть знайти помилку

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/slick.css">
  <link rel="stylesheet" href="css/fonts.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header class="header">
   <div class="header_top">
  <div class="container">
<div class="header_top-inner">
  <nav class="menu">
    <ul class="menu_list">
      <li class="menu_item">
        <a class="menu_link"href="#">
        Магазины
        </a>
      </li>
      <li class="menu_item">
        <a class="menu_link"href="#">
        Акции
        </a>
      </li>
      <li class="menu_item">
        <a class="menu_link"href="#">
          Доставка и оплата       
        </a>
      </li>
    </ul>
  </nav>
 <a class="logo" href="#">
   <img class="logo_img" src="images/logo.svg" alt="">
 </a>
 <div class="header_box">
<p class="header_adress">
  Днепр,  ул. Науки  25
</p>
<ul class="user-list">
  <li class="user-list_item">
<a  class="user-list_link" href="#">
  <img src="images/heart.svg" alt="">
</a>
  </li>
  <li class="user-list_item">
<a class="user-list_link" href="#">
  <img src="images/user.svg" alt="">
</a>
  </li>
  <li class="user-list_item">
 <a class="user-list_link basket" href="#">
   <img src="images/basket.svg" alt="">
   <p class="basket_num">1</p>
 </a>   
  </li>
</ul>
 </div>
</div>
  </div>
   </div>
   <div class="header_bottom">
<div class="container">
       <ul class="menu-categories">
     <li class="menu-categories_item">
       <a  class="menu-categories_link"href="#">Квадроциклы</a>
    </li>
     <li class="menu-categories_item">
       <a  class="menu-categories_link"href="#">Катера</a>
    </li>
     <li class="menu-categories_item">
       <a  class="menu-categories_link"href="#">Гидроциклы</a>
    </li>
     <li class="menu-categories_item">
       <a  class="menu-categories_link"href="#">Лодки</a>
    </li>
     <li class="menu-categories_item">
       <a  class="menu-categories_link"href="#">Вездеходы</a>
    </li>
     <li class="menu-categories_item">
       <a  class="menu-categories_link"href="#">Снегоходы</a>
    </li>
     <li class="menu-categories_item">
       <a  class="menu-categories_link"href="#">Двигатели</a>
    </li>
     <li class="menu-categories_item">
       <a  class="menu-categories_link"href="#">Запчасти</a>
    </li>
       </ul>
     </div>
</div>
  </header>
  <section class="banner-section page-section">
    <div class="container">
      <div class="banner-section_inner">
        <div class="banner-section_slider">
          <a class="banner-section_slider-item"href="#">
            <img  class="banner-section_slider-img" src="images/banner-slider.jpg" alt="">
          </a>
          <a class="banner-section_slider-item"href="#">
            <img  class="banner-section_slider-img"src="images/banner-slider.jpg" alt="">
          </a>
          <a class="banner-section_slider-item"href="#">
            <img class="banner-section_slider-img" src="images/banner-slider.jpg" alt="">
          </a>
          <a class="banner-section_slider-item"href="#">
            <img  class="banner-section_slider-img"src="images/banner-slider.jpg" alt="">
          </a>
          <a class="banner-section_slider-item"href="#">
            <img class="banner-section_slider-img" src="images/banner-slider.jpg" alt="">
          </a>
          <a class="banner-section_slider-item"href="#">
            <img class="banner-section_slider-img" src="images/banner-slider.jpg" alt="">
          </a>
          <a class="banner-section_slider-item"href="#">
            <img class="banner-section_slider-img" src="images/banner-slider.jpg" alt="">
        </a>
        </div>
        <a class="banner-section_item sale-item" href="#">
         <div class="sale-item_top">
           <p class="sale-item_info">
             акция
           </p>
           <div class="sale-item_price">
             <div class="price sale-item_price-new">190 000</div>
             <div class="price sale-item_price-old">226 000</div>
           </div>
         </div>
         <img class="sale-item_img" src="images/content/sale-1.png" alt="">
         <h5 class="sale-item_title">
           Лодочный мотор
           Suzuki DF9.98RS
         </h5>
         <P class="sale-item_footer">
           Акция действует до
           <span>31.08.2024</span>
         </P>
        </a>
      </div>
    </div>
  </section>

  <section class="search page-section">
    <div class="container">
      <div class="search_inner">
        <div class="search_tabs">
          <a  class="tab search_tabs-item tab--active" href="#tab-1">Поиск по номеру</a>
          <a  class="tab search_tabs-item" href="#tab-2">Поиск по марке</a>
          <a  class="tab search_tabs-item" href="#tab-3">Поиск по названию товара</a>
        </div>
        <div class="search_content">
          <div id="tab-1" class="tabs-content search_content-item tabs-content--active">
            <form class="search_content-form">
              <input  class="search_content-input" type="text" placeholder="Введите номер">
              <button class="search_content-btn"  type="submit">искать</button>
            </form>
          </div>
          <div id="tab-2" class="tabs-content search_content-item">
            <form class="search_content-form">
              <input  class="search_content-input" type="text" placeholder="Введите марку">
              <button class="search_content-btn"  type="submit">искать</button>
            </form>
          </div>
          <div id="tab-3" class="tabs-content search_content-item">
            <form class="search_content-form">
              <input  class="search_content-input" type="text" placeholder="Введите название товара">
              <button class="search_content-btn"  type="submit">искать</button>
            </form>
          </div>
      </div>
    </div>
  </section>
    
  <section class="categories page-section">
   <div class="container">
     <div class="categories_inner">
       <a class="categories_item" href="#">
        <div class="categories_item-info">
          <h4 class="categories_item-title">Квадроциклы</h4>
          <p class="categories_item-text">Подробнее</p>
        </div>
        <div class="categories_item-img">
          <img src="images/categories-1.png" alt="">
        </div>
       </a>
       <a class="categories_item" href="#">
        <div class="categories_item-info">
          <h4 class="categories_item-title">Гидроциклы</h4>
          <p class="categories_item-text">Подробнее</p>
        </div>
        <div class="categories_item-img">
          <img src="images/categories-2.png" alt="">
        </div>
       </a>
       <a class="categories_item" href="#">
        <div class="categories_item-info">
          <h4 class="categories_item-title">Катера</h4>
          <p class="categories_item-text">Подробнее</p>
        </div>
        <div class="categories_item-img">
          <img src="images/categories-3.png" alt="">
        </div>
       </a>
       <a class="categories_item" href="#">
        <div class="categories_item-info">
          <h4 class="categories_item-title">Снегоходы</h4>
          <p class="categories_item-text">Подробнее</p>
        </div>
        <div class="categories_item-img">
          <img src="images/categories-4.png" alt="">
        </div>
       </a>
       <a class="categories_item" href="#">
        <div class="categories_item-info">
          <h4 class="categories_item-title">Вездеходы</h4>
          <p class="categories_item-text">Подробнее</p>
        </div>
        <div class="categories_item-img">
          <img src="images/categories-5.png" alt="">
        </div>
       </a>
       <a class="categories_item" href="#">
        <div class="categories_item-info">
          <h4 class="categories_item-title">Двигатели</h4>
          <p class="categories_item-text">Подробнее</p>
        </div>
        <div class="categories_item-img">
          <img src="images/categories-6.png" alt="">
        </div>
       </a>
     </div>
   </div>
  </section>

 <section class="products">
   <div class="container">
     <div class="products_inner">
       <div class="tabs-wrapper">
        <div class="tabs products_tabs">
          <a class="tab tab--active products_tab" href="#">запчасти </a>
          <a class="tab  products_tab" href="#">моторы</a>
          <a class="tab  products_tab" href="#"> шины</a>
          <a class="tab  products_tab" href="#"> электроника</a>
          <a class="tab  products_tab" href="#"> инструменты</a>
          <a class="tab  products_tab" href="#"> аксессуары</a>
        </div>
       </div>
      <div class="tabs-container products_container">
        <div class="tabs-content products_content tabs-content--active"></div>
        <div class="tabs-content products_content">
          <div class="product-slider">
            <div class="product-slider_item">
              <div class="product-item_wrapper product-item_not-available">
                <button class="product-item_favorite"></button>
                  <button class="product-item_basket">
                    <img src="images/basket-white.svg" alt="">
                    </button>
                    <a class="product-item_notify-link" href="#">Сообщить о поступлении</a>
                    <a class="product-item product-item--sale" href="#">
                    <p class="product-item_hover-text">
                      посмотреть товар
                    </p>
                  <img class="product-item_img" src="images/content/product-1.png" alt="">
                  <h4 class="product-item_title">
                   Водонепронецаемый рюкзак
                  </h4>
                  <p class="price product-item_price"> 
                    9 800 ₴
                  </p>
                  <p class="product-item_notify-text">
                    нет в наличии
                  </p>
                </a>
              </div> 
            </div>
          </div>
        </div>
        <div class="tabs-content products_content"></div>
        <div class="tabs-content products_content"></div>
        <div class="tabs-content products_content"></div>
        <div class="tabs-content products_content"></div>
        <div class="tabs-content products_content"></div>
      </div>
      </div>
     </div>
   </div>
 </section>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="js/slick.min.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

3 Відповідь від Dmy

  • Dmy
  • Новий користувач
  • Поза форумом
  • Звідки: Порту←Мінськ←Львів
  • Дата реєстрації: 20.12.2021
  • Повідомлень: 16
    • Репутація: 17

Re: Не працюють стилі CSS

display: none; приховує елементи.

4 Відповідь від vladalert67

  • vladalert67
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 26.04.2022
  • Повідомлень: 8
    • Репутація: 0

Re: Не працюють стилі CSS

Так і повинно бути. Display:none; має приховати ціну товару який розміщений на сайті,а вилазить тільки ціна яку потрібно приховати.Задумка дизайнера щоб не видаляти ціну а замінити тимчасово. Скидуй свій телеграм тому що так дуже важко пояснити

5 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 281
    • Репутація: 2722

Re: Не працюють стилі CSS

vladalert67 написав:

Скидуй свій телеграм тому що так дуже важко пояснити

А в телеґрам пояснити буде сильно легше ?

Подякували: Dmy1

leofun01 вебсайт