Ответы пользователя по тегу CSS
  • Почему у nav есть внешний отступ?

    sergey155
    @sergey155
    1) зачем перекрученный html ?? Может есть смысл nav поставить перед тегом main ??
    2) Вы же сами центруете контент по центру " margin: 0 auto;"
    3) Такой подход с float это самоубийство
    #container {
        width: 800px;
        margin: 0 auto;
    }


    4) опечатка в : margin left заменить на margin-left:
    main {
      float: left;
      margin left: 200px;
      width: 600px;
    }


    5) Обнуление, как вариант reset

    header{
        background-color: #c0c0c0;
    }
    
    aside {
        background-color: #ff8040;
        width: 200px;
    }
    
    h1 {
      padding:0;
      margin:0;
    }
    
    p {
      margin:0;
    }
    
    nav {
        background-color: #8080ff;
        width: 200px;
        float: left;
    }
    
    main {
      margin-left: 200px;
      width: 600px;
    }
    
    footer {
        background-color: #400000;
        color: white;
        clear: left;
    }
    
    #container {
        width: 800px;
    }
    Ответ написан
    Комментировать
  • Как сделать первую ссылку в таб меню сразу же активной без JS?

    sergey155
    @sergey155
    Если вы хотите создать табы без использования JavaScript, вы можете использовать чекбоксы и псевдоклассы

    Простые табы на HTML и CSS. Как это сделать?
    Как сделать табы на: чистом CSS / чистом JS / гряз...

    <div class="container">
      <div class="tab">
        <label for="tab1">Tab 1</label>
        <label for="tab2">Tab 2</label>
        <label for="tab3">Tab 3</label>
    </div>
    
    <div>
        <input type="radio" id="tab1" name="tab" checked>
        <div class="tabcontent">
            <h3>Content for Tab 1</h3>
        </div>
    
        <input type="radio" id="tab2" name="tab">
        <div class="tabcontent">
            <h3>Content for Tab 2</h3>
        </div>
    
        <input type="radio" id="tab3" name="tab">
        <div class="tabcontent">
            <h3>Content for Tab 3</h3>
        </div>
    </div>
    </div>


    .container {
      width:800px;
      margin: 0 auto;
    }
    
    .tab {
      display:flex;
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }
    
    .tab label {
      display: block;
      float: left;
      padding: 14px 16px;
      cursor: pointer;
      width: 33.3%;
      text-align: center;
    }
    
    input {
      display: none;
    }
    
    .tabcontent {
      display: none;
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-top: none;
    }
    
    input:checked + .tabcontent {
      display: block;
    }
    Ответ написан
    Комментировать
  • Как сверстать такой блок на флексах с изменением порядка его элементов?

    sergey155
    @sergey155
    Так а чем такой вариант вас не устраивает ?

    <div class="container">
            <div class="block">
                <div class="sub-block">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolor iure unde! Ab error ipsum minima non possimus quia tenetur. Autem eveniet, harum id ipsam labore nostrum sequi similique voluptate!</div>
                <div class="sub-block">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolor iure unde! Ab error ipsum minima non possimus quia tenetur. Autem eveniet, harum id ipsam labore nostrum sequi similique voluptate!</div>
            </div>
            <div class="block">
                <div class="sub-block">Блок 3</div>
            </div>
        </div>


    .container {
            width:800px;
            margin:0 auto;
            display: flex;
            justify-content: space-between;
        }
        .block {
            width: 100%;
            border: 1px solid black;
            padding: 20px;
            box-sizing: border-box;
        }
        .sub-block {
            margin-bottom: 20px;
        }
    Ответ написан
  • Как сделать скролл по горизонтали с двумя рядами внутри?

    sergey155
    @sergey155
    Используете свойство overflow: scroll, есть два варианта прокрутки - горизонтальная и вертикальная. Вот как вы можете настроить каждый из них:

    Горизонтальная прокрутка
    Если вам нужно добавить горизонтальную прокрутку к вашему контейнеру, вы можете использовать следующее:
    .scroll-container {
      width: 300px; /* Ширина вашего контейнера */
      height: 200px; /* Высота вашего контейнера */
      overflow-x: scroll; /* Добавление горизонтальной прокрутки */
    }


    Вертикальная прокрутка
    Если вы хотите добавить вертикальную прокрутку к вашему контейнеру, используйте следующий код:
    .scroll-container {
      width: 300px; /* Ширина вашего контейнера */
      height: 200px; /* Высота вашего контейнера */
      overflow-y: scroll; /* Добавление вертикальной прокрутки */
    }
    Ответ написан
    Комментировать
  • При создании div боковое меню сдвигается, что делать?

    sergey155
    @sergey155
    Проблема в float

    Как вариант можно использовать flexboxили grid

    body {
      display: flex;
      margin: 0;
    }
    
    aside {
      background: #5c8a21fa;
      width: 17%;
      padding: 2.5%;
      height: 100vh;
      color: #fff;
      border-right: 5px solid #4d4d4d;
    }
    
    aside img {
      width: 65%;
      align-self: center;
      margin-bottom: 20px;
    }
    
    aside ul {
      list-style: none;
      padding: 0;
    }
    
    aside ul li {
      color: #fff;
      margin-top: 20px;
      transition: all 0.6s ease;
    }
    
    aside ul li,
    aside ul a {
      text-decoration: none;
    }
    
    aside ul li:hover,
    aside ul a:hover {
      color: #eb5959;
      text-decoration: none;
      transform: scale(1.05);
    }
    
    .content {
      flex: 1;
      background: #a6fa52fa;
      padding: 2.5%;
    }


    Когда работаете с float, вам нужно использовать clear fix

    body {
      background: #a6fa52fa;
    }
    
    aside {
      float: left;
      background: #5c8a21fa;
      width: 17%;
      padding: 2.5%;
      height: 100vh;
      color: #fff;
      border-right: 5px solid #4d4d4d;
    }
    
    aside::after {
      content: "";
      display: table;
      clear: both;
    }
    
    aside img {
      width: 65%;
      float: left;
      position: relative;
      left: -40px;
      top: -30px;
    }
    
    aside ul {
      list-style: none;
    }
    
    aside ul li {
      color: #fff;
      display: block;
      margin-top: 20px;
      transition: all .6s ease;
    }
    
    aside ul li,
    aside ul a {
      text-decoration: none;
    }
    
    aside ul li:hover,
    aside ul a:hover {
      color: #eb5959;
      text-decoration: none;
      transform: scale(1.05);
    }
    Ответ написан
  • Как мне исправить анимацию?

    sergey155
    @sergey155
    *,
        *::before,
        *::after {
          box-sizing: border-box;
        }
    
        .visually-hidden {
          position: absolute;
          width: 1px;
          height: 1px;
          margin: -1px;
          border: 0;
          padding: 0;
          white-space: nowrap;
          clip-path: inset(100%);
          clip: rect(0 0 0 0);
          overflow: hidden;
        }
    
        .wrapper {
          width: fit-content;
          padding: 50px;
          margin: 20px auto;
          outline: 2px dashed tomato;
          display: flex;
          align-items: center;
          justify-content: center;
        }
    
        .check-label {
          position: relative;
          display: inline-block;
          width: 50px;
          height: 20px;
          background-color: lightgrey;
          border: 1px solid grey;
          border-radius: 10px;
          box-shadow: 1px -2px 3px 2px rgba(0, 0, 0, 0.2) inset;
          background: linear-gradient(to right, blue, navy);
          background-repeat: no-repeat;
          background-size: 80%;
          background-position: -50px;
          transition: background-position 0.2s ease;
        }
    
        .check-label::before {
          content: "";
          display: inline-block;
          position: absolute;
          width: 23px;
          height: 23px;
          top: 50%;
          transform: translateY(-50%);
          left: 0;
          background-color: gainsboro;
          border: 5px solid dimgrey;
          border-radius: 50%;
          transition: left 0.25s ease;
        }
    
        #check:checked ~ .check-label {
          background-position: left;
        }
    
        #check:checked ~ .check-label::before {
          left: 27px;
        }
    Ответ написан
    Комментировать
  • Почему стилизация select отличается в браузерах?

    sergey155
    @sergey155
    Стилизация элементов<select> и <option> с помощью CSS в некоторых аспектах ограничена. Это связано с тем, что рендеринг выпадающего списка и его пунктов (<option>) веб-браузерами в значительной степени зависит от нативного операционной системы интерфейса пользователя (OS UI). В результате многие аспекты этих элементов, такие как ширина выпадающего списка, оформление выпадающего списка, и стилизация пунктов списка, могут оказаться сложными для полного контроля с помощью обычных CSS.

    Для стилизации можете воспользоваться например select2
    Ответ написан
    Комментировать
  • Как сделать тень для класса?

    sergey155
    @sergey155
    Так ??

    .item {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      gap: 13px;
    }
    
    .item_box {
      position: relative;
      overflow: hidden;
      width: 350px;
      height: 345px;
      border-radius: 4px;
      background: #1b2837;
    }
    
    .item_box_icon {
      width: 136px;
      height: 102px;
      border-radius: 50%;
      background: #003adb;
      position: absolute;
      bottom: -100px;
      right: -100px;
      z-index: 0;
      transition: 0.3s;
      box-shadow: 0px 10px 29px 0px rgba(64, 129, 255, 0.24);
    }
    
    .item_box:hover .item_box_icon {
      width: 450px;
      height: 450px;
      border-radius: 50%;
      bottom: -180px;
      right: -180px;
      z-index: 0;
      transition: 0.3s;
    }
    Ответ написан
    Комментировать
  • Адаптивный background html css?

    sergey155
    @sergey155
    .container {
      margin: 0 auto;
      max-width: 1200px; /* Измените ширину на максимальную ширину, а не фиксированную */
      padding: 0 20px; /* Добавьте небольшие отступы по бокам для контента */
      box-sizing: border-box;
    }


    #home_page .section-header .container:nth-child(2) h1 {
      font-size: clamp(2rem, 5vw, 9.375rem);  /* Замените на ваши значения */
    }
    Ответ написан
    Комментировать
  • Как сделать боксы подряд?

    sergey155
    @sergey155
    <div class="container">
            <input type="search" placeholder="Поиск товаров" class="search-engine">
            <div class="button"></div>
        </div>


    .container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    
    .search-engine{
        font-family: Noto;
        color: rgba(19,75,92,0.32);
        border: 5px solid rgb(92, 195, 255);
        border-radius: 20px;
        background-color: rgb(234, 245, 255);
        width: 300px;
        height: 50px;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 15px;
        margin-right: 10px;
    }
    
    .button{
        border: 1px solid rgb(92, 195, 255);
        height: 50px;
        border-radius: 10px;
        background-color: rgb(92, 195, 255);
        width: 100px;
    }
    Ответ написан
    2 комментария