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

Alfieros

Senior Pomidor
Ответы пользователя по тегу HTML

  • Как сверстать такую сетку?

    mrsexy
    @mrsexy
    Senior Pomidor
    Напишите свой вариант решения и вас поправят/направят.
    Ответ написан
    Комментировать
    Комментировать

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

    mrsexy
    @mrsexy
    Senior Pomidor
    Держи, дальше думаю разберёшься сам.
    Ответ написан
    1 комментарий
    1 комментарий

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

    mrsexy
    @mrsexy
    Senior Pomidor
    @media screen and (max-width: 992px)

    Нет одного и единственного решения при выстраивании адаптива. Всё зависит от дизайн-конструкции.
    Данный запрос никак не относится к устройству, а лишь к разрешению экрана устройства. 992px - это примерно стандартное разрешение Laptop(Нетбук), а не Notebook(Ноутбук).
    Вы должны отталкиваться от удобства просматривания контента на определенных разрешениях, а не устройствах. DevTool в хроме позволяет просматривать контент на любом девайсе(применяя разрешения экрана данного устройства).
    Ответ написан
    2 комментария
    2 комментария

  • Как "повесить" классу active left-border с градиентом?

    mrsexy
    @mrsexy
    Senior Pomidor
    Свойство border-color не может принимать значение градиента, только конкретный цвет.
    Вешайте свойство background-color для .active на псевдокласс .active:before, и там уже играйтесь с градиентом и шириной блока.
    И да, лучше присваивать все стили конкретно к <li>.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сверстать такой экран?

    mrsexy
    @mrsexy
    Senior Pomidor
    Задайте им min-width и max-width.
    Ответ написан
    Комментировать
    Комментировать

  • Как выровнять вертикальные рамки?

    mrsexy
    @mrsexy
    Senior Pomidor 
    .userImg{
display:flex; // Позволяет наследовать значения высоты и ширины вложенных элементов.
height: 150px; //  Ограничить сам блок по высоте. Можно и оба свойства оставить.
}
userImg img{
vertical-align: top; // или так, если отбросить варианты выше.
}
.userProfile__aside ul li{
display: flex;
border-bottom: 1px solid red;
align-items: center; // а дальше установите позиционирование как вам нужно.
}
    Ответ написан
    10 комментариев
    10 комментариев

  • Как правильно оформлять HTML код?

    mrsexy
    @mrsexy
    Senior Pomidor
    1. Закрытие тегов обязательно для очистки кармы. Не критично, браузеры понимают, но ваш идеал это чистая консоль и чистый лог валидатора. header, body - так же нужно закрывать.
    2. 4 пробела в табе используют в препроцессорах html, к примеру pug/jade - здесь это обязательно. В обычной верстке используйте так, как вам удобно. Чтобы проще было ориентироваться в своем коде. В конечном итоге на продакшен заливается минифицированный HTML/CSS/JS, для оптимизации скорости загрузки.
    3. Этот вопрос больше подходит к самой методологии БЭМ. Когда у вас есть 1 основной блок с некими стандартными свойствами и вы используете к нему префикс классы для описания дополнительных свойств. Для того, чтобы сам блок можно было использовать неоднократно с разными свойствами. Для этого избегают глобальных свойств блока, если они могут изменяться. Соответственно неправильное понимание структуры и описания глобальных свойств блоку, вызывают !important, когда вы записываете префикс класс для блока, где нужно изменить уже записанное глобально свойство, к примеру фон блока.
    4. Откажитесь в начале от Bootstrap сетки в пользу flex/grid. Для того чтобы в целом разобраться как работают стили. Учитесь в начале делать правильно и хорошо. Плохо делать вы и так умеете. К Bootstrap обычно обращаются в быстрой развертке проекта, и в основном для каких-то проектов где никто не будет париться на тему поддержки кода. Сделали и забыли.
    5. - Статей о БЭМ в интернете полно, основной принцип БЭМ я описал в 3 пункте.
    Ответ написан
    2 комментария
    2 комментария

  • Как правильно подгрузить google карты?

    mrsexy
    @mrsexy
    Senior Pomidor
    1)Вырезаете кусок карты и делайте её через картинку.
    2)Скрыть из DOM при загрузке. Для этого придумайте финт ушами, чтобы пользователь нажал на кнопку и в выпадашке или модальном окне вывести карту.
    Ответ написан
    Комментировать
    Комментировать

  • Как вставить видео через iframe без полос?

    mrsexy
    @mrsexy
    Senior Pomidor
    1) Зачем для видео вы используете <iframe>, если есть <video> ?
    2) Не вижу никаких чёрных полос, кроме белых бордюров. У вас весь сайт чёрный)
    3) Дайте ссылку на сайт что ли, для более детального изучения вашего вопроса.
    Ответ написан
    3 комментария
    3 комментария

  • Как поместить по центру текст с display inline block?

    mrsexy
    @mrsexy
    Senior Pomidor
    Другой вариант решения
    Ответ написан
    Комментировать
    Комментировать

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

    mrsexy
    @mrsexy
    Senior Pomidor
    В CSS для контейнера который оборачивает все слайды, нужно добавить свойство overflow: hidden. Тогда остальная часть будет скрыта и слайдер поместиться в рамки вашего блока.
    Учтите, что свойство overflow:hidden работает чётко в допустимых границах ширины и высоты блока.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать движение слайдера пальцем?

    mrsexy
    @mrsexy
    Senior Pomidor
    TouchStart, TouchMove, TouchEnd/Cancel - используйте.
    Ответ написан
    4 комментария
    4 комментария

  • Как убрать элемент если находится в определенном блоке?

    mrsexy
    @mrsexy
    Senior Pomidor
    Если я правильно понял суть вопроса, то у вас 1 форма в двух разных местах?!
    К примеру
    Форма на странице:
    <div class="page__block"> //Блок в котором появляется форма
<div class="form> //Форма
<div class="close">X</div> //Кнопка закрытия формы
<form id="form> //Блок с формой
<label>Name</label>
<input type="text">
<button>Кнопка</button>
</form>
</div>

    В модальном окне:
    <div class="modal"> //Модальное окно
<div class="form> //Форма
<div class="close">X</div> //Кнопка закрытия формы
<form id="form>
<label>Name</label>
<input type="text">
<button>Кнопка</button>
</form>
</div>


    Тогда через CSS убираем эту самую кнопку так:
    .page__block .form .close{
display:none;
}

    В CSS мы убрали эту кнопку на странице, но не в модальном окне.
    Ответ написан
    Комментировать
    Комментировать