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

    kryamk
    @kryamk
    img {
        display: block;
    }
    Ответ написан
    Комментировать
  • Как border прислонить к другому border'у?

    kryamk
    @kryamk
    outline вместо border можно использовать
    Ответ написан
    Комментировать
  • Можете оценить вёрстку?

    kryamk
    @kryamk
    Для адаптива понадобится мета тег в head
    <meta name="viewport" content="width=device-width, initial-scale=1">

    Не помешали бы стили для контейнера, например такие:
    .container {
    	width: 1920px;
    	max-width: 100%;
    	margin: 0 auto;
    	padding: 0 15px;
    }


    Секция navbar:
    заменить флоаты на флексы, и по высоте позиционировать align-items а не марджинами

    Секция top-panel:
    Здесь у вас margin-top у секции и margin-bottom у подзаголовка. Заменить на паддинги у секции.
    Для секций обычно задаются паддинги, ибо если якорное меню, то чтобы текст не прижимался прям к самому верху, а было пространство.
    В правой части у заголовка, описания и кнопки правый марджин. Зачем задавать трем элементам, когда можно просто родителю задать паддинг?
    В кнопке находится ссылка. Выберите что-нибудь одно. Кнопки обычно используются для какого-либо действия, например открытие мобильного меню. Для перехода на другие страницы, якорное меню - ссылка.

    Секция слайдер:
    Для стрелок слайдера думаю предпочтительне position: absolute; ну и выровнять по центру
    position: absolute; top: 50%; transform: translateY(-50%);
    slider-bottom - задайте ему паддинг, а не параграфу марджин

    Секция column-text:
    Расстояние между заголовком и картинкой состоит из маржинов того и другого элемента, поди лучше определиться на каком-то одном..
    У Read More margin-bottom, когда явно просится паддинг для родителя, ну или как вариант высота для слайда/слайдера

    Футер
    Опять же марджины у элементов, когда предпочтительнее паддинги у родителя или предка.
    Флоаты использовать для обтекания картинок, а теперь рулят флексы.

    Общие советы
    Для сеток флексы и гриды, тут когда как и кому как. Поизучайте.
    Все img предлагаю оборачивать в обертку, мало ли там придется подложку полупрозрачную наложить, параллакс или ещё что. Можно к примеру в тег picture
    Старайтесь избегать большой вложенности.
    По поводу неймнига. Все рекомендуют БЭМ, но он мне не зашёл. Да и в верстке самое сложное это придумать названия классам )
    Старайте не прописывать стили тегам, сегодня это p, завтра span. Или добавится такой же элемент, для которого как раз не нужны эти стили
    Но понятно, что зависит от ситуации. Например в меню обычно обращаются к ul и li, потому-что при натяжке на cms придётся твои классы добавлять или переделывать стили
    Чтобы не писать через запятую свойства каждому однотипному элементу задать общий класс. Например для элементов navbar-brand подошел бы navbar-brand__item и уже ему отсупы

    Вроде бы дичи никакой не посоветовал, но всё равно учтите что ситуации разные, на вкус и цвет фломастеры тоже разные
    Ответ написан
    3 комментария
  • Как правильно задать контейнер?

    kryamk
    @kryamk
    width: 1200px;
    max-width: 100%;
    padding: 0 15px;
    margin: 0 auto;
    Ответ написан
    Комментировать
  • Как сделать так чтобы background-color был на весь экран браузера?

    kryamk
    @kryamk
    1. Сделать первую секцию 100vh, в неё бахнуть шапку, задать секции цвет
    2. Шапке высоту скажем 50px, первой секции calc(100vh - 50px). Обоим задать нужный цвет
    3. Добавить дополнительную секцию с цветом, абсолютно спозиционировать, высоту 100vh, раскидать z-index, а высоту шапки и первой секции как во втором пункте
    4. Задать цвет боди, а шапку и первую секцию как во втором пункте
    5. Плюнуть на всё и пойти бухать
    6. Добавить дополнительный псевдоэлемент с цветом вместо секции как в третьем пункте
    7. Задать отдельную фиксированную высоту и прописать в медиазапросах для каждого пикселя
    8. Сказать дизайнеру чтобы всё переделывал, а то понапридумывают всякого
    9. Шапку фиксированную сделать, а секции 100vh
    Ответ написан
  • Как сделать такую прокрутку страницы?

    kryamk
    @kryamk
    Можно рассмотреть вариант с swiper.js
    Ответ написан
    Комментировать
  • Как центрировать текст в горизонтальном меню?

    kryamk
    @kryamk
    Пытался что-то придумать, но психанул и переделал верстку
    https://codepen.io/i-smirnov/pen/LYZQzay?editors=1100
    Ответ написан
    1 комментарий
  • Как выровнять лого по центру в мобильном?

    kryamk
    @kryamk
    Нормально картинка расположена, тут вопрос в том что у картинки область белая снизу, вот и криво визуально выглядит.
    position: relative; и двигать top
    На flex переделать
    Ответ написан
  • Что-то на странице сжимает размер html и body, что делает невозможным верстку под мобильные устройства, как исправить?

    kryamk
    @kryamk
    Какие-то элементы не могут ужаться вместе с боди. Пробуйте удалять по очереди блоки, пока не поймете в каком проблема (можете в диспетчере выделять блоки и удалять их)
    Ответ написан
    Комментировать
  • Есть ли аналог плагина Tag под Sublime?

    kryamk
    @kryamk
    Скачать плагин Tag с гитхаба,
    вот у этого чувака пост на хабре.
    Установить в папку где все плагины. В неё можно попасть Preferences --> Browse Packages.
    У меня на винде 10 путь таков: C:\Users\username\AppData\Roaming\Sublime Text 3\Packages
    На всякий случай вот пару видосов об этом плагине: 1 и 2
    Ответ написан
    Комментировать