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

Antowa Kartowa

Ответы

  • Почему не работает overflow в mozilla и ie?

    @AntowaKartowa
    Абсолютно спозиционированный див внутри которого таблица внутри которой в ячейке лежит див который должен иметь скрол. Ах ты грязный извращенец

    Избавься от таблицы
    Ответ написан
    Комментировать
    Комментировать

  • Почему теряется высота у одного из flex блоков, если ему задать position:absolute?

    @AntowaKartowa
    Все очень просто. У тебя флекбокс ячейка остается той же высоты как ты и ожидаешь. Но рамка цветовая у тебя установлена не на флексбокс блок, а на блок который становиться абсолютным. И его размеры никак не привязаны к родительскому флексбок блоку. Достаточно просто добавить about__card min-height: 100% и все.
    Ответ написан
    Комментировать
    Комментировать

  • Резиновый шаблон сайта, контент по середине страницы?

    @AntowaKartowa
    Если я правильно понял вопрос как вертикально выровнять? С чего ж начать.
    1. Наверное с того, что это вроде не контент а скорее какой-то заголовок и короткое описание на фоне бигборда. Оцентровать то походу не относительно всего окна нужно (выйдет кака при уменьшении окна) а относительно бигборда. А в верстке никакой разметки для бигборда и накаких размеров дня него в стилях нет. А значит нет основы относительно которой выравнивать нужно.

    2. Бигборд видимо должен занимать всю доступную высоту и не меньше какой-то минимальной высоты. Есть способы как этого добиться по старинке, но там сложные танцы с дисплей тейбл и множественное оборачивание в дивы. Может есть другой олдовый способ, но я его не знаю. Наиболее простой способ для этого испльзовать flex-box.

    Я забрал враппер. С флексбоксом он не нужен. Убрал ненужные флоты. Вместо них есть инлайн-блоки. Для центрования контента добавил отдельный класс контейнер. Для центрируемого вертикально текста добавил текст-блок. Он находиться внутри контейнера и может горизонтально выравниваться относительно него через margin-left или через margin: 0 auto.
    Cтили для вертикального выравнивания находятся у content блока.

    Не знаю какие браузеры нужно поддерживать. Флексбокс понятно не везде работает. Но его уже начали полномасштабно в новых сайтах и приложениях внедрять. Надеюсь такой вариант чем-то вам поможет.

    https://jsfiddle.net/AntowaKartowa/uLw6ns3c/4/

    PS. То что считал ненужным закоментировал. Свои стили добавлял вниз селектора отделив пустой строкой.
    Ответ написан
    1 комментарий
    1 комментарий

  • Убрать меню по клику в не области?

    @AntowaKartowa
    Повесить на все окно или бади обработчик события и проверять чтоб таргет не был кнопкой дропдауна или самим дропдауном. Но в реальных условиях дропдаун состоит еще из ссылок и других блоков и все их проверять геморно. Кажется пока не придумали ничего лучше чем вместе с дропдауном помещать в дом прозрачный оверлей блок на все окно (position: fixed, width: 100vw, height: 100vh; top: 0, left: 0) и вешать обработчик события на него. Возможно таргет все же придеться проверять, но так его проще будет проверять. У дропдауна з-индекс должен быть выше чем у оверлея.
    Ответ написан
    3 комментария
    3 комментария

  • Как задать верхний отступ в вёрстке?

    @AntowaKartowa
    flex-box где-то так
    я там ширину, высоту не сетал

    .bigboard-container {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  flex: 0 0 100vw; //full screen width is minimum
}

.bigboard-text { //set font-size, width or max-width}

.bigboard-button {...}


    Можно еще более старым традиционным методом с помощью vertical-align: middle выравнивать блок в самом центре. Можно изучить стили вот тут чтоб понять как попап выравнивается по центру. https://jsfiddle.net/AntowaKartowa/H2N5R/

    Ключевые моменты это .popup__overlay:after (фоллбек для старых ие браузеров .popup__valignfix)
    и .popup { display: inline-block; ... vertical-align: middle }

    Надеюсь ответ понятен и релевантен.
    Ответ написан
    Комментировать
    Комментировать

  • Закрытие меню при клике по якорю?

    @AntowaKartowa
    Чето как-то слишком дофига всего в js происходит и не очень ясно что и почему. Лень разбираться так что я коротко опишу способ как сделать тож самое без javascript

    Можно якоря обернуть в label с атрибутом for="#menu-toggle" На одном уровне с блоком меню который должен прятаться расположить input type=checkbox id="menu-toggle" задать ему позицию абсолют, опасити 0, з-индекс -1
    Точно таким же лейблом обернуть бургер который должен меню делать видимым.

    Ну а для блока меню по умолчанию определить стили чтоб он был скрыт,
    но при #menu-toggle:checked ~ .some-menu-block определить стили чтоб он был открыть.

    Вот тут https://jsfiddle.net/AntowaKartowa/b3ueU/ и тут https://jsfiddle.net/AntowaKartowa/BcMVP/ можно посмотреть как подобный подход работает
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно работать с z-index и Opacity?

    @AntowaKartowa
    Opacity менее 1 меняет относительную позицию элементов и может испортить настроение. Лень пересказывать - есть публикация на этот счет https://philipwalton.com/articles/what-no-one-told...

    А вообще z-index работает с absolute, fixed или relative;
    И зависит от z-index'ов родительских элементов. Если у родителя z-index: 1 а у элементов на одном уровне с родителем выше значение, то дочерний блок хоть с z-index: 10000 не сможет перекрыть соседей родителя.
    Ответ написан
    Комментировать
    Комментировать

  • Почему при задавании атрибуты переходит сразу же по ссылке?

    @AntowaKartowa
    Потому что клик по ссылке по умолчанию обрабатывается браузером как инструкция для перехода по ссылке. Что вроде бы очевидно) Для отмены действий по умолчанию традиционно ипсользуется конструкция event.preventDefault(); где event объект события. Обработчик события ( в данном случае change ) получает его первым аргументом: function change(event) {...} И возможно стоит сделать фоллбек для старых версий эксплорера event = event || window.event который объект события не передает и значение его можно получить из глобального объекта.

    Очевидно событие по умолчанию отрабатывает в конце - после того как все пользовательские обработчики события закончили свое выполнение. Иначе как бы event.preventDefault() мог остановить событие после его выполнения. А значит на момент выполнения действия по умолчанию функция change уже установила аттрибут href. Вроде так
    Ответ написан
    2 комментария
    2 комментария

  • Завершен ли перевод книги "Learning JavaScript Design Patterns"?

    @AntowaKartowa
    Вроде должно быть очевидно, что Learning JavaScript Design Patterns (2015) и Patterns For Large-Scale JavaScript Application Architecture (2014) это две разные работы. В русском переводе в заголовке есть ссылка на источник.
    Ответ написан
    Комментировать
    Комментировать