Замена поиска на сайте конструктора uCoz - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1 1
Модератор форума: -SAM-

Форум » Веб-разработка » Вопросы про uCoz » Замена поиска на сайте конструктора uCoz (Нужно поставить и настроить поиск под меню.)

Замена поиска на сайте конструктора uCoz

rekersil

Среда, 08 Февраля 2017 | Сообщение 1

Проверенные

Сообщений:185

Награды: 1

« 13 »

Здравствуйте. Порылся по шаблонам и на одном из них нашёл интересный для меня поиск.Вытащил с шаблона CSS и HTML поиска. Теперь мне нужно поставить и настроить его в меню.

HTML моего сайта(части сайта):

Код

<!DOCTYPE html>
<html>
<head>
    <title>HomeCinema - Твой домашний кинотеатр!</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
    <div class="wraper">
  <div class="header">
   <div class="hc-logo">
    <a href="http://homecinema.ucoz.org/">
     <i class="icon"></i>
    </a>
   </div>
   <div class="header-menu">
    <ul class="header-menu-list">
     <li>
      <a href="http://homecinema.ucoz.org/">
       Главная
      <a>
     </li>
     <li>
      <a href="/">
       Новинки
      </a>
     </li>
     <li>
                        <a href="/">
       Стол заказов
      </a>
     </li>
     <li>
      <a href="/">
       Помощь
      </a>
     </li>
    </ul>
   </div>
     <input type="text" value="Поиск" class="search" name="search" onblur="if(this.value=='') this.value='Поиск';" onfocus="if(this.value=='Поиск') this.value='';">
  </div>
    </div>
</body>
</html>

CSS

Код

.wraper {
    width: 950px;
    position: relative;
    margin: 0 auto;
}

.header {
    width: 950px;
    height: 50px;
    background: #292929;
}

.hc-logo {
    position: absolute;
    width: 160px;
    height: 50px;
    margin-left: 75px;
}

.hc-logo:hover {
    opacity: 0.9;
}
.icon {
    background: url("images/logo-header.png");
    position: absolute;
    width: 100%;
    height: 100%;

}
.header-menu {
    display: inline-block;
    margin-left: 250px;
}
.header-menu li {
    display: inline-block;
    margin: 0 10px;
    font-size: 16px;
    font-weight: bold;
}

.header-menu-list a{
    color: white;
    text-decoration: none;
}

.header-menu-list a:hover{
    color: #e9e9e9;
}

.search{
    color: #B6B6B6;
    height: 25px;
    width: 240px;
    margin: 0 0 0 17px;
    border: 0;
    border-radius: 4px;
}

.search:focus{
    background-color: #e9e9e9;
}

Вот html поиска,который нужно поставить:

Код

CSS

Код

.searchbar {
    height:40px;
    overflow:hidden;
    margin:25px 0 25px 5px;
    position:relative;
    float:left;
    width:250px;
}
.searchbar .searchbar-input {
    height:40px;
    width:100%;
    background:#222933;
    color:#99b1d4;
    line-height:40px;
    border:1px solid #313842;
    padding:0 40px 0 20px;
    font-style: italic;
    font-size: 14px;
}
.searchbar .searchbar-input:hover {
    background:#304156
}
.searchbar .searchbar-input:focus {
    color: #99b1d4; outline:0;
    background:#304156
}
.searchbar .searchbar-btn {
    position:absolute;
    top:0;
    right:0;
    padding:9px 15px 9px 10px;
    color:#99b1d4;
    background:none;
    border:none;
    font-size:16px;}
.searchbar .searchbar-btn:hover {
    color: #fff;
}
.searchbar .searchbar-btn:focus {
    outline:0
}

Прикрепления: 7876424.png (2.6 Kb) · 2709280.png (46.3 Kb)

Страна: (UA)