Вход • Регистрация

Поиск в шапке

  •
  • 21 марта 2016 г.
  • перенесла поиск из футера в шапку, но он корявенький получился))

    сейчас он прописан так <insert name="show_search" module="search" template="footer">

    Подскажите, какой тег прописать, чтоб был нормальным
  •
  • 21 марта 2016 г.
  • Подскажите, пожалуйста, какую строчку мне править в css?))

    /* |===============| footer start |===============| */
    .footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 21px 0 17px;
    background: #2e2e2e;
    color: #fff;
    }
    .footer__unit{
    float: left;
    padding: 14px 0;
    line-height: 18px;
    }
    .footer__right{
    float: right;
    padding: 2px 0;
    }
    .footer .light-nav a{
    color: #fff;
    }
    .footer .light-nav a:hover{
    color: #e32119;
    }
    /* |===============| footer end |===============| */

    /* |===============| search start |===============| */
    #wrapper .footer .search{
    position: relative;
    float: right;
    margin: 14px 0 0;
    }
    #wrapper .footer .search input{
    margin: 0;
    padding: 7px 31px 6px 9px;
    font: 14px/18px 'Myriad Pro';
    width: 231px;
    height: 31px;
    background-color: transparent;
    color: #fff;
    }
    #wrapper .footer .search input:focus{
    border-color: #fff;
    }
    #wrapper .footer .submit_search,
    #wrapper .footer .submit_search:hover,
    #wrapper .footer .submit_search:focus{
    position: absolute;
    top: -2px;
    right: 6px;
    border: 0;
    padding: 0;
    width: 23px;
    height: 31px;
    background: none;
    color: #bbc3c6;
    }
    #wrapper .footer .submit_search:after{
    content: "\f002";
    font: 13px fontawesome;
    vertical-align: middle;
    }
    #wrapper .footer .submit_search:hover,
    #wrapper .footer .submit_search:focus{
    color: #fff;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    }
    .footer__copy{
    float: left;
    text-align: center;
    margin: 0 0 0 164px;
    width: 520px;
    font-size: 14px;
    }
    /* |===============| search end |===============| */
    •
    • 21 марта 2016 г.
    • Цитата
      Подскажите, пожалуйста, какую строчку мне править в css?))

      Не строчкУ, а строчкИ.
      Код
      *** .footer .search ***

      во всей группе стилей означает, что блок поиска .search лежит внутри слоя .footer.
      И если Вы вынесли поиск .search из .footer в другой слой, в шапку, надо все .footer переделать на соответствующий слой из шапки. Плюс, затем надо будет посмотреть, есть ли там какие относительные свойства, отступы, и подправить их на месте.
      Короче, для верстальщика это пара минут. А для новичка это темный лес и весь курс HTML+CSS с нуля
      •
      • 21 марта 2016 г.
      • Виталий, спасибо! Поиск у меня теперь лежит внутри слоя header переделала все .footer на соответствующий слой. И перенесла этот блок search под header (надеюсь я правильно изъясняюсь) И вид у поиска стал симпатичнее Но вот какой момент, при наведении мышки он работает не только как поиск, но и как ссылка на страницу поиска. Может подскажите где еще поправить? У вас это хорошо и очень понятно получается)

        Это то как сейчас все выглядит:
        http://world-lash.com/

        /* |===============| header start |===============| */
        .header{
        margin: 0 0 30px;
        }
        .header__center{
        display: table;
        height: 130px;
        }
        .logo{
        display: table-cell;
        vertical-align: middle;
        padding: 10px 20px 10px 0;
        width: 362px;
        color: #2e2e2e;
        font-weight: 300;
        }
        .header__unit{
        display: table-cell;
        vertical-align: middle;
        padding: 10px 18px 10px 0;
        font: 14px/20px 'Myriad Pro';
        }
        .logo + .header__unit{
        width: 250px;
        }
        .header__unit:last-child{
        padding: 0 2px 0 0;
        width: 219px;
        }
        .header__unit a:hover{
        color: #a21712;
        }
        .tel{
        font: 300 24px/26px 'Myriad Pro';
        letter-spacing: -0.8px;
        }
        .light-nav{
        overflow: hidden;
        font: 14px/20px 'Myriad Pro';
        }
        .light-nav li{
        position: relative;
        display: inline-block;
        margin-right: 7px;
        }
        .light-nav li:before{
        content: "•";
        position: absolute;
        left: -7px;
        top: 0;
        }
        .light-nav a{
        color: #2e2e2e;
        padding-right: 3px;
        }
        .light-nav a:hover{
        color: #e32119;
        }
        .header__unit .fa{
        margin: 0 5px 0 0;
        }
        /* |===============| header end |===============| */

        /* |===============| search start |===============| */
        #wrapper .header .search{
        position: relative;
        float: right;
        margin: 14px 0 0;
        }
        #wrapper .header .search input{
        margin: 0;
        padding: 7px 31px 6px 9px;
        font: 14px/18px 'Myriad Pro';
        width: 231px;
        height: 31px;
        background-color: transparent;
        color: #fff;
        }
        #wrapper .header .search input:focus{
        border-color: #fff;
        }
        #wrapper .header .submit_search,
        #wrapper .header .submit_search:hover,
        #wrapper .header .submit_search:focus{
        position: absolute;
        top: -2px;
        right: 6px;
        border: 0;
        padding: 0;
        width: 23px;
        height: 31px;
        background: none;
        color: #bbc3c6;
        }
        #wrapper .header .submit_search:after{
        content: "\f002";
        font: 13px fontawesome;
        vertical-align: middle;
        }
        #wrapper .header .submit_search:hover,
        #wrapper .header .submit_search:focus{
        color: #fff;

        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        }
        .header__copy{
        float: left;
        text-align: center;
        margin: 0 0 0 164px;
        width: 520px;
        font-size: 14px;
        }
        /* |===============| search end |===============| */
  •
  • 21 марта 2016 г.
  • Или я не туда лезу?)
    •
    • 21 марта 2016 г.
    • У вас css не весь. По крайней мере, я не вижу, что тут можно править.
      К примеру у меня в стилях есть:
      background: url("/img/icon_search.png") no-repeat right center;
      это в стилях ссылка на иконку (лупу).

      footer - это подвал, он вам совсем ни к чему.

Новости

  • Не пропустите сборку DIAFAN.CMS 7.1.4
  • 24 апреля, среда
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • Сборка DIAFAN.CMS 7.1.3
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 
  • Новость. Сборка. Тарифы
  • 15 декабря 2023 г.
  • Подводим итоги 2023 года. Выпустили новую сборку DIAFAN.CMS 7.1.1, вводим новые тарифы на аренду сайта и коммерческую поддержку и автообновления с января 2024 г., строим планы на будущий год.
Все новости