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

alexalexes

Ответы пользователя по тегу CSS

  • Как сделать заголовок "УСЛУГИ" ближе к центру?

    @alexalexes
    Поиграйтесь со стилями селектора, в частности с внутренними отступами:
    .jumbotron {
    padding: 4rem 2rem;
}

    PS: Не забывайте про медиазапросы с тем же селектором.
    Ответ написан
    Комментировать
    Комментировать

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

    @alexalexes
    1. Определяете список заголовков.
    2. Определяете offsetTop у каждого заголовка.
    3. Определяете scrollTop у прокручиваемого блока.
    5. Определяете по offsetTop-ам i-ый и i+1 заголовок, где находится значение scrollTop.
    6. Для стрелки вверх делаете scrollTo до i-ого заголовка.
    7. Для стрелки вниз делаете scrollTo до i+1 заголовка.
    8. Если i-ого или i+1 заголовка нет, то гасите кнопку.
    9. На событии скроллинга нужно анализировать пункты 1-8, чтобы кнопки вовремя гасились.
    Ответ написан
    Комментировать
    Комментировать

  • Перенос кириллицы со слешом?

    @alexalexes
    Есть старый добрый тег nobr, который объединяет подстроку, переносимую полностью.
    №<br/><nobr>п/п</nobr>
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать подобное меню?

    @alexalexes
    Решение без JS:
    Принцип действия: Над кнопкой показа меню добавляется скрытый чекбокс, который выступает как триггер состояния. Состояние чекбокса управляет применяемым css правилом на меню.
    Кнопку "Server systems development" и скрываемое меню делаете в одном контейнере top-left-container.
    На том же уровне, где находится меню делаете прозрачный input type="checkbox" над кнопкой "Server systems development".
    Вывод и скрытие меню задаете примерно такими правилами:
    div.top-left-container input[type="checkbox"]:checked ~ div.menu
{
/*анимация появления меню*/
}
div.top-left-container input[type="checkbox"]:not(:checked) ~ div.menu
{
/*анимация скрытия меню*/
}

    Решение c JS:
    Вешаете обработчик на кнопку Server systems development, проверяете наличие класса отображения на меню. Если нет класса, то добавляете, если есть то убираете (в Jquery будет использоваться функция toggle).
    Ответ написан
    Комментировать
    Комментировать

  • В чем лучше указывать ширину и высоту блоков?

    @alexalexes
    Зависит от назначения блоков.
    Точные размеры, да, возможно, примените пиксели, а может и сантиметры или дюймы.
    Относительные размеры понадобятся - возьмете проценты.
    Растягивать относительно содержимого - вообще будет auto.
    Адаптивно будете работать - еще куча альтернативных размеров появится в медиа-запросах.
    Ответ написан
    Комментировать
    Комментировать

  • Как верстать правильно если на компьютерах стоит разный зум в настройках windows?

    @alexalexes
    Вам нужно определиться, какую цель вы преследуете при выборе свойства font-size.
    1. Физический размер элемента не должен отличаться или малозависим от настроек браузера устройства.
    Решение: используем физические величины: mm, cm, in.
    2. Размер элемента должен быть всегда столько-то пикселей. Используем px.
    3. Размер шрифта должен адаптироваться под возможности комфортного отображения на устройстве.
    Используем pt, em, %. В этом случае тестируете разные режимы адаптивности сайта: у пользователя может отличаться размер экрана, плотность пикселей, он может крутить масштаб скажем, от 60% до 150%.
    На разработчика ложится это обязанность, чтобы сайт выглядел приемлемо, в разумных изменениях настроек отображения.
    Могу путать величины CSS, но такие цели точно есть, и они взаимоисключающие.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как перекрасить таблицу?

    @alexalexes
    У таблицы есть класс white_border, если он используется только на этом элементе, то можете использовать такой селектор после всех селекторов, описывающие общие стили таблиц:
    table.white_border,
table.white_border th,
table.white_border td
{
    border-color: ваш цвет;
}
    Ответ написан
    3 комментария
    3 комментария

  • Как правильно называется такой эффект?

    @alexalexes
    Эксплуатация свойства position: sticky; и его заменителей.
    Можно ли использовать position: sticky?
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать визуальный эффект на сайте в виде колонок?

    @alexalexes
    Делать правые и левые отступы, ширину элементов кратно размеру колонки.
    Приведенный пример эту идею и воспроизводит, нужно только покопаться в Elements в панели разработчика браузера, чтобы увидеть эту закономерность.
    Ответ написан
    Комментировать
    Комментировать

  • CSS почему сверху отступ??

    @alexalexes
    Начало всех CSS-файлов всегда начинается одинаково как раз из за этого случая:
    html, body
{
  margin: 0;
  padding: 0;
}
    Ответ написан
    1 комментарий
    1 комментарий

  • Как делаются нестандартные элементы форм доступными, кроссбраузерными?

    @alexalexes
    В идеале, в шапке страницы сайта должен быть переключатель версии дизайна для слабовидящих (по значимости такой же как RUS/ENG).
    Тут есть рекомендации, как сделать версию сайта для слабовидящих. В том числе, обозначен совет, как сделать так, чтобы скринридеры читали заголовки полей формы, но сами заголовки визуально не отображать.
    Если лейбл нужно скрыть, расположите его перед полем, используйте привязку атрибута for и специальный класс для вспомогательных технологий:

    .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    }
    Этот класс скрывает лейбл визуально, но его прочтут скринридеры. Обратите внимание, что скринридеры и другие вспомогательные технологии, как и браузеры, скрывают элементы с использованием display: none и visibility: hidden.
    Ответ написан
    4 комментария
    4 комментария

  • CSS редактор для Qt?

  • Почему на MacOS криво работает кнопка наверх?

    @alexalexes
    У вас очень тяжелый файл www.annalev.ru/static/bundle/js/bundle.min.js, в котором лежит функция скроллинга, пока он не загрузиться на клиенте полностью, скроллинг не будет работать.
    Решить проблему можно несколькими путями:
    1) Все легковесные функции, которые не зависят от библиотек поместить в отдельный файл, который будет подключаться выше списком, чем тяжеловесные js.
    2) Написать код легковестных функций прямо в документе (или в общем шаблоне страниц, где описывается head или footer, в случае если у вас CMS);
    3) Написать обработчик скроллинга непосредственно в атрибуте onclick.
    PS: Дополнительно, посмотреть, какой функционал можно "выбросить" в подключенных библиотеках.
    Например, на JQuery можно опционально отключать некоторые возможности и скачивать js-файл значительно меньших размеров, чем в полной комплектации.
    Ответ написан
    4 комментария
    4 комментария

  • Можно ли задать соотношение сторон изображения?

    @alexalexes
    У меня самый колхозный вариант был: создать png картинку с прозрачным цветом с нужным соотношением сторон (и самых гигантских размеров, каким может быть монитор) и поместить ее в виде img в контейнер на самом глубоком z-значении.
    Пропорции контейнера выравнивались по содержимому и одновременно он мог быть любых не фиксированных стилем размеров.
    Ответ написан
    Комментировать
    Комментировать

  • Как избавиться от бага на IOS?

    @alexalexes
    Скорее всего нужен svg формат для гарнитуры шрифта.
    PS: по стопам вопроса Как подключить шрифт для iOS?
    Ответ написан
    3 комментария
    3 комментария

  • Как убрать белое пространство после футера?

    @alexalexes
    Наведите порядок в этом контейнере, из-за него распирает страницу:
    <div id="container">
<div id="wb_bs1" style="position:absolute;left:0px;top:616px;width:85px;height:85px;z-index:753;">
<a id="bs1" style="visibility:hidden;">&nbsp;</a>
</div>
<div id="wb_bs3" style="position:absolute;left:0px;top:1670px;width:85px;height:85px;z-index:754;">
<a id="bs3" style="visibility:hidden;">&nbsp;</a>
</div>
<div id="wb_bs4" style="position:absolute;left:0px;top:2984px;width:85px;height:85px;z-index:755;">
<a id="bs4" style="visibility:hidden;">&nbsp;</a>
</div>
<div id="wb_bs6" style="position:absolute;left:3px;top:6143px;width:85px;height:85px;z-index:756;">
<a id="bs6" style="visibility:hidden;">&nbsp;</a>
</div>
<div id="wb_bs7" style="position:absolute;left:0px;top:6713px;width:85px;height:85px;z-index:757;">
<a id="bs7" style="visibility:hidden;">&nbsp;</a>
</div>
<div id="wb_bs8" style="position:absolute;left:0px;top:7372px;width:85px;height:85px;z-index:758;">
<a id="bs8" style="visibility:hidden;">&nbsp;</a>
</div>
<div id="wb_bs9" style="position:absolute;left:0px;top:8586px;width:85px;height:85px;z-index:759;">
<a id="bs9" style="visibility:hidden;">&nbsp;</a>
</div>
<div id="wb_bs10" style="position:absolute;left:0px;top:9129px;width:85px;height:85px;z-index: 10000;">
<a id="bs10" style="visibility:hidden;">&nbsp;</a>
</div>
</div>

    PS: Похоже на какой-то костыль, благодаря чему поддерживается необходимая высота страницы.
    Ответ написан
    2 комментария
    2 комментария

  • Как называется данная адаптация?

    @alexalexes
    font-size тоже проценты принимает, но вы ужаснетесь, как он будет тупо все масштабировать.
    Вам все-равно придется корректировать частные случаи медиазапросами.
    Ответ написан
    Комментировать
    Комментировать

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

    @alexalexes
    Если чисто в теории, то как обычно - JS. Подписываем на событие resize документа функцию, которая будет отслеживать размер контейнера меню и пересчитывать суммарную длину блоков пунктов меню вместе с отступами и прятать/выносить их в/из особого контейнера в конце списка, либо прятать этот контейнер, если все пункты вмещаются в меню.
    Ответ написан
    2 комментария
    2 комментария

  • Как сделать, чтобы затемнение модального окна не касалось хэдера и футера?

    @alexalexes
    Можно пробовать отрегулировать z-index заголовка, подвала и блока основного контента сайта так, чтобы z-index блока .overlay был выше блока основного контента сайта, но меньше чем z-index заголовка и подвала. Однако, есть риск, что само окно будет заползать за элементы страницы (так же поиграться с этим свойством у окна).
    Собственно, нужно будет отработать возврат свойства z-index к прежним значениям после закрытия окна.
    Ответ написан
    Комментировать
    Комментировать

  • Как остановить выполнение setTimeout на 2 шаге?

    @alexalexes
    Можно.
    function highlightcurrent(items, index) 
{
  if(index != 2) // выходим из функции, если достигли определенного индекса
  {
    items.removeClass("highlightcurrent");
    items.eq(index).addClass('highlight');  
    items.eq(index).addClass('highlightcurrent');   
    setTimeout(function()
    {
      highlightcurrent(items, index + 1)
    }, 1000);
  }
}

highlightcurrent($('.progress-page-tabs-col'), 0);
    Ответ написан
    3 комментария
    3 комментария