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

Max

лучшее "спасибо" - кнопка "решение вопроса"
Ответы пользователя по тегу CSS

  • Как реализовать такой скролл для страницы и блока с меня?

    SuperMax899
    @SuperMax899
    лучшее "спасибо" - кнопка "решение вопроса"
    Библиотек много, мне по функционалу понравилась эта:
    leafo.net/sticky-kit
    Ответ написан
    Комментировать
    Комментировать

  • Как реализовать такую кнопку?

    SuperMax899
    @SuperMax899
    лучшее "спасибо" - кнопка "решение вопроса"
    в чем трабл?
    добавить внутрь иконку?
    попробуй content
    псевдоэлементов куча, но я так понимаю идет речь про before и after? один тот и один тот.
    Что есть на данный момент?

    иконка идет картинкой или элементом i ?
    можно обратиться к i при hover button'а
    т.е. .button:hover i{color:yellow;} - это наведение на кнопку

    можно просто окрасить .button i{color:#нужный цвет;}
    Ответ написан
    4 комментария
    4 комментария

  • Почему изменяется высота при hover на выподающее меню?

    SuperMax899
    @SuperMax899
    лучшее "спасибо" - кнопка "решение вопроса"
    Это пофиксить можно проще -- правой кнопкой мыши по элемнту, проверить код, справа в разделе css ищем padding, где то подменяется другим значением. Там он сам покажет, где перекрытие идет.
    Ответ написан
    5 комментариев
    5 комментариев

  • Не работает всплывающее меню внутри модального окна?

    SuperMax899
    @SuperMax899
    лучшее "спасибо" - кнопка "решение вопроса"
    у меня все норм отображается, а как вариант должен вставиться от нажатия по нему в инпут? у тебя js код или что? я вижу data-, но как он должен привязаться то без js?
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать Twitter виджет адаптивным?

    SuperMax899
    @SuperMax899
    лучшее "спасибо" - кнопка "решение вопроса"
    https://twittercommunity.com/t/how-can-i-extend-wi...
    или скинь код вставки, я переделаю, нет под рукой кода от виджета твиттера.
    Ответ написан
    Комментировать
    Комментировать

  • Почему градиент идёт лесенкой?

    SuperMax899
    @SuperMax899
    лучшее "спасибо" - кнопка "решение вопроса"
    Блин есть 3 ответа на вскидку:
    1. Браузеры взяты с ошибочками, FF бесит всех фронтендеров, для него даже специальный сайт сделали bugziilla, ну и игнорирование даже собственных стилей -moz- не доставляет; Насчет chomium'a не в курсе, не юзал, а вот про мобильный хром, а точнее некое обновление у гугла, для браузера в приложении "google" for ios, могу рассказать много нелестного, ну и отзывы какбэ намекают: https://itunes.apple.com/ru/app/google/id284815942?mt=8 (сам узнал о существовании от заказчика, который требовал переделать под это приложение сайт:) )
    2. Если это весь код, то не хватает кода, у браузеров свои специальные указатели.
    Решение проблемы - вот автоматически генерирует стили под большинство браузеров
    www.colorzilla.com/gradient-editor
    Для примера у FF свой -moz- градиент
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8

    Собственно, если второй не помог, напиши в коментах, будем разбираться.
    Ответ написан
    Комментировать
    Комментировать

  • Почему при прокрутке вверх С МОБИЛЬНОГО фоновая картинка в самой верхней секции дёргается?

    SuperMax899
    @SuperMax899
    лучшее "спасибо" - кнопка "решение вопроса"
    потому что bg-size:cover и в телефоне при прокрутке вверх появляется дополнительные полосы меню, обычно сверху и снизу, что уменьшает высоту браузерного дисплея, от этого изображение начинает перестраиваться под новую высоту.
    Ответ написан
    10 комментариев
    10 комментариев

  • Как добиться с помощью стилей, чтобы он был прозрачный, а его дочернии элементы нет?

    SuperMax899
    @SuperMax899
    лучшее "спасибо" - кнопка "решение вопроса"
    уточните задачу, если background интересует, то цвет через rgba (255,255,255,0.5) где 0.5 прозрачность. Какие элементы внутри и что надо сделать прозрачным
    Ответ написан
    9 комментариев
    9 комментариев

  • Как в моем варианте меню нанести правильно background чтобы он влезал на меню?

    SuperMax899
    @SuperMax899
    лучшее "спасибо" - кнопка "решение вопроса" 
    backgrouund-umage: url();
background-size:contain; /*или cover*/
background-repeat: no repeat; /*убираем повторения*/


    если задано просто background: , то там все одной строкой задается:)
    Ответ написан
    Комментировать
    Комментировать

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

    SuperMax899
    @SuperMax899
    лучшее "спасибо" - кнопка "решение вопроса"
    Не понял сути.
    У меня вообще сверху меню закрывает, добавь margin-top контейнеру. Если хочешь чтобы было на весь экран по высоте min-height: 100% блоку, там будет скорее всего проблема с наследованием размера, поэтому всем блокам "родителям" min-height:1px, min-height:100% включая body и html;
    блокам тогда height: 50%
    upd: вижу что инлайном высота стоит.

    Если по ширине то min-width какой то, т.к. позиции элементов заданы же какие то и media (max-width: 1366px) .cell-pf

    Я бы сделал не так вообщем, мне за такую верстку в офисе давали по шапке:)
    Уточни задачу, объясню
    Ответ написан
    3 комментария
    3 комментария

  • Как сделать изображение ссылкой и расположить на изображении еще определенное колл-во ссылок?

    SuperMax899
    @SuperMax899
    лучшее "спасибо" - кнопка "решение вопроса"
    если есть возможность изменить верстку - сделать два блока, в каждый закинуть задником картинку и сделать отступ padding:146px или стандартно picture / img , ссылку целиком на блок. <- плюс к адаптивности.
    Если надо чтобы смотрелись рядом, все margin'ы убираем и текст в первом случае справа, во втором слева.

    Если делать на изображении две ссылки - пользователь не поймет.

    мой вариант:
    <div class="row">
  <a href="...">
    <div class="item item-1">
       <img src="...">
       <!-- вариант 1--> 
      lorem ipsum
      <!-- вариант 2 -->
       <p class="item-text">some text</p>
    </div>
  </a>
  <a href="...">
    <div class="item item-2">
       <img src="...">
       <!-- вариант 1--> 
      lorem ipsum
      <!-- вариант 2 -->
       <p class="item-text">some text</p>
    </div>
  </a>
</div>
    Ответ написан
    Комментировать
    Комментировать

  • Как вы создаёте адаптивный дизайн и всегда ли это нужно?

    SuperMax899
    @SuperMax899
    лучшее "спасибо" - кнопка "решение вопроса"
    На абстрактный ответ мог бы ответить абстрактно, но отвечу с вариантами.
    В зависимости от задачи, я опишу не для сервисов или больших сайтов\ресурсов.
    Советую так же прочесть вот эту статью: frontender.info/building-a-better-responsive-website

    Обычно использую bootstrap, который дополняю своими стилями, к примеру, сразу удаляю\перекрываю .row с его -15px margin'ом по сторонам, добавляю класс padding-0 для убирания в некоторых блоках padding'a у col- (который стандартно по 15px).

    Стандартно учитываю разрешения - HD, ноутбучное 1366 и свое чуть меньше 1366 (у меня пуск справа:) ), 1024-960 - старые мониторы и нетбуки, смотрю в диапазоне 768px-960 для некоторых планшетов и телефонов, и меньше 768 для телефонов. Тут дизайн один, через media onlyscreen убираем с загрузки ненужные части.
    Если все сверстано правильно и добавлены везде классы, то сайт будет полностью адаптивным.
    Для тестов меньше 768px проверяю через iphone 5 и старенький android-телефон. (Через Toggle Device mode в Google Chrome получаешь очень сильно разительные результаты в сравнении с устройством - браузеры то другие, хотя большие косяки всплывают сразу.)
    Тут кстати еще (мобильная) кросс-браузерность очень тонкий вопрос. Стиль у каждого браузера свой, особенно у всяких элементов типа input, так что тоже требует проверки и состояний тоже (placeholder, цвет текста в поле).

    Нужно ли это? Безусловно - на любом сайте, в любой отрасли половина трафика с мобильных устройств, это уже стандарт качества, на мой взгляд:)
    Ответ написан
    2 комментария
    2 комментария