Ответы пользователя по тегу CSS
  • Как задать высоту скроллбару?

    @alexalexes
    Никак.
    В css у скроллбара можно отрегулировать только следующие параметры, и то, любой браузер этим может пренебречь:
    - ширина видимой области скроллбара;
    - цвет подложки скроллбара;
    - цвет ползунка скроллбара.
    Вертикальный скроллбар по высоте всегда занимает всю высоту видимой области прокручиваемого блока. Высота ползунка определяется особенностями браузера, со стороны контента сайта она не регулируемая.
    Ответ написан
    Комментировать
  • Как лаконичнее всего выбрать селекторы?

    @alexalexes
    Если они лежат на одном уровне, и у их родителя есть определенный id/class, то этим дивам вообще не нужно никак обозначаться, чтобы на них навешать стили:
    контейнер_div_ов > div
    {
      /* стили элементов абвгдейки */
    }

    Можно уточнить, что все div_ы с id атрибутом использовать:
    контейнер_div_ов > div[id]
    {
      /* стили элементов абвгдейки */
    }

    PS: Если все по науке называть, то вопрос, вообще, не возникнет, как навешивать стили:
    <div class="alphabet">
      <div id="A" class="alphabet__item"></div>
      <div id="B" class="alphabet__item"></div>
      <div id="C" class="alphabet__item"></div>
      ...
    </div>
    Ответ написан
    Комментировать
  • Сайт не показывает задний анимированный фон, что делать?

    @alexalexes
    Добавь на body какой-нибудь класс:
    <body class="body__with-background">
    </body>

    и повесь на него селектор с фоном:
    body.body__with-background {
      background: url(background.gif) no-repeat; /* Задаём фон GIF-картинкой */
    }

    тогда перебьет bootstrap-стиль фона.
    Ответ написан
    Комментировать
  • Как можно сверстать такую рамку на сайте?

    @alexalexes
    Примерно так можно сверстать:
    Ответ написан
    1 комментарий
  • Как в CSS сделать так, чтобы всегда была видна полоса прокрутки?

    @alexalexes
    Веб разработчик крайне ограничен в стилизации скроллбара.
    Повлиять можно только на 3 параметра:
    1) Ширина скроллбара;
    2) Цвет бегунка (+ hover);
    3) Цвет подложки бегунка.
    Все остальное поведение зависит от браузера и пользовательских настроек вне контекста песочницы веб-страницы (и даже доступные стилизации могут быть перебиты внешними настройками просто потому что потому).
    Ответ написан
    Комментировать
  • Как расположить панель внизу через стили css?

    @alexalexes
    .ch_list
    {
      position: absolute;
      width: 100vw;
      ...
    }
    Ответ написан
    Комментировать
  • Как сделать круг на фоне числа?

    @alexalexes
    Нужно квадратному желтому элементу скруглить углы на не менее 50% радиуса его размера.
    Ответ написан
    Комментировать
  • Как реализовать переход по ссылке силами CSS?

    @alexalexes
    Нужно помнить, что у тега a и button по умолчанию поведение display: inline - строчные элементы.
    Если хотите, чтобы они служили там, где используются блочные элементы (display: block) и блочно-строчные (display: inline-block), как div в вашем примере. Так обеспечьте их этим свойством - указав его явно.
    Зная это, можно спокойно заменить div на a и решить вашу проблему.
    Ответ написан
    Комментировать
  • Как в таблице обернуть столбец в рамку?

    @alexalexes
    table подразумевает работу со строковыми данными, но с помощью псевдо-селекторов nth-child, можно сделать некоторый трюк, выделив колонку:
    /*7 - текущая колонка, 6 - предыдущая - можно номер выделенной колонки вынести в css переменную и манипулировать только ей*/
    tr:first-child td:nth-child(6),
    tr td:nth-child(6),
    tr td:nth-child(7)
    {
      border-right: 2px solid red;
    }
    tr td:nth-child(7) /*страховка для вырожденного случая, когда выделена первая колонка */ 
    {
      border-left: 2px solid red;
    }
    tr:first-child td:nth-child(7)
    {
      border-top: 2px solid red;
    }
    tr:last-child td:nth-child(7)
    {
      border-bottom: 2px solid red;
    }
    Ответ написан
    3 комментария
  • Как сделать боксы подряд?

    @alexalexes
    Либо по старинке - всем элементам, которые хотите сделать в ряд, даете свойство display: inline-block; либо по молодежному - делаете контейнер с display: flex и добавляете необходимые flex-свойства элементам, чтобы обеспечить выравнивание и пропорции заполнения блоков.
    Еще древнее способ и самый правильный с точки зрения семантики HTML - элемент .button используете как input, а не div, чтобы все элементы в ряду были строчного типа - тогда мучиться с выравниванием не придется.
    Ответ написан
    5 комментариев
  • Если полю input[type="text"] задавать любую высоту, то текст будет всегда по центру. За счёт какого свойства это происходит?

    @alexalexes
    Потому, что вы используете не тот элемент управления, чтобы создать многострочное поле ввода.
    Для этого есть textarea.
    input[type="text"] используется только для однострочного ввода.
    Ответ написан
    Комментировать
  • Как сделать такой border-radius нестандартный?

    @alexalexes
    Если дизайнер не имеет представления об ограничениях современного CSS и не собирается вникать в их суть, то clip-path и svg ваше все.
    Ответ написан
  • Как сделать таймер отсчёта как на фото?

    @alexalexes
    Нужно менять механику смещения параметра в translate3d, чтобы смещение по вертикали анимировалось между (n/2) и (n/2) + 1 высотой списка (перелистывались соседние элементы центральной части списка). Когда анимация достигнет уровня (n/2) + 1, нужно сделать два одновременных действия: 1 - переставить последний элемент списка на первое место, 2 - вернуть уровень до отметки (n/2). Тогда будет достигнут эффект замкнутости и цикличности списка и анимация не будет откатываться назад.
    Ответ написан
    1 комментарий
  • Как показать определенное количество символов у ссылки а остальные скрыть?

    @alexalexes
    Проще со стороны формирующего скрипта подрезать лишнее внутри тега a.
    <?php echo mb_strlen($t_url) > 10 ? mb_substr($t_url, 0, 10).'...' : $t_url; ?>
    Ответ написан
    Комментировать
  • Как закрасить линию перед ползунком через css?

    @alexalexes
    input[type=range]::-webkit-slider-thumb::before,  /* для остальных браузеров */
    input[type=range]::-moz-range-progress /* для Firefox */
    {
     /**/
    }

    Такое же внимание уделите псевдоэлементам -webkit-slider-runnable-track и -webkit-slider-thumb, потому что FF тут умудрился выбиться из толпы.
    Ответ написан
  • Как сделать слайдер со сменяющимся текстом внутри?

    @alexalexes
    Учить основы CSS - с чем едят свойство position.
    В данном случае для вас неожиданностью является поведение свойства position: absolute; у контейнера .header__slider-text.
    Чтобы абсолютное позиционирование было относительно слайда, дайте контейнеру слайда .header__slider-item свойство position: relative;
    Ответ написан
  • Обтекание блочного элемента: как реализовать?

    @alexalexes
    Если отсутствие поддержки Internet Explorer не пугает, то можете воспользоваться свойством shape-outside.
    htmlbook.ru/blog/vvedenie-v-css-shapes
    https://developer.mozilla.org/en-US/docs/Web/CSS/s...
    Ответ написан
    4 комментария
  • Как правильно верстать используя bootstrap?

    @alexalexes
    При использовании bootstrap вы не можете мыслить фиксированными шириной.
    У вас есть 12 колонок - 12 долей единиц ширины экрана, и есть с полдюжины разных размеров экранов.
    Самый маленький, малый, средний, большой и очень большой.
    И логика расстановки классов такая:
    "На большом экране и больше у меня слайдер будет шириной 6 из 12 колонок,
    на среднем 8 из 12 колонок,
    от малого и меньше 12 из 12 колонок".
    С этой логикой и навешиваете нужный набор классов на контейнер слайдера.
    JS код не должен фиксировать размер контейнера в пикселях, нужно ему позволить расширяться по bootstrap сетке.
    Ответ написан
    Комментировать
  • Как сделать что бы при нваедении иконки не прыгали?

    @alexalexes
    .header-dropdown-item {
    ...
      height: 4rem;
    ...

    .header-dropdown-item:hover {
    ...
      height: fit-content;
    ...

    Эти значения высот в вычисленном состоянии имеют разный результат в пиксельном выражении?
    Как вы думаете?
    Ответ написан
    Комментировать
  • Как сделать табы с выводом из бд?

    @alexalexes
    Выводить также как из любого другого источника данных.
    1. Подготовьте источник данных.
    - Разверните службу СУБД в операционной системе сервера.
    - Выберите менеджер, чем вам будет удобно просматривать объекты СУБД.
    - Установите менеджер СУБД.
    - При помощи менеджера СУБД заведите пользователя базы данных, схему базы данных, структуру таблиц и связей, вставьте необходимые данные.
    2. Изучите способы подключения к источнику данных и взаимодействия из PHP (как делать коннект к СУБД, как подготавливать запросы и параметры к ним, как фетчить результат выборки запроса).
    3. Подключитесь к базе, выполните запрос, встройте выборку результата в ваш шаблон HTML (табы).
    Ответ написан
    3 комментария