Ответы пользователя по тегу CSS
  • Как изменить z-index у iframe YouTube?

    @fourthMAN
    https://codepen.io/magaapa5/pen/vYOoxzN
    .navigation {
    z-index: 10;
    }
    если нужно что бы перекрывал div из бугрер меню
    Ответ написан
    Комментировать
  • Почему ссылки на соцсети в мобильной версии открываются со второго клика?

    @fourthMAN
    Грузиться всё с первого раза, прогони через валидатор html5e89bd47da3ad464268377.jpeg и PageSpeed Insights5e89bd55492f2258913186.jpeg
    Ответ написан
    Комментировать
  • Как составить план обучения CSS/JS?

    @fourthMAN
    По css
    Глава профессиональная вёрстка, полезная, лучше прочитать
    1 - новая большая книга css
    Далее заострить внимание из книги на,
    2 - Блочно строчная модель (+ фото прикрепил5e88ce0e24c4b879145046.gif)
    3 - Наследование
    4 - Отступы margin, padding
    5 - Каскадность
    6 - Позиционирование ( Все виды и как работают, и момент когда Абсолютное позиционирование относительно )
    7 - Flex + (иметь под рукой шпаргалку) + сайт https://flexboxfroggy.com/#ru
    Со знанием flex box будет легче в бутстрапе, grid.
    По вёрсте
    Смотри стримы - https://www.youtube.com/channel/UCE_w6FxGfRKH2fU76...
    И ему подобные, станут понятны моменты ( когда не понятно как делать )

    И смотри сами сайты через devtools ( как всё реализовано ).

    JS
    Соракса смотреть такое себе, когда ещё не понимаешь основы.
    Из популярных https://learn.javascript.ru и менее популярный https://metanit.com
    там и задачи на темы есть.
    Внимание заостри на
    1 - Замыкании
    2 - Область видимости
    3 - Наследование
    4 - асинхронность
    Все задачи и примеры пиши руками ( без копипаста )
    + Не понятную тему смотри на ютубе более детально
    Обязательно DOM можешь посмотреть видео Дмитрия Лаврика
    https://www.youtube.com/watch?v=-2WiaSvOj78
    Ответ написан
    Комментировать
  • Почему шапка и все ее содержимое при масштабировании слетает?

    @fourthMAN
    Сделал думаю похожее что ты просил ( Код css ниже, просто вставь его )
    Советую больше уделить вниманию самому css, будет меньше вопросов.
    - Наследование
    - Каскадность
    - размеры min и max
    - media запросам
    Да и пиши стили в хронологическом порядке,
    По типу
    боди > div > и так далее сверху вниз стили.
    Ещё есть классный видос по ошибкам новичков.
    https://www.youtube.com/watch?v=y-odQFdFxdU
    и по box-sizing
    https://www.youtube.com/watch?v=IH_V0duSGLo

    .wrapper {
    max-width:1260px;
    margin:0 auto;
    height:auto;
    }

    header {
    min-height:72px;
    width:100%;
    background: #FFFFFF;
    box-shadow: 0 1px 28px rgba(0, 0, 0, 0.25);
    }

    header .wrapper ul {
    display: flex;
    justify-content: space-around;
    line-height: 72px;
    }

    .sign-in,
    .search {
    font-size:16px;
    }

    .search {
    color: #767;
    min-width: 350px;
    max-width: 100%;
    height: 40px;
    background: #EDEDED;
    border-radius: 70px;
    border:1px solid #EDEDED;
    text-align:center;
    outline:none;
    }

    a {
    text-decoration: none;
    }

    .sign-in a {
    color:#000;
    display:block;
    background: rgba(255, 255, 255, 0.4);
    border: 2px solid #EDEDED;
    width:94px;
    height:40px;
    border-radius: 22px;
    margin:12px auto;
    line-height:36px;
    text-align: center;
    }

    .sign-in a:hover {
    background: #EDEDED;
    }

    .sign-in a:active {
    background: #E3E3E3;
    }

    .search:active,
    .search:focus {
    text-align: center;
    text-indent:40px;
    }

    a .pic-logo {
    position:relative;
    top:5px;
    left:10px;
    }

    ul {
    padding:0;
    margin:0;
    list-style:none;
    }

    body {
    margin:0;
    font-family: Open Sans;
    background:rgba(50,60,70,.7);
    }

    media (max-width:1200px) {
    .wrapper {
    max-width:1024px;
    }
    }

    media (max-width:1023px) {
    .wrapper {
    max-width:768px;
    }
    }

    /* media (max-width:767px) {
    .wrapper {
    max-width:420px;
    }
    } */

    media (max-width:629px) {
    .wrapper ul {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    }
    .pic-logo {
    padding-right: 10px;
    }
    media (max-width:419px) {
    .wrapper {
    max-width:340px;
    }
    }

    media (max-width:339px) {
    .wrapper {
    max-width:none;
    }
    }
    Ответ написан
    1 комментарий