Ответы пользователя по тегу Вёрстка
  • Как наложить изображение поверх слоя?

    @SpideR-KOSS
    Для нужного блока, который должен быть поверх остальных задать свойство CSS:
    .block1 {
       z-index: 999;
    }

    И этим свойством можно делать различные наложения блоков, например:
    .block1 {
       z-index: 1;
    }
    .block2 {
       z-index: 2;
    }
    .block3 {
       z-index: 3;
    }

    Соответственно block3 будет самый верхний, а block1 самый нижний, т.е чем выше значение z-index, тем выше блок.
    Ответ написан
    Комментировать
  • Почему элементы контейнера вылезают за его пределы, вместо того, что бы его растянуть до необходимой ширины?

    @SpideR-KOSS
    Потому что такие вещи нужно делать через списки, ul li.

    Пример для размышления:
    HTML:
    <div class="ui container">
    <div class="ui three column grid">
      <div class="column">Логотип</div>
      <div class="column">
        <button class="ui button">Меню</button>
        <div class="ui flowing popup">
          <ul class="ui secondary menu">
            <li><a class="item active" data-tab="1">Категория #1</a></li>
            <li><a class="item" data-tab="2">Категория #2</a></li>
            <li><a class="item" data-tab="3">Категория #3</a></li>
          </ul>
          <div class="ui tab active" data-tab="1">Вкладка категории #1</div>
          <div class="ui tab" data-tab="2">Вкладка категории #2</div>
          <div class="ui tab" data-tab="3">Вкладка категории #3</div>
        </div>
      </div>
      <div class="column">Вход/Регистрация</div>
    </div>
    </div>


    CSS:
    li {
    list-type: none;
    }
    Ответ написан
    Комментировать
  • Ребята, Как сделать сайт статичным на всех устройствах, чтобы задний фон не уплывал?

    @SpideR-KOSS
    У тебя сайт не адаптивный (не отзывчивый), поэтому статичным на всех устройствах он не будет.

    Чтобы он стал адаптивным (отзывчивым), почитай про медиа запросы,
    @media screen {}
    Про сетки, того же Бутстрапа, Foundation, UiKit или Bulma.

    Вкратце суть в том чтобы для каждого разрешения экрана написать свои стили.
    Т.е если разрешение 1920x1080 то заголовок к примеру 36 размером шрифта, а у блока №1 свойство padding: 20px;

    А для разрешения 1366*768 заголовок уже 22px, а у блока №1 padding: 10px;, чтобы ничего не уехало.

    И вот используя сетку и медиа запросы ты сделаешь то что тебе нужно.

    Удачи!
    Ответ написан
    Комментировать