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

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

    Лучше написать верстку с уклоном на статику: на чистом html+css,
    Я бы написал именно так, если это возможно. Это как минимум должно быть быстрее чем то же самое + JS.

    на bootstrap с добавлением css
    Это скорее всего будет быстрее с точки зрения получения результата, но на счёт качества такого решения - есть большие сомнения. Вообще, одно из правил HTML'а/вёрстки - если есть возможность реализовать что-то меньшим кол-вом элементов - нужно делать именно так. То есть, если физически есть возможно сделать что-то с помощью одного <div/>'а, а не двух, трёх и т.д. - нужно делать это одним <div/>'ом (без фанатизма конечно).

    или сделать более динамично: на php, реализовав все через цикл для получения вывода элементов: «Категория», «Товары», «О нас» и т.д.?
    Это напрямую зависит от Ваших задач и потребностей. Если Вам нужно что бы меню формировалось на сервере - то его нужно формировать на сервере. К вёрстке непосредственно это не относится. Лично я в своей практике использую и тот и другой подход, а иногда оба сразу (часть меню - статическая, часть - динамическая), в зависимости от желаемого результата.

    P.S. Про "функциональность" не могу судить в контексте данного вопроса, но по скорости загрузки, - вариант без Bootstrap'ов и JS - должен быть максимально быстрым.
    Ответ написан
    Комментировать
  • Какой тут сделать ховер на ссылке?

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

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

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

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

    1. Задавать столбцам фиксированную ширину
    или
    2. Использовать одну таблицу
    Ответ написан
  • Как сделать на чистом css, когда в родительском пункте есть разделы, то через before показать стрелочку?

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

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

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

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

    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
    Если не хочешь быть первым - не вставай в очередь!
    Почему происходит задержка анимации?
    По тому, что у блока который Вы сворачиваете не фиксированная высота (точнее по тому, что вы меняете её на height: auto). И в Вашем случае, он сворачивается так, буд-то он имел высоту 500px, а не ту, которую он имел фактически (если вы зададите ему фактическую высоту в 500px или растянете его с помощью содержимого до 500px - задержки не будет).

    "Хорошего" решения - нет. Единственное решение в данном случае - не используйте height: auto.
    Ответ написан
    2 комментария
  • Где брать уникальные иконочные шриты с макета?

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

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

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

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

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

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Пишу родителю display: inline-grid и дети остаются так же в положении column.
    Я думаю, помимо типа отображения, стоит ещё и колонки например задать? Например так: grid-template-columns: 1fr 1fr 1fr; (ну и прочие необходимые параметры, по мере необходимости)
    Ответ написан
    5 комментариев
  • Как правильно расположить стили CSS по папкам если их много?

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

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

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

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

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

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