Страница 1 из 11
Форум » Web дизайн » HTML и CSS » красивое оформление полей ввода (часть 2 - HTML и CSS)
красивое оформление полей ввода
Reddy Дата: Воскресенье, 17.04.2011, 21:13 | Сообщение # 1
Reddy
Новичок
Сообщений: 129
Репутация: 14
Страна: Латвия
Статус: Offline
После того, как у нас есть готовый фон для кнопки и поля ввода, пришла пора добавить их на сайт. Для начала сформируем 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
спец по кнопачкам
 
Форум » Web дизайн » HTML и CSS » красивое оформление полей ввода (часть 2 - HTML и CSS)
Страница 1 из 11
Поиск:
Rambler's Top100 Рейтинг@Mail.ru Яндекс.Метрика
Полное или частичное копирование материалов только с указанием гиперссылки на www.otherside.ws

© 2010-2017 Other Side | Хостинг от uCoz