После того, как у нас есть готовый фон для кнопки и поля ввода, пришла пора добавить их на сайт. Для начала сформируем HTML код:
Code
<!-- Search Block -->
<div class="search">
<form method="get">
<div class="find"><input class="field" type="text" value="Поиск"></div>
<div class="but"><input class="button" value="" type="submit"></div>
</form>
</div>
<!-- /Search Block -->
Форма ввода должна быть отредактирована соответствующим образом, чтобы данные правильно могли быть обработаны. В данном случае приведена упрощённая форма.
Для корректного отображения этого кода необходимо добавить нужные стили в CSS.
Code
.search {
width: 230px;
}
.find {
float: left;
padding: 4px 0px;
width: 155px;
}
.but {
float: right;
padding: 3px 0px;
width: 75px;
}
.field {
background: url('find.png');
border: none;
color: #7f7f7f;
height: 26px;
padding-left: 30px;
width: 152px;
}
.button {
background: url('button.png');
border: none;
height: 28px;
width: 64px;
}
класс field и button относятся непосредственно к полю ввода и кнопке. Для них критична значения width и height - они должны равняться размерам соответствующих изображений фоновых картинок. Так же необходимо использовать значение border: none - это позволит убрать стандартную рамку вокруг них.
Здесь можно посмотреть на то, как это будет выглядеть в "собранном" виде
© www.otherside.ws
