2013-12-23 4 views
0

Я пробовал настраивать CSS-кодировку и не превалировал. Вещи я хочу: коробкане удалось изменить атрибут окна поиска

  • поиска с радиусом приграничного 5px
  • увеличить значок поиска с вне получать его dispalced
  • как окно поиска и поиск значок равномерно расположенный вокруг DIV

HTML КОД:

 <div class="search" 
     <div class="searchbox"> 
      <form action="/search" method="get" class="search_form"> 
      <input type="text" value="Search Blog..." class="search_text" name="q"> 
      <input type="image" src="http://s25.postimg.org/d3fu892zz/search_button_without_text_md.png" height="20" width="20"class="button"> 
      </form> 
     </div> 
    </div> 

CSS КОД:

.search{position:fixed; 
    height:25px; 
    width:194px; 
    top:189px; 
    left:14px; 
    border:2px solid black; 
    background-color:black; 
    border-radius:10px; 
    padding-left:2px; 
    padding-bottom:4px; 
    opacity:.8;} 
+0

Я не видит много классов, определенных в HTML-коде, в вашем CSS egclass = «search_form» класса = «текст_для_поиск» класса = «Кнопка» Также в вашем коде для кнопки должен быть пробел перед классом = "button" –

+0

привет. да, это была моя проблема. У меня так много классов, и я не знаю, для кого это. но я понял это сейчас. Спасибо! я просто должен помнить конкретные классы и идентификаторы, поэтому я не смешиваю их –

ответ

0

Примечание: Ваш класс = "поиск" не закрыт!

Вот код, который должен работать и FULLFILL все три условия твоего

<div class="search"> 
<div class="searchbox"> 
    <form action="/search" method="get" class="search_form"> 
     <input type="text" value="Search Blog..." class="search_text" name="q"> 
<input type="image" src="http://i42.tinypic.com/fayl43.png" class="button"> 
    </form> 
</div> 

Css Код:

.search{position:absolute; 
height:28px; 
width:190px; 
top:140px; 
left:100px; 
border:2px solid black; 
background-color:black; 
border-radius:10px; 
padding-left:2px; 
padding-bottom:4px; 
opacity:.8; 
} 

form#input{ 
    display:inline-block; 
} 

.searchbox{ 

} 

.search_text{ 
    margin-top:4px; 
    margin-left:5px; 
    border-radius:5px; 
    text-align:center; 
} 

.button{ 
    margin-top:5px; 
    margin-left:2px; 
    position:absolute; 
    height:20px; 
    width:20px; 
} 
.button:hover{ 
    -webkit-transform:scale(1.3); 
      -moz-transform:scale(1.3); 
      -o-transform:scale(1.3); 
      opacity: 3; 

} 

Рабочая JSfiddle Demo - http://jsfiddle.net/vg8Mn/

Надеется, что это помогает :)

+0

«поисковый блог ...», созданный по центру, делает его еще более аккуратным! Спасибо –