Как сделать чтобы placeholder был сверху поля ввода?

natojezlo, да? Ну вот задал:

Как сделать чтобы placeholder был сверху поля ввода?

С какого перепуга он по-умолчанию слева наверху? :))


Он там никогда не был.

Артем фамилия, чтобы достичь этого эффекта, вам нужно создать вручную отдельный элемент (span, div, label) с вашем текстом и абсолютно позиционировать его поверх input'а внутри общего родительского контейнера.

Если будете использовать именно тег label, убедитесь, что он вам не нужен в качестве именно label.

Какой должен быть подход к выбору архитектуры интернет-магазина?

Вам вопрос лучше разбить на несколько.

Про мобильную версию.
Сомневаюсь, что у вас OZON планируется, поэтому адаптивность вам более чем подойдёт. Но тут зависит от степени структурной разницы frontend'a десктопной и мобильной версий. Но делать две разные версии и вообще дизайн — у вас не хватит бюджета, о чём ниже.

Про бюджет.
С учётом бюджета от готовых решений вам никуда не деться. Первой жертвой будет движок, поэтому выбирайте любой популярный движок. Второй жертвой, очевидно, — весь frontend: дизайн и шаблон. (Третьей жертвой будет ваш сосед. Шучу.)

P. S. Про Bitrix. Разработка и доработка Bitrix — достаточно долгие и дорогие штуки. Готовые решения, как правило, ещё более косо сделаны, чем для того же WordPress.

Проблема с браузером хром?

С Chrome всё в порядке.

Текст в консоли Chrome можно спокойно красить и т. п. с помощью CSS:
css.yoksel.ru/funny-little-console

Смотрите на вашем ресурсе причину этих сообщений в index.js.

Как подобное верстать?

Илья отсутствует, на тогда можно пробовать SVG на фон с абсолютным позиционированием, у SVG должен быть атрибут preserveAspectRatio="none". Если это не проканает и линии будут искажать толщину или будет сложно состыковать с краями самой сетки, то тогда только JS поможет в сочетании с SVG или canvas.

Теоретически это можно решить так. Дальше не смогу подсказать, ибо лень пробовать и искать точное решение.

Как подобное верстать?

Антон Р., это направляющие, которые формируют колонки и так называемый ритм. Просто тут они визуально показаны. Я думаю, эти скриншоты взяты из разряда показать, как происходил процесс. А в самом макете их нет.

Как подобное верстать?

Если вы убёрете горизонтальные направляющие, то увидите, что сетка тут абсолютно обычная.

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

Можно ли как-то задать стили только для IE?

Тимур Турсунбаев, если придется поддерживать IE11 в проекте, то о Grid можно забыть :))

У меня пока все проекты требуют его поддержки, к сожалению.

Можно ли как-то задать стили только для IE?

Тимур Турсунбаев, ну лучше тогда ту штуку сверху использовать, что я прислал, так логичнее. Она тоже работает.

Можно ли как-то задать стили только для IE?

Тимур Турсунбаев, ну это тогда надо весь нормальный код оборачивать в @supports. Не очень хорошо это.

Можно ли как-то задать стили только для IE?

Тимур Турсунбаев, IE не поддерживает @supports.

danilr, вы препроцессор используете, как я понимаю? Если SCSS, то так:

.pagination {
    display: flex; 
    margin-bottom: 10px;
    
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        display: inline-block;
        margin-bottom: 0; 
    }

}

Если просто CSS, то так:

.pagination {
    display: flex; 
    margin-bottom: 10px;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .pagination {
        display: inline-block;
        margin-bottom: 0; 
    }
}

А вообще, если вы верстаете под IE11, то он спокойно поддерживает большинство решений на flex. Иными словами, flexbox в 99% случаев в IE11 не требует чего-то уникального.

Можно ли как-то задать стили только для IE?

danilr, IE вообще не поддерживает @supports, поэтому всех хаки для IE построены на @media.

Код автора ответа — правильный, но этот хак можно упростить ещё:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .class {
     /* Тут стили, которые будут работать только в IE */
   }
}

Как добавить класс к тегу li стандартного меню WordPress?

У вас вопрос неправильный. Поменяйте название вопроса на: «Как добавить класс к тегу li стандартного меню WordPress?»

Почему верстка на div - это зло?

4. Такие сайты сложно маштабируются.

Навряд ли наличие семантических тегов как-то повлияет на масштабируемость проекта.

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

Да, вы можете на одних div'ах создать очень масштабный и успешный проект (но это неправильно, ибо семантика — тоже часть технологии).

Просто введите в обиход всякие header, main, footer, aside, section, h1, article, figure, p, nav, ul, li — и будет вам счастье. Ибо чтобы тотально разбираться в особенностях семантики — это очень много информации. Это придёт с опытом и чтением документации/форумов и пр.

Есть ли отличия Sass от SCSS?

Различие только в синтаксиси. Если вам не нужны фигурные скобки, точки с запятой, а также длинное написание @mixin, @include и пр. — ваш выбор SASS.

Я же терпеть не могу синтаксис SASS и пользуюсь SCSS. К тому же он спокойно поддерживает простой CSS-код внутри, если нужно вставить его. А так, по возможностям они идентичны.

Первая статья из Интернета описывает картину чуть более полно:
https://www.internet-technologies.ru/articles/v-ch...

Как избежать внезапное появление рекламы в адаптивном шаблоне?

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

Есть смысл ставить такой прелоадер на область с контентом. А контент получать через AJAX.

Как избежать внезапное появление рекламы в адаптивном шаблоне?

midarovrk, ну да, так и надо. Нужна проверка с вашей рекламой. Вот отсчет скрипта нужно вешать не на клик, как в скрипте выше, а именно на момент готовности блока рекламы. Ну и плюс, там нет механизма, мол, если человек кликнет второй раз в течении этих 3 секунд, то уже переходить по ссылке. Иначе человек будет не понимать, что там вообще происходит, почему не работает ссылка.

Ну словом, вам нужно доработать, надеюсь, моя идея вам поможет в итоге :))

Как реализовать такое наведение с изображением поверх?

Тогда уж лучше так, чтобы разметку не засорять:


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

Как избежать внезапное появление рекламы в адаптивном шаблоне?

midarovrk, ну а этого, если вы не знаете высоту рекламных блоков, вы не избежите, ибо они подгружаются после загрузки страницы со стороннего ресурса.

Если же у рекламы однотипная высота, то я бы поставил её изначально. А мне кажется, что она однотипная. Или же, что лучше, я думаю, она берется на основе соотношения сторон, поэтому сделайте её хаком на padding-bottom, если это возможно.

Как избежать внезапное появление рекламы в адаптивном шаблоне?

midarovrk:
1. Страдать
2. Делать минимальную высоту для блока рекламы
3. Через JS блокировать клики у ссылок до тех пор, пока реклама не загрузится
5. Скрывать блоки с комиксами до тех пор, пока реклама не прогрузится
6. Переместить рекламу в иное место
7. Придумать что-нибудь ещё с JS и отображением
8. Первый клик по рекламе заблокировать с помощью JS в течение 2–3 секунд после загрузки рекламы, чтобы случайное нажатие не сработало. Если человек в течение этих 2–3 секунд нажмёт снова или это время пройдёт — разблокировать клики

Мой фаворит — 8-й вариант. Иных идей у меня больше нет в голове.