Все сервисы Хабра

Сообщество IT-специалистов

Ответы на любые вопросы об IT

Профессиональное развитие в IT

Удаленная работа для IT-специалистов

Войти на сайт
  • Все вопросы
  • Все теги
  • Пользователи

Хабр Q&A — вопросы и ответы для IT-специалистов

Получайте ответы на вопросы по любой теме из области IT от специалистов в этой теме.

Узнать больше
другие проекты хабра
  • Хабр
  • Карьера
  • Фриланс
Задать вопрос
Kinderman

Kostiantyn Kondratiuk

Front-end Developer
  • 6
    вклад
  • 8
    вопросов
  • 8
    ответов
  • 25%
    решений
Комментарии
  • Информация
  • Ответы
  • Вопросы
  • Комментарии
  • Подписки
  • Нравится
  • Как правильно и без костылей сделать адаптивную страницу 404?

    Kinderman
    Kostiantyn Kondratiuk @Kinderman Автор вопроса
    Ну вот - кратко и по сути :-). Спасибо.
    Написано более года назад
  • Как правильно и без костылей сделать адаптивную страницу 404?

    Kinderman
    Kostiantyn Kondratiuk @Kinderman Автор вопроса
    Ankhena, Одна страница сайта.
    А метатегов масса существует). Описание контента, для соцсетей и т.п. Я так понимаю, что надо смотреть что именно будет на 404й странице и отталкиваться от этого? Т.е. при наличии отсылки на соцсети прописывать соотв. метатеги и т.п. Так?
    Написано более года назад
  • Как правильно и без костылей сделать адаптивную страницу 404?

    Kinderman
    Kostiantyn Kondratiuk @Kinderman Автор вопроса
    Арсений Матыцин, Не въехал).
    Ок. Тогда конкретизирую.
    Как правильнее поступить:
    1. Прописать стили (и медиазапросы) для 404 в основной файл CSS.
    2. Прописать стили (и медиазапросы) для 404 в отдельный файл CSS (есть ли разница где он будет локально - в папке CSS или в корне?).
    3. Свой вариант.

    Ну и о метатегах хотелось бы узнать тоже как надо правильно и без лишнего кода прописать для 404.
    Написано более года назад
  • Как правильно и без костылей сделать адаптивную страницу 404?

    Kinderman
    Kostiantyn Kondratiuk @Kinderman Автор вопроса
    Если тело страницы содержит разметку, например, шапки сайта, подвала и т.д., то эта информация должна быть и в стилях.

    Так вот и вопрос то в том куда писать стили? В отд. файл или мешать в основной CSS?
    В html писать не вариант т.к. там не пару строчек будет.
    Написано более года назад
  • Как правильно и без костылей сделать адаптивную страницу 404?

    Kinderman
    Kostiantyn Kondratiuk @Kinderman Автор вопроса
    Требует стилизации). Есть дизайны в Фигме и их надо реализовать.
    614a495d695a8313810190.jpeg
    Написано более года назад
  • При hover'е на кнопку прыгает цвет (именно цвет). Почему?

    Kinderman
    Kostiantyn Kondratiuk @Kinderman Автор вопроса
    Вадим, Ок. Спасибо за ответ.
    Хоть и немного чувствую себя мужиком на фоне красного ковра, который говорит, что очень интересно...) Ну направление есть и это уже гуд).
    Написано более года назад
  • При hover'е на кнопку прыгает цвет (именно цвет). Почему?

    Kinderman
    Kostiantyn Kondratiuk @Kinderman Автор вопроса
    Вадим, пока я писал комент вы добавили вторую ссылку. Я не такой быстрый как вы, к сожалению).

    Вот по этому линку:
    Потому https://qna.habr.com/q/492359


    Вот пример из вопроса по линку выше
    Написано более года назад
  • При hover'е на кнопку прыгает цвет (именно цвет). Почему?

    Kinderman
    Kostiantyn Kondratiuk @Kinderman Автор вопроса
    Там в примере расписан бэкграунд не одной строкой. Как его вытянуть из Фигмы в таком виде?
    Или в какую сторону копать чтобы изучить этот вопрос?

    И при ховере в примере:
    background-position: -200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);

    Откуда эти значения? Или надо просто перечитать инфу о градиентах?
    Написано более года назад
  • SVG background - как правильно сделать адаптивным?

    Kinderman
    Kostiantyn Kondratiuk @Kinderman Автор вопроса
    Ankhena, Ок. Спасибо за неоднократную помощь!)
    Написано более года назад
  • SVG background - как правильно сделать адаптивным?

    Kinderman
    Kostiantyn Kondratiuk @Kinderman Автор вопроса
    Ankhena, Ааа, т.е. виной всему неадаптированный контент? Значить если фон в формате СВГ то его надо адаптировать в посл. очередь дабы неадаптированный контент не сбивал с толку?
    Написано более года назад
  • SVG background - как правильно сделать адаптивным?

    Kinderman
    Kostiantyn Kondratiuk @Kinderman Автор вопроса
    Вот секция с этим СВГ фоном - https://jsfiddle.net/Kindermns/fptwsL02/13/

    В процесе экспериментов я решил поставить фон для , который находится в container и как результат - при изменении ширины экрана фон не режется и вроде всё норм. Прописал ему:
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(/img/back_2_section.svg);


    Но. Теперь фон, естественно, будет в границах контейнера, а надо на ширину экрана.
    Прописываю то же самое для самой секции (в песочнице) и фон не адаптируется, а режется.
    Не понятно, почему.
    Написано более года назад
  • SVG background - как правильно сделать адаптивным?

    Kinderman
    Kostiantyn Kondratiuk @Kinderman Автор вопроса
    Spartak (Web-StyleStudio), IE не поддерживает. И это свойство прописывается к img, а у меня SVG вставлено бэкграундом.
    Написано более года назад
  • SVG background - как правильно сделать адаптивным?

    Kinderman
    Kostiantyn Kondratiuk @Kinderman Автор вопроса
    Спасибо. Но там общие понятия описаны и об СВГ нет информации.
    Написано более года назад
  • SVG background - как правильно сделать адаптивным?

    Kinderman
    Kostiantyn Kondratiuk @Kinderman Автор вопроса
    Рустам Байназаров, я начал с бэкграунда. Для остального контента ещё ничего не прописывал в медиа-запросах.
    Насколько я понял из самостоятельных поисков решения для адаптивности фона, что оно может быть в способе подключения СВГ как фона. Я подключил так, как в коде выше. Не знаю, как правильнее.
    Написано более года назад
  • SVG background - как правильно сделать адаптивным?

    Kinderman
    Kostiantyn Kondratiuk @Kinderman Автор вопроса
    Рустам Байназаров, прочитал, прописал разные варианты. Не помогает.
    Написано более года назад
  • Position: fixed; На другом разрешении съезжает. Как пофиксить и есть ли особенности его вёрстки при адаптиве?

    Kinderman
    Kostiantyn Kondratiuk @Kinderman Автор вопроса
    Ankhena, secretsergey хорошо, вроде разобрался, спасибо за ЛикБез)!
    Написано более года назад
  • Position: fixed; На другом разрешении съезжает. Как пофиксить и есть ли особенности его вёрстки при адаптиве?

    Kinderman
    Kostiantyn Kondratiuk @Kinderman Автор вопроса
    Ankhena,
    А надо, чтобы оно позиционировалось относительно container (т.е. так, как оно изначально прописано, без сдвигов влево-вправо и желательно чтобы фон меню был растянут и на body, а сам контент меню начинался у левой границы контейнера - как на скрине).

    Вот цитата из моего вопроса. И на скрине видно, что фон на ширину боди, а контент ровняется по левой границе контейнера. Может я не так сформулировал вопрос - тогда, сорри.

    И не забывайте про проверку на переполнение. Меню может изменяться в любое время по прихоти владельца сайта.


    Ну, оно не будет меняться т.к. я себе делаю сайт). Но. Если уж делать то так, как надо).
    Т.е. при добавлении контента в меню оно будет изменять отступы слева-справа, что есть не гуд. Правильно я понял?

    В такой формулировке точно нет.

    Ок. Такая формулировка должна быть (взял из MDN): "Исторически HTML-элементы было принято делить на блочные и строчные. Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название)"?

    Вот простейший пример, опровергающий ваше определение https://jsfiddle.net/tyu8k64f/

    Пример не понял т.к. там просто див в боди. И боди и див блочные.
    Ладно. Суть вопроса была в позиционировании, всё-таки).
    Написано более года назад
  • Position: fixed; На другом разрешении съезжает. Как пофиксить и есть ли особенности его вёрстки при адаптиве?

    Kinderman
    Kostiantyn Kondratiuk @Kinderman Автор вопроса
    Ankhena, да, с шириной 100% работает.
    Разве блочный элемент не занимает всю ширину браузера?) А при position: fixed; ширина элемента ограничивается по контенту в нём.

    И ещё вопрос - не проще ли (да и кода меньше) прописать для nav justify-content: center; ну и padding: 20px 0; (как советует secretsergey выше в коментах)? Проверил - тоже рабочее решение. Как лучше с точки зрения человека с большим опытом чем у меня?
    Написано более года назад
  • Position: fixed; На другом разрешении съезжает. Как пофиксить и есть ли особенности его вёрстки при адаптиве?

    Kinderman
    Kostiantyn Kondratiuk @Kinderman Автор вопроса
    Ankhena, ок, спасибо. Но вы применили position: sticky; А надо position: fixed;
    Если в вашем коде изменить на position: fixed; то header так же позиционируется по левому верхнему углу браузера и становиться инлайн.
    Написано более года назад
  • Position: fixed; На другом разрешении съезжает. Как пофиксить и есть ли особенности его вёрстки при адаптиве?

    Kinderman
    Kostiantyn Kondratiuk @Kinderman Автор вопроса
    Ankhena, Что это даст?
    Вот такая вложенность для меню:
    <body>
      <header class="header" id="header">
        <div class="container">
          <div class="nav-container">
            <nav class="wrap d-flex align-items-center navfix">
              <a href="#" class="logo">
                <img src="img/logo.png" alt="Логотип" class="logo__img">
              </a>
              <ul class="menu d-flex">
                <li class="menu__item">


    Т.е., по сути, есть 2 обёртки с класом контейнер. Как это повлияет на ситуацию? Контейнеру надо дать клас релейтив?
    И что нужно отделить чтобы разложить кашу на её составляющие?)
    Написано более года назад
  • 1
  • 2
  • Следующие →
Самые активные сегодня
  • Drno
    • 11 ответов
    • 1 вопрос
  • HardBot
    HardBot
    • 7 ответов
    • 0 вопросов
  • VoidVolker
    VoidVolker
    • 7 ответов
    • 0 вопросов
  • Expert1222
    • 5 ответов
    • 0 вопросов
  • poly-titova
    Полина Титова
    • 5 ответов
    • 0 вопросов
  • sergey-gornostaev
    Сергей Горностаев
    • 5 ответов
    • 0 вопросов
  • © Habr
  • О сервисе
  • Правила
  • Обратная связь
  • Блог

Войдите на сайт

Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации