Ответы пользователя по тегу HTML
  • Как масштабировать сайт под маленькие устройства?

    @ned4ded
    Верстка, Фронтенд
    Это решит проблему:
    <meta name="viewport" content="width=device-width">


    TL;DR

    "Портативные устройства часто рендерят страницы в виртуальном окне, называемым вьюпортом, ширина которого обычно больше ширины экрана" - mdn. Для обхода этого поведения используется свойство width мета-аттрибута viewport, равное значению device-width: content="width=device-width". В таком случае ширина вьюпорта будет равна ширине экрана устройства.

    width - не единственное свойство, позволяющие изменять заложенное поведение вьюпорта, полный список доступен на mdn или в спеке. Стоит отметить, что это драфт, но современные браузеры его стараются имплементировать.

    Другое свойство, используемое тобой в примере, - initial-scale, устанавливающие зум вьюпорта в определенное значение при первичном запуске сайта. Значение может варьироваться от 0.1 до 10. При 1 зум равен ширине вьюпорта (можно сказать, что в данном случае зум отсутствует). По дефолту же зум равен значению auto, который высчитывается путем деления исходного значения вьюпорта на значение реально отрендеренного холста, что позволяет отобразить весь холст на экране (формула чуть сложнее). В твоем случае зум равен ширине экрана (т.к. ширина вьюпорта равна ширине экрана через width=device-width), т.е. 320px. Когда ты устанавливаешь ограничение на минимальную ширину тела документа, равную, например, 480px, то по дефолту у тебя будет горизонтальный скролл при зуме равном 1. Это логичное поведение, заложенное в спеке. Это как пытаться посмотреть сайт с ограничение в 1600px в ширину с ноутбука, там тоже будет горизонтальный скролл.

    Чтобы обойти это поведение достаточно установить initial-scale в значение auto, или убрать это свойство вообще, т.к. это значение по дефолту.
    Ответ написан
  • Делать pixelperfect ломая поведение flexbox или же делать правильно flexbox ломая pixelperfect?

    @ned4ded
    Верстка, Фронтенд
    Добрый день. Вкусовщина, конечно, но я за нормальную работу стилей, а не подгон под пп, исключением является случай, когда такой подгод обусловлен некоторой идеей дизайнера (но в 90% случаев это просто недочет дизайна).

    Используя flexbox и делая все по PP приходится отказываться от justify-content, и использовать костыли в виде margin чтобы подогнать под макет, в свою очередь это здорово мешает при адаптации под меньшие разрешения, приходится постоянно перебивать размеры margin, с justify-content и flex-wrap адаптировать по сути и не надо оно само адаптируется но не подходит под PP c расхождением до 50-70 пикселей.


    Если расхождение на 50 пикселей, то используйте другой подход при верстке, чтобы быть ближе к макету. Тут же важно распределение пространства между блоками и их позиционирование в документе.

    Иными словами, если вы видите, что у вас в ряду 3 блока и пространство между ними должно распределяться +/- равномерно (но в дизайне один из блоков расположен не на месте), тогда justify-content будет оправдан, но если у вас 3 блока разной ширины с разными отступами и такое решение обусловлено некоторым "видением", то придется выкручиваться (:
    Ответ написан
  • Как верстать radio-input?

    @ned4ded
    Верстка, Фронтенд
    Добрый день, самый простой способ - скрыть оригинальные радиокнопки, сверстать кнопки с двумя состоянием: вкл и выкл (через отдельный спан или :before + :after для лейбла). Сам чекбокс выбирается с помощью тега label и аттрибута for.

    Собственно, вот пример из бутстрапа: https://getbootstrap.com/docs/4.3/components/forms...

    Обратите внимание на стили
    .custom-control-input:checked ~ .custom-control-label::before { ... }


    Селектор .a ~ .b выбирает все элементы с классом .b, следующие за элементами с классом .a (на одном уровне дома). С помощью данной фишки можно исхитриться и делать много интересных вещей без js: слайдеры, выпадающее меню, реализовать любую логику, зависящую от двух состояний.

    ps как-то ради интереса реализовывал с помощью селекторов логику из 4х состояний, так что все ограничивается вашей фантазией ;)
    Ответ написан
  • Как правильно сделать фон с двумя картинками?

    @ned4ded
    Верстка, Фронтенд
    div {
      background-image: url("first-image-url"), url("second-image-url");
    }


    Так же через запятую можно спозиционировать, задать размеры изображениям, сделать их "приклееными" к краям экрана для нормально отображения на различной ширине.
    Ответ написан
  • Как убрать пустоту между блоками без Masonry?

    @ned4ded
    Верстка, Фронтенд
    .b2 {
        width: calc(50% - 2px); // 2px можете убрать, когда уберете бордер у b3
        float: right;
    }
    Ответ написан
  • Бред в валидаторе WC3 с чем связанно?

    @ned4ded
    Верстка, Фронтенд
    Проблема может быть в вашем сорс коде. Бразуер в инструментах разработчика отображает распарсенную структуру, которая хотя и строится по исходному html-коду, отличается от него исправлением некоторых ошибок разработчика.
    Ответ написан
  • Почему бутстрап неадекватно располагает элементы?

    @ned4ded
    Верстка, Фронтенд
    добрый день, я сначала хотел написать подробный ответ, но...

    проблема не в bs, прочитайте, пожалуйста, эти инструкции:
    https://getbootstrap.com/docs/4.3/layout/grid/ - про сетку,
    https://getbootstrap.com/docs/4.3/components/forms/ - про разметку форм,
    https://getbootstrap.com/docs/4.3/layout/utilities... - утилиты для лейаута

    все остальные проблемы должны отпасть сами собой.
    Ответ написан
  • Почему при нажатии кнопки в форме ничего не работает?

    @ned4ded
    Верстка, Фронтенд
    Могу предположить, что дело в типе кнопки. Попробуйте type="submit"
    Ответ написан
  • Слайдер пролистывает чере один слайд?

    @ned4ded
    Верстка, Фронтенд
    Добрый вечер. Файл app.js, содержащий исполняющий код для этого слайдера, подключен в двух местах. Полагаю, что удаление одной из ссылок на него ликвидирует проблему, т.к. eventlistner вешается на кнокпи дважды.
    Ответ написан
  • Как сделать переход по ссылке с помощью input?

    @ned4ded
    Верстка, Фронтенд
    Добрый день! Могу лишь помочь вам с высоты своих скромных знанйи (я в http не очень шарю). Но мне кажется, вы немного запутались в языке самого протокола и процессе отправки данных с формы.

    Текст отправляется именно такой, потому что ? - это %3F в unicode. Любое name с формы будет перекодировано в base64. Сам же ? в конец строки браузера подставляется при формировании запроса к серверу (т.е. браузером, а не вами), сл-но, его нужно исключить.

    Тоже самое происходит со знаком амперсанд. Браузером автоматически собираются параметры с формы и отправляются на сервер используюя такую структуру: key=value&key2=value2...

    Следующий код сформирует запрос ?kek=&results=<your_text> к целевому пути

    <form action="/targetPage.html" method="GET">
        <input name="kek" hidden>
        <input type="text" name="results" value=""> // здесь нужно будет ввести текст
      </form>


    Как видите, в таком случае после слова kek подставляется знак равенство, т.к. это соответствует протоколу http. Веротяно, можно настроить http сервер, который сможет принимать и обрабатывать запросы без = (без пустого параметра), но я в точности вас сейчас просветить по этому моменту не смогу.
    Ответ написан
  • Оцените вёрстку макета?

    @ned4ded
    Верстка, Фронтенд
    Привет из htmlacademy, тоже верстал этот макет )
    Индекс:

    1) Иконки на дашборде расположены неровно.

    2) Едет меню каталога товаров при переполнении.

    3) Спецификация товара, сделанная через флекс, не имеет свойства wrap, из-за чего при переполнении едет верстка.

    4) Псевдоэлемент after для кнопки Подробнее находится не по центру в firefox.

    5) В email форме нет стилизации бэкграунда для инпутов.

    6) Футер, по-моему, должен быть растянутым в края (как и фон для блока services, которого у тебя нет).

    Страница каталога:

    7) бэкграунд для фильтров не соответствует макету и должен быть в края.

    8) Bluetooth радиокнопки сделаны неровно.

    9) Цены под карточками сделаны неровно.

    10) При наведении на карточку товара должна становится прозрачной кратинка, а не серый фон + позиционирование неровное, какая-то линия на каждой карточкой по наведению.

    11) Пагинация без заливки.

    12) Селфи-палка «Следуй за мной» 4900 руь.

    13) И почти для всех блоков: ты используешь display:flex, но располагаешь элементы все равно используя margin. Да, в некоторых местах это необходимо, но, например, в меню каталог товаров, в info секции можно нормально расположить блоки, используя свойства флекс-боксов. А в каталоге (в лучшем месте для использования флекса), у тебя inline-block )

    14) В некоторых местах у тебя используются section теги, тогда как являются они, по сути, обычными дивами.

    Сколько времени тебе осталось до сдачи работы?) Я свою, помню, допиливал в последние минуты перед дедлайном ^^
    Ответ написан
  • Как сделать эфект ховер на карточки товаров как на tiffany или sunlight?

    @ned4ded
    Верстка, Фронтенд
    На Tifanny это реализовано с помощью js. Сильно сомневаюсь, что тут нужна доп. библиотека. При наведении на товар добавляется целый блок в секцию товара. После mouseleave (хз, как назвать это по-русски, отведение курсора?) блок удаляется.

    У них использован js, вероятно, для сокращения веса страницы, увеличения скорости рендеринга.

    Как ни странно, на Sunlight это реализованно сильно по-другому. Там через js добавляется только класс к блоку, все остальные его элементы уже заранее собраны.

    Совпадение стилей - случайность, возможно, дизайн кто-то у кого-то стырил (причем весь дизайн, у них совпадает не только эффект при наведении на карточку товара, но много чего еще).

    На чистом css реализовать можно, но без анимации. Что-то вроде:

    .card
        .card__info
        .card__info-more

    .card__info:hover ~ .card__info-more { display: block };


    Все это вы вполне могли узнать сами, используя инструменты разработчика ;)
    Ответ написан
  • Как зафиксировать текст на определенном месте страницы (при медиазапросах)?

    @ned4ded
    Верстка, Фронтенд
    Доброго дня.

    Предлагаю обернуть куб в контейнер, контейнеру задать относительное позиционирование (p: relative). Текст с p: absolute внутри такого контейнера будет позиционироваться относительно своего родителя, а не страницы. Если размер контейнера не будет изменяться, то не будет изменяться и позиция текста внутри этого контейнера.
    Ответ написан
  • Как прижать блоки один блок к низу а другой к правому верхнему углу?

    @ned4ded
    Верстка, Фронтенд
    В общем, проблем несколько:

    1) вы редактируете позиционку div-контейнеров, а не самих svg внутри этих контейнеров.

    2) у вас есть небольшие проблемы с пониманием того, как работает viewBox. 3 и 4 значением свойства задаются ширина и высота svg элемента. Но т.к. у svg нет как таковой ширины и высоты, т.к. это векторная графика, то это больше соотношение ширины ии высоты + их дефолтные значения для ширины равной 100%. Более того, внутренние элементы svg (у вас - path в обоих случаях) начинают свой отсчет координат от верхнего левого угла svg, соответственно, чтобы они полностью поместили в svg контейнер, нужно, чтобы сам контейнер удовлетворял соотношениям сторон, которые были использованы при создании svg-элементов.

    Лучший выход:
    1) Задайте для body

    display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;


    Это позволит нормально расположить див - контейнеры svg.

    2) Задайте самим дивам относительное позиционирование:

    #buttom {
      position: relative;
    }
    
    #top {
      position: relative;
    }


    3) Добавьте svg элементам классы class="top" и class="bottom"

    4) Задайте классам следующие стили, чтобы расположить их внутри див-контейнеров:

    .top {
      position: absolute;
      width: 60%;
      right: 0;
    }
    .bottom {
      position: absolute;
      bottom: 0;
    }


    5) Измените viewBox для обоих svg согласно соотношениям их сторон:

    <!-- Для примера на моем фидле использовано именно такое значение.
    Вообще соотношение ~ равно 5,2 к 1, расчитать можете его делением ширины на высота 
    (или наоборот, как вам удобно) -->
    <svg class="top" viewBox="0 0 690 133" > ... 
    
    <!-- примерно 7,2 к 1 -->
    <svg class="bottom" viewBox="0 0 1170 163" > ...


    Пример тут:
    https://jsfiddle.net/ned4ded/jbw09skj/3/

    Надеюсь, я понял вас правильно и вы имели ввиду именно ресайз svg элементов в зависимости от ширины страницы. Чтобы посмотреть функционирование - сократите ширину iframe элемента с отображением результата
    Ответ написан
  • Как подгонять макет под Pixel Perfect?

    @ned4ded
    Верстка, Фронтенд
    Доброго дня!

    У этого расширения есть поле "масштаб".

    5a140b32241b1741659528.png

    Вам нужен, судя по всему, масштаб = ~0,85.

    В любом случае, если не получится уменьшить масштаб картинки, то можно уменьшить масштаб отображения окна браузера (ctrl+колесо).
    Ответ написан
  • Как сделать автоматическое выравнивание блоков bootstrap по центру?

    @ned4ded
    Верстка, Фронтенд
    В общем, бутстрап 3 имеет свои неприятные особенности, выравнивание колонок - одна из них. Он написан на флоатах (в отличии от 4 версии) и единственное, что может помочь - это, пожалуй, динамиечское присвоение классов через js или на бэке. Это неприятный костыль, но флоатам нельзя просто так взять и напсиать: эй ты держись в середке.

    В чем суть: вам нужен js который при загрузке страницы будет считать количество загруженных элементов в каталоге. Если число кратно 3 - все огонь. Если остатаются 2 элемента, то предпоследнему элементу присваивается класс col-*-offset-2, если остается 1 элемент, то последнему элементу - col-*-offset-4. Офсеты добавляют margin слева любой колонке, имитируя нахождение n-го количества колонок слева от него.
    Вместо звездочки * - брейкпоинт (зависит от вашей сетки). По семантике работают как обычные колонки.

    Второй вариант: делать не через оффсеты, а через изменение класса колонки.
    Т.е. в случае двух элементов - col-*-6, в случае 1 - col-*-12
    Ответ написан
  • Приложение для верстки html-страниц?

    @ned4ded
    Верстка, Фронтенд
    Помимо ide, которые вам уже посоветовали, есть возможность использовать:

    1) таск ранер с BrowserSync или какой иной приблудой, позволяющей обновлять страницу после сохранения файла (browser livereload).

    Этот вариант требует знания js и умения настроить таскранер.

    2) в атоме (вероятно, как и в некоторых других редакторах, но эт не точно) есть возможность скачать доп. плагин, отображающий страницу и обновляющий ее после сохранения файла. Тут без ссылки, сорян.

    3) Есть редактор кода от adobe - Dreamweaver, в нем есть встроенный (из коробки) live preview. Сам редактор мне не нравится из-за своей негибкости и костности, но ты попробуй, может тебе понравится ;)
    Ответ написан
  • Как сделать чтобы блоки не сдвигались при уменьшении ширины?

    @ned4ded
    Верстка, Фронтенд
    Добрый день! У вас огромные проблемы с разметкой, она начинает ехать уже при разрешении в 1700px.

    Но отвечая на конкретный вопрос: сделать это можно с помощью свойства min-width: 1200px для того блока, который не должен сужаться. Стоит добавить, что в данном случае будет лучше, если весь сайт не будет изменяться при ширине меньше 1200px. Более того, на всех устройствах с шириной окна браузера менее 1200px будет появляться горизонтальная прокрутка.
    Ответ написан
  • Как применить фон ко всей странице сайта?

    @ned4ded
    Верстка, Фронтенд
    Добрый день!

    К сожалению, бесшевно подогнать такой фон невозможно, тому есть объективные причины:

    1) Ваш фон имеет неравномерный параметр inner shadow.
    2) Высота секций отличается друг от друга, фон каждый секции будет обрезаться в рандомном, непредсказуемом месте (bg-size: cover);
    3) Видно, что фон на картинке заканчивается не в том месте паттерна, в котором начинается (т.е. если поставить две эти картинки друг на друга, то они не будут стыковаться).

    Что можно сделать? Вам придется поработать с изображением, я предполагаю, что вы владеете ps и он у вас установлен. И тут возможно два варианта развития событий:

    А) Простой. У вас в psd шаблоне картинка фона и <конуса-колуна + стикера> не объединены и вы можете ее экспортировать отдельно. Тогда вам нужно:
    а.1) Создать из фона паттерн. Делать это придется подбором, если дизайнер вам не подвез паттерна.
    а.2) Применить паттерн фона к body с bg-repeat: repeat. Если фон имеет "вклееную" внутреннюю тень, то не забудьте осветлить изображение, чтобы оно было идентично по цветовой политре середине bg, или создайте паттерн из середины (как будет удобнее);
    а.3) Наложить на каждую секцию inner shadow.

    Б) Сложный случай, если ваш фон с конус-колуном представлен единым, неразделенным файлом. Тогда вам нужно выполнить весь А и подбирать bg-position для body попиксельно. Любое увеличение высоты первой секции повлечен за собой появление шва. Но выбора особого у вас нет.

    PS bg-size: cover скалирует изображение, подгоняя его под размер блока. Это еще одна проблема, которая вызовет шев. Уберите cover, поставьте 100%; В этом случае без repeat у вас появятся пустые области сверху и снизу, прикрыть которые можно тем же паттерном, что я описал в пунктах А-Б.
    Ответ написан
  • Как отображать меню на всю ширину?

    @ned4ded
    Верстка, Фронтенд
    В общем, получатся неприятные костыли, но все же:

    .drop-down.mob {
    /* отступ в мобильной версии не нужен */
      margin: 0; 
    
     /* с поддержкой в ie/edge у этих единиц измерения есть траблы, 
    но это наиболее безболезненный костыль без переписывания HTML */
      width: 100vw;
      right: 0;
    
      & a {
        display: block;
        float: none;
        min-width: auto;
      }
    
      & .gpoisk {
         width: 100%;
      }
    }


    btw, на этом сайте так же есть небольшая проблема с выпадающем списком на viewport >620px: бар фиксируется внизу экрана, но меню работает как для десктопа (видимо, выпадает вниз), сл-но, не работает вовсе.

    @media only screen and (min-width: 451px) { /* Замени на 621 */
     .mob {display: none;} 
     }
    @media only screen and (max-width: 450px) { /* Замени на 620 */
     .pc {display: none;} 
     }
    Ответ написан