Автор Тема: Не могу разобраться с блоком поиска  (Прочитано 10411 раз)

Оффлайн sokrbam

  • Спец
  • ***
  • Сообщений: 168
    • Просмотр профиля
    • Оригинальные подарки для девушек
Уважаемые спецы!

Подскажите как правильно сделать блок поиска. Первая картинка это как я хочу сделать, а вторая, это то что получается. я залил на id#module_search фон с рамкой, а справа стоит кнопка найти с закруглением, но фон оставляет хвостики. Дайте подсказку плиз! А еще слева перед полем ввода хочу вставить картинку с лупой, это нужно отдельный div делать?

index:
<div id="module_search">
<div class="btnSearch3">
  <form action="index.php" method="get">
    <input type="text" name="searchstring" id="mod_search_searchword" value="{if $searchstring ne ""}{$searchstring||escape|replace:"\'":"'"|default:""}{else}{$smarty.const.STRING_SEARCH}{/if}" onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='{$smarty.const.STRING_SEARCH}') this.value='';" onclick="this.value = ''" />
    <a onclick="moduleSearch();" class="btnSearch3"><span>{$smarty.const.STRING_GO_SEARCH}</span></a>
  </form>
 
          <p><a href="./search_expanded/">{$smarty.const.ADVANCED_SEARCH_LINK}</a></p>
        </div>
      </div>

css: /*search*/


#module_search {
position: absolute;
background: url('../image/search2.png') repeat-x;
height: 60px;
width: 272px;
left: 50px;
top: 200px;

}

#mod_search_searchword {
height: 24px;
margin-top:6px;
margin-left: 31px;
padding:0;

}



.btnSearch3 a span{

background: url('../image/search3.png') no-repeat;
padding: 13px 60px 10px 10px;
display: inline-block;
}

[вложение удалено администратором]

Оффлайн sokrbam

  • Спец
  • ***
  • Сообщений: 168
    • Просмотр профиля
    • Оригинальные подарки для девушек
Re: Не могу разобраться с блоком поиска
« Ответ #1 : Мая 02, 2012, 08:33:57 pm »
border:0px;

Про это я знаю. мне необходим совет как убрать хвостики фона справа, как обычно верстаются такие закругленные формы.

Оффлайн sokrbam

  • Спец
  • ***
  • Сообщений: 168
    • Просмотр профиля
    • Оригинальные подарки для девушек
Re: Не могу разобраться с блоком поиска
« Ответ #2 : Мая 02, 2012, 09:35:41 pm »
ну про боди я уже сказал потом делаеш беграунд так как ты это и делаеш, потом ставиш ширену раную размеру твоего бегранда ну и все это надо применить к inpute тобиш к mod_search_searchword

ясно, но как я понял это правило для целой картинки. а я делаю из 3 элементов (во вложении) для экономии веса сайта. Получается ставлю фон полоской search2 на #module_search. Ставлю блоку #module_search ширину (по которой и растягивается фон search2). Далее я прописываю классу .btnSearch3 фоновую кнопку search3 и тут получается что даже если кнопку search3 прижать плотно к правой стороне, то остаются хвостики от беграунда seach2. Может надо сделать еще один класс чтобы прилепить картинки по краям?

[вложение удалено администратором]
« Последнее редактирование: Мая 02, 2012, 10:07:17 pm от sokrbam »

nictboom

  • Гость
Re: Не могу разобраться с блоком поиска
« Ответ #3 : Мая 02, 2012, 10:21:05 pm »
для примеру
<div id="module_search">
    <div class="search">
        <form action="index.php" method="get">
            <div class="search_l"></div>
            <div class="search_c">
            <input type="text" name="searchstring" id="mod_search_searchword" value="{if $searchstring ne ""}{$searchstring||escape|replace:"\'":"'"|default:""}{else}{$smarty.const.STRING_SEARCH}{/if}" onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='{$smarty.const.STRING_SEARCH}') this.value='';" onclick="this.value = ''" />
            </div>
            <div class="search_b">
                <a onclick="moduleSearch();">{$smarty.const.STRING_GO_SEARCH}</a>
            </div>
        </form>
        <p><a href="./search_expanded/">{$smarty.const.ADVANCED_SEARCH_LINK}</a></p>
    </div>
</div>
#module_search {position: absolute; height: 60px; width: 280px; left: 50px; top: 200px; z-index:999;}
.search {display: inline-block;}
.search input {background:none; border:none; padding: 10px 0/*свои значения*/; width: 142px;color:#676D78;}
.search_l, .search_c, .search_b {float: left; height:40px;}
.search_l {background: url('../image/search1.png ') no-repeat; width: 31px;}
.search_c {background: url('../image/search2.png') repeat-x; width: 142px; padding-left: 31px;}
.search_b {background: url('../image/search3.png ') no-repeat; width: 107px;}
.search_b a {font: oblique bold 12px Arial,Helvetica,sans-serif/*для примера*/; text-transform: uppercase; padding:10px 0 10px 20px/*для примера*/; text-decoration:none;}
« Последнее редактирование: Мая 03, 2012, 10:51:00 am от nictboom »

Оффлайн sokrbam

  • Спец
  • ***
  • Сообщений: 168
    • Просмотр профиля
    • Оригинальные подарки для девушек
Re: Не могу разобраться с блоком поиска
« Ответ #4 : Мая 03, 2012, 01:55:21 am »
для примеру
<div id="module_search">
    <div class="search">
        <form action="index.php" method="get">
            <div class="search_l"></div>
            <div class="search_c">
            <input type="text" name="searchstring" id="mod_search_searchword" value="{if $searchstring ne ""}{$searchstring||escape|replace:"\'":"'"|default:""}{else}{$smarty.const.STRING_SEARCH}{/if}" onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='{$smarty.const.STRING_SEARCH}') this.value='';" onclick="this.value = ''" />
            </div>
            <div class="search_b">
                <a onclick="moduleSearch();">{$smarty.const.STRING_GO_SEARCH}</a>
            </div>
        </form>
        <p><a href="./search_expanded/">{$smarty.const.ADVANCED_SEARCH_LINK}</a></p>
    </div>
</div>
#module_search {position: absolute; height: 60px; width: 280px; left: 50px; top: 200px; z-index:999;}
.search {display: inline-block;}
.search input {background:none; border:none; padding: 10px 0/*свои значения*/; width: 142px;color:#676D78;}
.search_l, .search_c, .search_b {float: left;}
.search_l {background: url('../image/search1.png ') no-repeat; width: 31px; height:40px;}
.search_c {background: url('../image/search2.png') repeat-x; width: 142px; padding-left: 31px; height:40px;}
.search_b {background: url('../image/search3.png ') no-repeat; width: 107px; height:40px;}
.search_b a {font: oblique bold 12px Arial,Helvetica,sans-serif/*для примера*/; text-transform: uppercase; padding:10px 0 10px 20px/*для примера*/; text-decoration:none;}

Спасибо, систему понял. Только не понял как убрать желтую рамку при клике на поле поиска. По идее за это отвечает "focus". Я сделал так #mod_search_searchword:focus {
border: none;
}
а толку нет

nictboom

  • Гость
Re: Не могу разобраться с блоком поиска
« Ответ #5 : Мая 03, 2012, 09:15:24 am »
или так попробовать:
input {outline:0!important;}
можно и textarea к input добавить, если напрягать будет.

Оффлайн sokrbam

  • Спец
  • ***
  • Сообщений: 168
    • Просмотр профиля
    • Оригинальные подарки для девушек
Re: Не могу разобраться с блоком поиска
« Ответ #6 : Мая 03, 2012, 05:03:48 pm »
работаю на денвере.

Сработал
input {outline:0!important;}

Спасибо