Ответы пользователя по тегу Вёрстка
  • Как привести в соответствие масштаб системы win(10) и браузера?

    Никакой математики. Это нормальное поведение системы. То что у пользователя масштаб 75% это его предпочтения, это и подразумевает, что сайт будет выглядеть на 75% основного масштаба. Вы для кого-то его подстроили, то есть по факту сделали все размеры больше. А если человеку в целом удобнее, когда все сайты выглядят меньше?
    Ответ написан
    Комментировать
  • Как верстать сложные дизайны?

    Ну а как человек учится ходить? Пробует, пробует и еще раз пробует. У вас задача такая же, понимание приходит с опытом. Сейчас вы можете только абсолютное позиционирование предложить, потом вы узнаете об svg, размерах в процентах, размерах в пропорциях окна браузера, узнаете что есть такая интересная вещь, как clip-path, и вся ваша геометрия уже покажется не такой сложной.

    Двигайтесь от простого сложного, зачем сейчас пытаться сверстать то, о чем вы спрашиваете, если вы, допустим, не можете еще реализовать свою сетку?

    Можете посмотреть макеты в интернете (сложные на ваш взгляд), открыть исходный код и посмотреть как это сделано. Само по себе решение во сне вам конечно же не придет. Либо подсмотрели, либо рассказали, либо сами додумались путем проб и ошибок.
    Ответ написан
    Комментировать
  • Нормально ли подглядывать при верстке про теги?

    Когда вы учили в школе дифференциалы, у вас была таблица дифференциалов. Когда учили интегралы - таблица интегралов, которые засматривались до дыр. Весь процесс обучения это постоянное использование каких-то подсказок, потому что все сразу запомнить и начать пользоваться этим - невозможно.

    Можно привести миллион примеров из жизни, когда приходится куда-то подсматривать. Это нормально.

    Потом вы уже засмотрите эти теги так, что ночью сонным спокойно будете говорить какой тег за что отвечает, но на это нужно время.
    Ответ написан
    Комментировать
  • Как верстать в принципе?

    Это нарабатывается со временем, вам надо весь макет, грубо говоря, визуально себе самому разбить на блоки, так вы будете понимать где и что позиционировать лучше, где что писать и тд. Сейчас я могу посмотреть на любой макет и я уже в голове представляю всю его структуру, код и как это должно работать.

    В вашем же случае чтобы уйти от списка, нужно:
    ul {
       list-style:none;
       margin:0px;
       padding:0px;
    }

    То есть вам достаточно просто практиковаться, практиковаться и еще раз практиковаться.
    Ответ написан
  • Должен ли дизайнер отдавать папку с файлами вместе с макетом "по умолчанию"?

    Как уже говорили, что указано в ТЗ, то и делается. Но расскажу так, как это должно быть по-правильному, с моей точки зрения:
    1. Большинство иконок сейчас берутся с flaticon и тд. Там можно взять любое разрешение иконки. Как только диз добавляет иконку, он ее сразу же добавляет в папку с иконками, чтобы не пришлось ее скачивать.
    2. Все изображения, которые в макете проскакивают, добавляются в папку оригиналами.
    3. Шрифты добавлются так же в папку, только если их нельзя подключить с гугл фонта и не они не являются стандартными.
    Ответ написан
    Комментировать
  • Как правильно сверстать путь - "змейку"?

    5b60388f11ce8990114373.jpeg
    Ничего сложного, если напрячь извилины и увидеть ваш рисунок несколько иначе. Тогда выходит что ваша змейка это просто 3 блока с 33..33% шириной. Просто для первого блока не показывается правая и нижняя граница (border) и для верхнего - верхняя и права. Закрутку даете через border-radius, с тем, что между ними находится можете как хотите разобраться. можете сделать полосой, можете сделать блоком с только одной границей. Расположить проще всего флексами.
    Ответ написан
    Комментировать
  • Какое CSS свойство отвечает за центрирование текста у кнопок по вертикали?

    Именно с помощью line-height, ну или через флексы.

    jsfiddle.net/72p1wmLs/1
    Ответ написан
    Комментировать
  • Результаты работы верстальщиков - чего ожидать?

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

    Мне часто приходится включаться в работу над проектами, которые вот так были сверстаны, часто встречается:

    1. Вместо button вставляются теги <a>, в стилях же описываются эти ссылки, а не кнопки. В итоге, поправив ссылку на кнопку, она уже у нас не будет стилизована. Такого быть не должно.
    2. То, что должно верстаться блоками, лепится картинками.
    3. Чекбоксы и прочее стилизуются по id, а не по классу.
    4. Прочие косяки, когда стилизация задается строго по id, а не по классу или обертке.

    Однако, помимо самой халтуры от верстальщиков (человек должен сам понимать что сайт будет 100% подправляться без его участия), есть доля нареканий и заказчикам. К сожалению, не все считают нужным (либо просто не знают), что все эти моменты должны обсуждаться. Что верстать картинками, что блоками и тд.

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

    Отвечу на примере бутстрапа, но подойдет под что угодно, как вы понимаете.

    1. Допустим у вас есть два блока:
    <div class="row">
    	<div class="col-xl-6"></div>
    	<div class="col-xl-6"></div>
    </div>

    Во второй блок .col-xl-6 вы помещаете img и самой картинке дописываете стиль: width:inherit;, при этом максимальная ширина картинки не должна быть 100% (max-width:100%;), этого условия вообще не должно быть для нее. Тогда у вас картинка будет становиться по 100% ширине и вылезать за пределы блока.

    2. Как вы верно сказали, для того чтобы не было полосы прокрутки - нужно делать overflow:hidden для блока. Но вам нужно делать не для контейнера (если вы имеете ввиду бутстраповский контейнер), а для самой секции, либо body. В таком случае проблем с тенью не возникнет.
    Ответ написан
    1 комментарий
  • Какие посоветуете сервисы по нарезке psd в html/css?

    Наполовину приснилось. Возможно вам приснился Avocode.

    Но про превращение макета в 80-90% кода, это вы загнули. Это получится какой-то огрызок от того, что вам нужно. Верстка, да и понимание верстки в таком ключе, как мне кажется, это уровень школы. Так нельзя.
    Ответ написан
    Комментировать
  • Под какой браузер вы верстаете в первую очередь?

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

    Так же смотрю сначала Хром, как правило все недочеты меняются небольшими правками стилей. Все самое интересное будет если вас будут просить поддерживать старые браузеры, но я, в силу своей либо лени, либо некомпетентности - старые браузеры обхожу стороной (хотя иногда приходится, если есть четкое понятие что сайтом будут пользоваться в большей части старыми браузерами).
    Ответ написан
    Комментировать
  • Как исправить непонятный баг с шириной в инспекторе Firefox?

    Ну, во-первых, забудьте про прописывание кастомных стилей на одном же уровне что и .col-md-* Не надо так делать. Во-вторых, не уверен, но возможно, как раз эти следующие стили и перебивают вашу ширину. В-третьих, если это четвертый бутстрап, то возможно косячите где-то с разметкой, потому что флексы.
    Ответ написан
    1 комментарий
  • Зачем при верстке добавлять классы "js"? Я понимаю - разделение представление и логики. Но зачем это нужно? Зачем нужно это разделение?

    Плохого в том, что у вас есть 5 разных кнопок, но все запускают одно и то же событие. Вы будете вешать один и тот же обработчик на 5 разных айдишников? или все-таки создадите один класс, пропишите только для него обработчик и будете писать этот класс для всех кнопок, на которые вы хотите повесить какое-то действие? Я думаю ответ очевиден. А классы вида .js-add-to-cart делаются для того, чтобы было проще отыскать ваш функционал в коде, ведь сразу понятно что сюда повешен обработчик какой-то, чем пытаться потенциальный ID выискивать в вашем js коде.
    Ответ написан
    9 комментариев
  • Как грамотно сделать данный список товаров?

    Натолкнет на рассуждения: https://medium.com/@andybarefoot/a-masonry-style-l...
    Ответ написан
    Комментировать
  • На чем можно реализовать подобную карту?

    Делаете на svg, в исходном документе у вас будут все это точки, через circle, задаете каждому ID, помещаете документ на сайт, к айдишникам 'цепляетесь' и показываете нужную информацию.
    Ответ написан
    Комментировать
  • Как реализовать такое?

    Обычный вертикальный аккордеон с некоторыми изменениями. Ничего необычного.
    Ответ написан
    Комментировать
  • Составили требований для верстальщика, не перегнули ли палку?

    Не вижу каких-то чрезмерных требований, наоборот их можно еще дополнить. Если читать сей "документ", может показаться что вы излишне требовательны, но на деле для нормального верстальщика все то что вы описали является нормой. Про бэм тоже не понял.
    Ответ написан
    Комментировать
  • Что значит верстать с помощью "pyton"?

    Скорее он просто решил поугарать над вами, либо он как тру child, освоив hello world решил попонтоваться знаниями php и python.

    Вертка это верстка, будь то верстка шаблона или верстка журнала с газетой. Это перенос вашего изображения в какой-то понятный формат. В данном случае HTML.

    Даже если представить себе "верстку на php" это будет все равно php-код вперемешку с html-кодом. php синтаксисом вы не создадите понятный браузеру документ (за исключением обычного hello world). Аналогично с питоном, они оба выступают в качестве серверных языков программирования.
    Ответ написан
    Комментировать
  • Как сделать такие треугольники?

    Треугольники CSS: htmlbook.ru/blog/treugolniki-cherez-css

    Создаете к li два элемента :before, :after, по ссылке выше берете треугольник нужного вам направления. Потом какой-то из псевдоэлементов двигаете на 3 пкс вправо, чтобы он выступал немного. Вот в общем и все
    Ответ написан
    Комментировать