[Решено] Убегает кнопка

Тема в разделе "OpenCart", создана пользователем skiv14, 30 июл 2015.

Статус темы:
Закрыта.
  1. skiv14

    skiv14

    Регистрация:
    9 июн 2015
    Сообщения:
    412
    Симпатии:
    159
    Сверху справа кнопка поиска. При загрузке сайта она подгружается не на том месте и потом встаёт куда надо.
    Как сделать чтобы сразу появлялась где надо ?

    ps она сбилась немного в процессе настройки шаблона, местоположение кнопки я в css правил. Но вот этот её скачок как-то напрягает.
     
    Последнее редактирование: 5 апр 2016
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.054
    Симпатии:
    779
    Кнопка прыгает потому, что у неё абсолютное позиционирование (position: absolute). При таком позиционировании в качестве точки отсчёта берёться первый родительский блок со значением position - relative, fixed или absolute. То есть, это не обязательно ближайший родитель, а первый в цепочке родителей, у которого есть такое значение position.
    Вы настраивая стили кнопки отталкивались от её родительского блока с классом iSearchBoxWrapper (у которого position:relative), но проблема в том, что стили для блока iSearchBoxWrapper находятся в отдельном файле стилей (isearch.css), который загружается после основного файла стилей, в котором у вас стили для кнопки. Таким образом, при загрузке страницы кнопка вначале отталкивается от блока с классом header_top, который на тот момент для неё ближайший родитель с position:relative.

    В общем, перенесите стили для iSearchBoxWrapper в основной файл и разместите перед стилями кнопки и ничего прыгать не будет.
     
    dem03x и skiv14 нравится это.
  3. skiv14

    skiv14

    Регистрация:
    9 июн 2015
    Сообщения:
    412
    Симпатии:
    159
    Попробовал всё из isearch.css добавить в stylesheet.css перед кнопкой, не вышло.
    Вообще, isearch.css не участвует. Есть он, нет его - ничего не меняется.
    Вся загрузка идёт из stylesheet.css

    И, я так понимаю, стили поиска не iSearch, а из шаблона.

    Работает вот это
    Код:
    #search {
        background: none repeat scroll 0 0 #17AAB8;
        border-radius: 8px 8px 0 0;
        float: right;
        height: 38px;
        margin-top: 10px;
        padding: 9px 74px 0 20px;
        position: relative;
        width: 230px;
    }
    
    .button-search {
        background: url("../image/search.png") no-repeat scroll 0 -30px rgba(0, 0, 0, 0);
        color: #FFFFFF;
        cursor: pointer;
        font-size: 11px;
        font-weight: bold;
        height: 27px;
        line-height: 26px;
        position: absolute;
        right: -62px;
        text-align: center;
        text-shadow: 0 -1px 0 #60AC1C;
        width: 60px;
    }
    .button-search:hover {
        background-position: -61px -30px;
    }
     
  4. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.054
    Симпатии:
    779
    1. isearch.css участвует. Откройте в браузере инструменты разработчика и сами всё увидите.
    2. Я не вижу, чтоб вы что-то перенесли (а конкретно нужно перенести стиль для .iSearchBoxWrapper)
     
  5. skiv14

    skiv14

    Регистрация:
    9 июн 2015
    Сообщения:
    412
    Симпатии:
    159
    Так я уже пробовал вставлять. Не помогает.

    Вставил сейчас, залил на сайт.

     
  6. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.054
    Симпатии:
    779
    Вообще, отвратительные стили.
    Сделайте так:
    Код:
    #search{
        padding: 9px 20px 0;
        width: 300px;
    }
    .button-search{
        float: right;
        position: relative;
        right: 5px;
    }
    
    Я не копировал полностью стили. Если я не вписал какое-то свойство, значит его не надо трогать.
     
    skiv14 нравится это.
  7. skiv14

    skiv14

    Регистрация:
    9 июн 2015
    Сообщения:
    412
    Симпатии:
    159
    Ураааааа. Работает !!!
    Dotrox, спасибо, Вы бог кода :Smile:
     
Статус темы:
Закрыта.