При изменении разрешения, телефон и поиск в шапке смещаются.

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем DOST, 1 фев 2016.

  1. DOST

    DOST

    Регистрация:
    31 янв 2016
    Сообщения:
    7
    Симпатии:
    0
    Здравствуйте нужна помощь . Есть сайт , на мониторе все хорошо когда меняется разрешение будь то смартфон или планшет ,телефон и поиск в шапке сайта начинают плавать , или половина телефона есть а остального нет . Подскажите.
    Сайт www.Karllson.ru
     
  2. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    145
    Симпатии:
    20
    Ну первое, что бросилось в глаза, так это то, что номер телефона находится не в шапке, а под ней. В шапку контакт притянут вручную. Только поэтому он уже не будет нормально "складываться" внутри шапки, т.к. физически находится за её пределами.
     
  3. DOST

    DOST

    Регистрация:
    31 янв 2016
    Сообщения:
    7
    Симпатии:
    0
    Добрый день Спасибо ,подскажите как тогда его правильно прописать ,что б он в шапке был посредине как сейчас ? И я так понимаю такая же ситуация с поиском ?
    --- Добавлено, 1 фев 2016 ---
    iga,
    Добрый день Спасибо ,подскажите как тогда его правильно прописать ,что б он в шапке был посредине как сейчас ? И я так понимаю такая же ситуация с поиском ?
    --- Добавлено, 1 фев 2016 ---
    Может кто нибудь адекватно помочь?
     
  4. Marrie

    Marrie

    Регистрация:
    7 сен 2015
    Сообщения:
    50
    Симпатии:
    10
    1) настройки законментить или удалить для тебефона http://joxi.ru/n2YnjbPfj5vvOA

    /* margin-top: -35px; */
    /* z-index: 100; */
    /* position: relative; */
    /* top: -55px; */
    /* right: 471px; */
    /* margin-right: 0px; */
    /* width: 950px; */
    /* left: -298px; */
    2) отредактировать структуру: http://joxi.ru/Rmze31JSW5PEVr -это как есть. Суть в том что то что находиться в зеленом квадрате нуно поместтить между <header></header>
    тоесть в результате будет так:http://joxi.ru/4Akvj5KIMKwz02
    3) пустые и ненужные блоки удалить(например h1)
    4)у Вас в шапке все елементы абсолютно отпозиционированы - при таком количестве елементов в шапке не советую...

    после манипуляций в пп. 1-2 шапка поедет. Ее надо будет выровнять.
    Код:
    #header .welcome-links {
        float: right;
        /* margin-right: 10px; */
        margin-top: 24px;
    }
    #header #cart {
        /* min-width: 180px; */
        /* position: absolute; */
        /* left: 0; */
        /* right: 0; */
        /* top: 101px; */
        /* bottom: 61px; */
        /* z-index: 95; */
        margin-left: 225;
    }
    
    #header .header-left {  float: left;
    }
    #header .header-right {
        float: right;
        /* clear: both; */
        /* position: relative; */
        width: 704px;
    }
    #header #search {
        /* left: -266px; */
        /* right: 341px; */
        /* top: 32px; */
        float: left;
        /* margin-top: 62px; */
        /* position: relative; */
        width: 399px;
        z-index: 15;
        margin-top: 20px;
    }
    
    #header #welcome {
        /* z-index: 5; */
        /* text-align: right; */
        /* float: right; */
        color: #309BE3;
        /* margin-top: 105px; */
        /* margin-right: -290px; */
    }
    #header .welcome-links {
        float: right;
        /* margin-right: 10px; */
        margin-top: 24px;
    }
    для телефона:  font-size: 25px; font-family:Arial; text-align: right;color:#8B4513;padding-top: 15px;text-align: center;

    А потом віровнять моб версию:wink: