Ответы пользователя по тегу HTML
  • Адаптация сайта под мобильные устройства с помощью php mobile detect и как это повлияет на SEO?

    Wolfnsex
    @Wolfnsex Куратор тега PHP
    Если не хочешь быть первым - не вставай в очередь!
    Данное сообщение не претендует на исчерпывающий ответ, но думаю эта информация будет полезной. Лично я - так никогда не делал, т.к. мне в целом не нравится этот подход, прежде всего с точки зрения обслуживания двух версий вёрстки. Но есть ряд сайтов, в т.ч. и довольно серьёзных компаний, например таких как YouTube, ВсеИнструменты и другие, которые перекидывают мобильные устройства на мобильные версии сайта, что на мой взгляд, технически очень мало отличается от описанной Вами схемы (скорее даже наоборот, Ваша схема выглядит более интересно, т.к. всё действо происходит в рамках одного домена, без поддоменов и страниц-дубликатов).

    Но я бы всё же подумал, стоит ли так заморачиваться, мобильную версию сайта всё равно нужно адаптировать и содержать два набора шаблонов одновременно. Если Вам нужно вырезать какой-то контент - это должна быть графика, видео и прочие тяжелые элементы (т.к. вырезать основной текста страницы по моему, смысла нет) - возможно, эти элементы имеет смысл просто скрыть? Если мне не изменяет память, современные браузеры не будут грузить, скажем, изображения которые не отображаются на странице (в принципе Вы всегда можете это проверить самостоятельно, просто скрыв элемент и посмотрев логи HTTP-сервера). Либо же в крайнем случае добавить немножко JS'а, который будет управлять некоторыми частями контента страницы в зависимости от устройства.
    Ответ написан
    Комментировать
  • Как уменьшить размер div-a w html?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Не совсем понятно что Вы хотите.
    1. Есть DIV, в нём есть картинка, вам нужно что бы DIV был размером с картинку? Задайте картинке display: block; а DIV'у display: inline-block;
    2. Нужны конкретные размеры DIV'a? Задайте их, либо точные (в px'ах например), либо относительные (%, vw, vh)
    3. Или задайте DIV'у картинку фоном, укажите нужные размеры DIV'а и background-size.
    4. Воспользуйтесь CSS-Grid'ами и/или FlexBox'ами и различных проблем с размерами станет разительно меньше

    P.S. Для разных разрешений и типов экранов и устройств - есть CSS Media query
    Ответ написан
    Комментировать
  • Как сделать вот такой вот инпут?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Несколько примеров
    1. Один из самых простых
    2. Библиотека, если настроить её под себя, я думаю Вы получите описанный эффект
    3. Автодополнение (просто пример автодополнения)

    То, что Вы ищите называется либо "ComboBox", либо "Автодополнение" (Autocomplete), библиотек и вариаций на эту тему целая прорва.

    Из личного опыта - если Вы делаете проект не "от делать нечего" - рекомендую не злоупотреблять кол-вом библиотек в проекте. Либо делайте проще и самостоятельно, либо подбирайте какой-нибудь фреймворк который удовлетворит максимальное кол-во потребностей проекта (различных UI-фреймворков благо целый воз и маленькая тележка). Уже через несколько месяцев после их внедрения, при большом кол-ве библиотек, какая из них зачем и что делает - разобраться будет сложно даже автору кода...

    P.S.
    И еще момент, как сделать так что бы в конце подставлялось "руб". Сразу после цифры
    добавить к элементу (например <div>'у) в котором содержится число другой элемент, например :after { content: 'rub'; } Показать "на пальцах" к сожалению сейчас не имею возможности, но готовых примеров подобного - просто масса. Например по ссылке выше #2, когда добавляется тег - у него в конце есть крестик, по такому же принципу можно добавить "руб.", либо же добавить к самому INPUT'у боковое поле (как это например умеет делать Bootstrap) с нужным суффиксом.
    Ответ написан
    Комментировать
  • Как обновить данные php с помощью ajax?

    Wolfnsex
    @Wolfnsex Куратор тега PHP
    Если не хочешь быть первым - не вставай в очередь!
    нужно вставить код html в котором есть php
    Если Вы хотите, что бы этот код PHP выполнился - то скорее всего никак, т.к. PHP обычно выполняется на сервере.

    Как альтернативный вариант Вы можете разместить этот самый PHP-код на сервере, скажем по адресу /myphpcode.php, сначала обращаться к нему, примерно так:
    //Код исключительно для примера, на работоспособность не проверял
    var myphpcode = null;
    $.get('/myphpcode.php', function(data) {
        myphpcode = data;
    });


    А потом полученный результат вставлять куда Вам нужно.
    Ответ написан
    Комментировать
  • Как выполнить функцию js при нажатии на кнопку/ссылку?

    Wolfnsex
    @Wolfnsex Куратор тега HTML
    Если не хочешь быть первым - не вставай в очередь!
    Мигает он у Вас по тому, что перезагружается страница, а перезагружается она так как у ссылки есть атрибут "href", при href="" - ссылка ведет на ту же страницу, на которой браузер находится сейчас.

    Анимация там пожалуй вообще не нужна, достаточно "transition", выглядеть будет примерно так:


    P.S. Идея я думаю Вам понятна, дальше её можно развить самостоятельно :)
    Ответ написан
    Комментировать
  • Какой тут сделать ховер на ссылке?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    прозрачность?
    Да.
    Ответ написан
    Комментировать
  • Стоит ли оборачивать button в div?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Думаю, что особого смысла в "оборачивании" в контексте Вашего вопроса - нет. У любого из известных мне тегов, в т.к. и у <button/> можно выставить любые параметры, в т.ч. касающиеся его позиционирования.

    Отцентрировать его можно указав родительскому блоку display: block;, а самой кнопке margin: auto; или же отцентрировать её через flex...
    Ответ написан
  • В HTML коде динамической страницы два тега Canonical. Правильно ли это? Какой тег будет приоритетным?

    Wolfnsex
    @Wolfnsex Куратор тега HTML
    Если не хочешь быть первым - не вставай в очередь!
    На странице где имеются два тега "canonical" какой из этих двух тегов в приоритете, верхний или нижний?
    и правильно ли вообще, когда на странице два тега canonical
    По логике HTML'a приоритетным будет тот тег, который объявлен последним (он должен переопределить все предыдущие). Но, так как эти теги предназначены в первую очередь для ботов - есть мнение, что разные боты могут вести себя по разному, в первую очередь по тому, что по правилам (если память мне не изменяет) - "rel canonical" указывается именно в <head/>, по этому есть подозрение, что боты в каких-то случаях могу проигнорировать "нижний" тег, а в каких-то проигнорировать то, что тег нарушает правила и переопределить значение...

    "Совсем точно", я думаю мы сможем уточнить либо у поддержки каждого отдельно взятого поисковика (или автора бота), либо "методом научного тыка" (то есть уже по факту).

    UPD. P.S. Я видимо плохо смотрел, в первый раз... Если у Вас оба тега указаны тега указаны внутри <head/>, с большей вероятностью (по правилам HTML) отработает второй.
    Ответ написан
    6 комментариев
  • Какие особенности верстки под iPhone и как можно тестировать без данной техники?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Какие особенности верстки под iPhone и как можно тестировать без данной техники?
    Особенности вёрстки в рамках статьи или тем более ответа - Вы вряд ли сможете найти, по причине большой обширности данного материала и сложности его изложения, особенно с учётом того, что разные устройства/браузеры могут давать различные "артефакты" (назовём это так).

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

    Ну и конечно, не забывайте предварительно тестировать Вашу вёрстку в "мобильном" режиме Хрома (о собственно писали выше).
    Ответ написан
    4 комментария
  • Как лучше, Кнопка "бургер меню" в html или генерировать через js?

    Wolfnsex
    @Wolfnsex Куратор тега HTML
    Если не хочешь быть первым - не вставай в очередь!
    У верстальщиков есть негласное правило - то, что можно сделать CSS'ом (т.е. обойтись без JS) - стоит делать именно CSS'ом. Главное, не гиперболизировать это правило и не возводить его в степень абсолюта. Оно работает в тех случаях, когда трудозатраты на оба варианта (JS/CSS) соизмеримы и вариант с CSS'ом не влечёт за собой замусоривание кода (например, слайдеры можно делать в т.ч. и на "чистом CSS", но такой подход вряд ли можно будет считать хорошим решением в большинстве случаев).
    Ответ написан
    Комментировать
  • Одинарные и двойные кавычки, какие лучше?

    Wolfnsex
    @Wolfnsex Куратор тега HTML
    Если не хочешь быть первым - не вставай в очередь!
    Одинарные и двойные кавычки, какие лучше?
    В ряде языков программирования - двойными кавычками обрамляется строка с переменными или управляющими символами (перевод строки, возврат каретки, и т.д.), одинарными - константные строки (при этом управляющие символы в них тоже не интерпретируются). *просто имейте в виду, что в ряде случаев (в некоторых языках) кавычки могут иметь не только разное начертание, но и по разному интерпретироваться.

    В HTML - как "де факто стандарт" изначально было принято писать все теги большими буквами и использовать двойные кавычки, потом со временем все (где-то в районе момента появления HTML4-4.01) как-то "переехали" на нижний регистр тегов, но двойные кавычки - так и остались.

    В CSS - обычно применяют одинарные. Но, в CSS кавычки не так уж и часто можно встретить и в целом это язык довольно линейный, по этому там этот вопрос на мой взгляд не особо принципиален. *Не редко встречал например такой вариант, когда названия шрифтов обрамлены двойными кавычками, а URL'ы - одинарными (хотя по стандарту - обрамление URL'ов кавычками не является обязательным) - лично у меня даже такие варианты никакого дискомфорта не вызывают.

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

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    почему не срабатывает высота у wrap,
    По тому, что у родительского (по отношению к нему) элемента не задана высота. Проценты - это относительная величина, в данном случае, она будет равна 100% height родителя, а height у родителя не задан(а).

    P.S. Если добавить родителю height: 100%;, думаю проблема решиться.
    Ответ написан
  • Видимый блок внутри скрытого блока?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    можно ли header_promo сделать видимым?
    Можно, но не так как Вы это пытаетесь сделать. Я думаю, Вам стоит просто вынести этот блок выше или назначать (не)видимость нужных блоков на каждом варианте разрешения отдельно, либо скрывать прочие (соседние) ненужные блоки, а этот блок оставить как он есть.

    P.S. Ещё можно добавить порцию извращений с помощью JS'а, но так делать я бы не рекомендовал категорически.
    Ответ написан
    Комментировать
  • Как бы вы сверстали такую таблицу?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Я бы сделал например так:
    Ответ написан
    Комментировать
  • Где брать уникальные иконочные шриты с макета?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Где брать уникальные иконочные шриты с макета?
    У дизайнера.

    создаёте ли вы сами иконочные шрифты вытаскивая svg с макета
    Из личного опыта - нет. Как дизайнер так и делаем. Если дизайнер прислал не так, то в следующий раз пришлют нового дизайнера. Дизайнер сделал иконки шрифтом - значит так и верстаем. Сделал их SVG'шкой? Значит верстаем SVG'шкой. Сделал PNG - соответственно... Если он что-то не прислал - не грех конечно ему напомнить, что "а пришли ка мне "вот это".

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

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    По моему, вот здесь на Ваш вопрос уже ответили...
    Ответ написан
    Комментировать
  • Как кастомизировать bootstrap 4?

    Wolfnsex
    @Wolfnsex Куратор тега HTML
    Если не хочешь быть первым - не вставай в очередь!
    Нет ли подобного сервиса для 4 https://getbootstrap.com/docs/3.4/customize/ ?
    Судя по всему нет, но что Вам мешает открыть исходники, поправить 2 строчки и собрать страп самостоятельно?

    Например, в файле _variables.scss есть такие строчки:
    // Grid columns
    //
    // Set the number of columns and specify the width of the gutters.
    
    $grid-columns:                12 !default;
    $grid-gutter-width:           30px !default;
    Ответ написан
    Комментировать
  • Возможно ли файлы сайта упаковать в .exe'шник?

    Wolfnsex
    @Wolfnsex Куратор тега HTML
    Если не хочешь быть первым - не вставай в очередь!
    вопрос: можно все файлы сайта упаковать в один exe'шник?
    На вскидку... - можно. Выглядеть будет примерно так:
    1. Берёте какой-нибудь OpenServer (OSPanel) или любой другой пакет аки "WAMP" (идеально будет конечно взять чистый веб-сервер, если остальное вам не надо)
    2. Упаковываете его в SFX-архив (7-zip, ZIP, RAR или любой другой)
    2.1 В архиве по окончании распаковки запускаете скрипт (bat-файл, написанный ранее), который в свою очередь запустит сервер, откроет ваш сайт и так далее (проведёт все остальные необходимые операции)
    3. Где-то под конец можно написать ещё какой-то скрипт, который по прошествии какого-то времени (или по наступлению какого-то события - удалит весь образовавшийся мусор)

    Таким образом можно упаковать даже сайт со всякими серверными скриптами и прочими таким делами. Процедура думаю не очень простая и тривиальная - но Вашу задачу решит.

    Если у Вас совсем простой сайт (только HTML/CSS/JS/картинки, без серверной части) - можно просто по окончании распаковки SFX-архива запускать головной HTML-файл.

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

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
  • Есть ли альтернативный подход для верстки?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Есть какие-любо предложения? Неужели в 2019 году люди продолжают верстать вручную?
    Я конечно могу ошибаться, но насколько мне известно - на данный момент всё ещё продолжают. Относительно недавно (месяца 2-3 назад, приблизительно) сталкивался с подобным вопросом и... могу сказать, что "абсолютное позиционирование элементов на странице" - это не ключевая проблема. В том смысле, что какой-то софт эту проблему решать уже научился (какой именно - сейчас точно не вспомню, под "тест" попало всё, что уадалось найти в интернете, включая различные онлайн-сервисы). Основная проблема, как я уже говорил сместилась в с "абсолютного позиционирования" в сторону г-о кода, все образцы в той или иной мере обильно гадили в конечный код.

    Есть много разных вариантов, облегчающих жизнь в целом, которые Вам наверняка известны не хуже чем мне, такие как препроцессоры, подготовка различных шаблонов, сборщики и т.д. но, того, чего Вы хотите, боюсь пока ещё не придумали и судя по всему придумывать не спешат. В мои руки (для анализа) попадал даже код с шильдиком "создано с помощью нейросети", который не многим лучше чем то, что генерирует среднестатистическая программа аналогичного направления.

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

    P.S.
    не застал табличную верстку, а может быть оно и к лучшему
    Я застал времена, когда CSS ещё не придумали :)
    Ответ написан
    4 комментария