Задать вопрос

SpideR-KOSS

Ответы пользователя по тегу Вёрстка

  • Как наложить изображение поверх слоя?

    @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;, чтобы ничего не уехало.

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

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