Задать вопрос
Shlop

Сергей Хлопов

Full Stack Developer (PHP/Laravel/JavaScript)
Ответы пользователя по тегу CSS

  • Как сверстать такой блок?

    Shlop
    @Shlop
    Full Stack Developer (PHP/Laravel/JavaScript)
    Я бы наверно делал вот так (ниже ссылка на codepen). Возможно чем-то поможет.
    По поводу фоновых кружков:
    • Я бы сделал их тегом img (экспорт из граф. редактора в svg) т.е. было бы 3 svg файла
    • Прописал бы им position: absolute;
    • Для картинки с фоновыми кружками сделал бы z-index=1, а для кружка с иконкой z-index=2
    • С помощью top, left, right, bottom картинку с фоновым кружками расположил как требуется

    Ещё обычно на небольшой ширине экрана с такими карточками бывает что заголовок переходит на вторую строку, и получается не ровно. К примеру вот так:
    62dc631128892163095748.png
    Это можно исправить добавив свойство height (высоту) блоку с названием.
    В моём примере на ширине 916px заголовок переходит на вторую строку, я добавил медиа выражение которое на этой ширине делает высоту блокам с названием карточки равную двум строкам, что бы ровно было.

    Ответ написан
    Комментировать
    Комментировать

  • Как подключить сайт написанный на html к базе данных mysql?

    Shlop
    @Shlop
    Full Stack Developer (PHP/Laravel/JavaScript)
    Для того что бы подключиться к базе данных можно использовать язык программирования PHP.
    На официальном сайте у них есть руководство по данному языку. Можно ещё к примеру в интернете искать/смотреть какие-то статьи/уроки/книги.
    С помощью php можно к примеру:
    • Когда пользователь отправляет форму обратной связи отправить сообщение на почту с данными из полей формы;
    • Сохранять/получать данные из базы данных;
    • Сделать корзину как в интернет магазинах (как вариант с помощью сессии);

    Если вы работаете на Windows то в качестве локального веб сервера можно использовать к примеру
    Open Server на данном локальном сервере можно вести разработку сайтов (скриптов).

    В будущем можно будет ещё посмотреть что такое AJAX, как делать AJAX запросы в javascript.

    Когда уже будет какое-то знание языка программирование и понимание можно будет посмотреть на какую нибудь CMS систему или php framework, потому что писать всё с нуля это может быть долго и трудно.
    А разрабатывая сайты на таких системах есть уже набор каких-то готовых инструментов
    Ответ написан
    Комментировать
    Комментировать

  • Как лучше сверстать галерею изображений разного размера?

    Shlop
    @Shlop Автор вопроса
    Full Stack Developer (PHP/Laravel/JavaScript)
    В общем кажется решил свою проблему, сделал эти две картинки у которых разная высота была когда они рядом стояли друг с другом, одинакового размера, сейчас они - 416x620, в итоге получилось вот что:
    5fe469020a074668817950.png
    И для картинок сделал min-height: 111px; минимальную высоту задал, что бы картинки при уменьшении не становились меньше заданной высоты, правда из за этого свойства пропорции не будут сохраняться но у меня пока что с этим проблем нет
    Ответ написан
    Комментировать
    Комментировать

  • Как выровнять по высоте текст?

    Shlop
    @Shlop
    Full Stack Developer (PHP/Laravel/JavaScript)
    Здравствуйте, я бы сделал скорее всего вот так,
    Кстати в будущем рекомендую посмотреть методологию БЭМ , тут рассказывается о том как именовать классы, возможно сейчас Вас это только запутает, из за того что Вы только начинаете, поэтому лучше может быть чуть позже посмотреть про БЭМ когда уже научитесь верстать.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать круг с пунктами внутри?

    Shlop
    @Shlop
    Full Stack Developer (PHP/Laravel/JavaScript)
    Накидал тут кое что, может конечно можно более элегантно это всё сделать

    И есть ряд моментов:
    1. Данное решение не универсальное
    2. При смене шрифта может выглядеть не красиво
    3. При смене текста в пунктах тоже может выглядеть не красиво
    4. Позиционируется не автоматически
    Ответ написан
    Комментировать
    Комментировать

  • Как настроить multiselect выпадающим списком с результатом во втором окне?

    Shlop
    @Shlop
    Full Stack Developer (PHP/Laravel/JavaScript)
    Ещё таких элементов не делал, погуглил, вот что удалось найти: loudev.com какая то библиотека, которая зависит от Jquery для multiselect. Может быть конечно это будет неприемлемо, т.к. из за одного multiselect, подключать jquery а затем данную библиотеку, не очень верно в некоторых ситуациях.
    А если писать своё решение, думаю что алгоритм его работы должен быть такой:
    • Необходимо получать выбранный элемент из селекта (выпадающего списка)
    • Из селекта (выпадающего списка) выбранный элемент скрыть/удалить (Это если из списка выбранный элемент должен пропадать)
    • Отобразить выбранное значение в блоке ниже
    Ответ написан
    Комментировать
    Комментировать