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

oink

Профессиональный веб-макакинг
Ответы пользователя по тегу HTML

  • Как корректно вставлять картинки в темную / светлую тему?

    oink
    @oink
    Профессиональный веб-макакинг
    Не очень понятно, почему не будет возможности менять через админку (как и зачем это вообще украшательства сайта через админку менять, но это ладно, это больше вопрос к заказчикам). Весь контекст из такой постановки задачи не ясен, но навскидку можно заводить по 2 переменных с фонами для каждого такого места, примерно так:
    --banner-mobile-320-dark: url('../images/banner-dark-mobile-320.png');
--banner-mobile-320-light: url('../images/banner-light-mobile-320.png');

    При переключении темы наверняка меняется/добавляется какой-то класс на весь body, исходя из этого можно уже каскадничать.
    Или если это не правится, можно вешать на блоки два data-атрибута, заполняя их из админки теми же путями к бекграундам, и JSом подменять после переключения.
    Ответ написан
    Комментировать
    Комментировать

  • Как совместить в picture media и webp?

    oink
    @oink
    Профессиональный веб-макакинг 
    <picture>
      <source type="image/webp" srcset="/assets/images/preview-tablet.webp, /assets/images/preview-tablet-retina.webp 2x" media="(max-width: 768px)">
      <source type="image/webp" srcset="/assets/images/preview-desktop.webp, /assets/images/preview-desktop-retina.webp 2x" media="(min-width: 769px)">
      <source type="image/webp" srcset="xxx.webp 1x, xxx.webp 2x">
      <source srcset="/assets/images/preview-tablet.jpg, /assets/images/preview-tablet-retina.jpg 2x" media="(max-width: 768px)">
      <source srcset="/assets/images/preview-desktop.jpg, /assets/images/preview-desktop-retina.jpg 2x" media="(min-width: 769px)">
      <img alt="preview">
</picture>


    То же самое, только про webp написать в начале и не забыть добавить атрибут type="image/webp". Браузеры, которые ничего не поймут, пойдут дальше и увидят jpg.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как скрыть панель с помощью CSS?

    oink
    @oink
    Профессиональный веб-макакинг
    NikMaster777, 
    #nav-wrapper {
    display: block;
}

#navbar {
    position: absolute !important;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
}


    Так получилось, хоть и не очень красиво. Суть проблемы в том, что меню на самом деле находится в нижней строке, которую вы пытаетесь скрыть, просто оно смещено визуально в верхнюю часть шапки посредством position: relative. Если вырвать его из потока, а также задать корректное поведение для родителя, получается как надо.
    Ответ написан
    4 комментария
    4 комментария

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

    oink
    @oink
    Профессиональный веб-макакинг
    Если я правильно понял суть вопроса, можно каждой строке задать display: flex (можно и всем, но тогда дальнейшая настройка чуть сложнее), элементам-дивам - flex-basis 100%, ну и прочего по вкусу. Остальное флексбокс сделает сам:
    https://codepen.io/schegol/pen/WNbNdrR

    UPD. flex-shrink: 0 картинке еще забыл.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать, чтобы картинка все время не прыгала из-за разной высоты?

    oink
    @oink
    Профессиональный веб-макакинг
    Как вариант - добавить min-height: 400px; для .photo
    Ответ написан
    13 комментариев
    13 комментариев

  • Как поставить разный фон для разных страниц?

    oink
    @oink
    Профессиональный веб-макакинг
    Если есть возможность править HTML, можно добавить классы тегам body разных страниц и стилизовать. Т.е. на главной, к примеру, будет
    <body class="main-page-body">
...
</body>

    а на внутренней
    <body class="inner-page-body">
...
</body>


    И в CSS прописать, скажем:
    .main-page-body {
  background-color: red;
}

.inner-page-body {
  background-color: blue;
}


    А вообще по id должно было тоже получиться, на код бы взглянуть.
    Ответ написан
    Комментировать
    Комментировать

  • Разная ширина символов одного шрифта в разных браузерах: почему и как пофиксить?

    oink
    @oink Автор вопроса
    Профессиональный веб-макакинг
    Оказалось, что шрифт заменялся на локально установленный Roboto Condensed. Зачем, почему именно Хромом и именно в этом месте - пока загадка. Помогло удаление его из системы (пришлось еще лезть в реестр, т.к. просто через панель управления не давался).
    Ответ написан
    Комментировать
    Комментировать