Ответы пользователя по тегу HTML
  • Как выполнить функцию 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) отработает второй.
    Ответ написан
  • Какие особенности верстки под iPhone и как можно тестировать без данной техники?

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

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

    Ну и конечно, не забывайте предварительно тестировать Вашу вёрстку в "мобильном" режиме Хрома (о собственно писали выше).
    Ответ написан
  • Как лучше, Кнопка "бургер меню" в 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 ещё не придумали :)
    Ответ написан
  • Как сделать запрет на теги в textarea?

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

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Добрый день. Возможно ли сделать такой фон средствами CSS? Или же будет лучше сохранить картинку с этими полосками и все?
    Добрый день. Возможно. Я бы сделал, пожалуй, через repeating-linear-gradient так как меньше картинок = меньше запросов к серверу ну и я уверен, что CSS-будет более компактным, чем аналогичная картинка.
    Ответ написан
  • Правильно ли я делаю?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Подскажите, как лучше верстать проекты. Может быть вы посоветуете другие подходы в разработке
    Как лучше - зависит от конкретного случая, но, когда я занимался вёрсткой это выглядело примерно так:
    0. Используем препроцессор, какой-нибудь, например SASS (SCSS)
    1. Благодаря препроцессору, среди прочего - Вы можете дробить файлы стилей на сколь угодное число оных (хотя, я бы так делать не стал)
    2. CSS (при нашем подходе) мог делиться на следующие части:
    • Файл с основными (базовыми) стилями (в отдельных случаях он может быть включён в inline-виде прямо в заголовок страницы)
    • Файл с дополнительными стилями
    • Файл с общими медиа-запросами (по необходимости)
    • Файлы с медиа-запросами на каждое разрешение (каждый файл грузится в зависимости от разрешения устройства)
    • Файл с темой (если таковые есть)


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

    *Выше озвучен исключительно наш подход к работе, выработанный нами и для наших проектов, далеко не факт, что подобный подход подойдёт Вам.

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

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

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

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

    Выше описанные варианты касаются именно "PHP" (хотя и очень условно), но я бы всё-же сделал отображение информации такого характера на уровне HTML/CSS, они куда больше приспособлены для решения таких задач.
    Ответ написан