Create site free

Верстаем вложенные поля - 3 Июля 2010 - Посты - UnderShot: поле, css, html, body, input, position, absolute, relative, border-radius

Блог UnderShot`а / Посты / Верстка / Верстаем вложенные поля

Верстаем вложенные поля

Привет, сегодня я буду объяснять как сверстать вложенные input-поля, такого вида:

Как должен выглядеть input

Начинаем

Итак, приступим!

Начнем с html кода:

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Новый Документ</title>
<style></style>
</head>
<body>

</body>
</html>

Верстаем

Создали основной макет, теперь приступаем к написанию самих input`ов и их оформления. В body вставляем код:

Code

<div class="all">

  <div class="input_text relative">
  
  <input type="text" id="txt" value="Это input поле…"/>
  
  <div class="button">
  
  <input type="button" id="butt"/>
  </div>
  </div>

</div>

CSS

После, переходим в написанию CSS:

Code

<style>
.relative{
  position:relative
}
.input_text{
  width:187px!important/* чтобы поле имело ширину точно 200px */
}
.input_text input{
  width:100%;
  height:20px;
  border:1px solid #969696;
  -moz-border-radius:20px;/* для Firefox */
  -webkit-border-radius:20px;/* для Chrome, Safari */
  border-radius:20px;/* для Opera */
  padding-left:10px/* отступ для текста */
}
.button input{
  cursor:hand;/* при наведении на кнопку, будет курсор «руки» */
  width: 16px;
  height: 16px;
  background: url(search_icon.png) no-repeat;/* указываю фон */
  border:none!important;/* убираю лишнюю обводку */
  position:absolute;/* абсолюбно позиционирую */
  top:4px;
  right:-5px
}
</style>

Начнем с .input_text. Ширина у input`а должна быть 200px, но из-за padding`а ширину увеличивается. Это можно предотвратить уменьшением ширины родительского блока, как я и сделал.

Соответственно пример. Спасибо за внимание.

Рассказать в …

Подписаться по RSS

Дата: 03.07.2010 • Теги:

поле, css, html, body, input, position, absolute, relative, border-radius

↑ +5 ↓

Материалы этой категории:

Не найдено.

Просмотров: 2103, комментариев: 12

Добавить комментарий ↓

#1: maivan

Юзерпик maivan`а

Полезный пост :)

03.07.2010, 23:48

#2: Foggy

Нужная вещь) Спасибо) Долго хотел сам сделать, но ленился) Теперь трудиться не придётся)

04.07.2010, 01:38

#3

@Foggy рад стараться. UnderShot

#4: Aleko

Юзерпик Aleko`а

Намудрил с подсветкой - не пашет вывод кода в окне. =)

04.07.2010, 01:59

#5

@Aleko ага, это я и хотел спросить у тебя. В асю зайди. UnderShot

Юзерпик klimenko`а

Тест

04.07.2010, 15:15

#7: ad

У тебя в примере квадратный инпут, а тут на картинке закругленный хДДД

04.07.2010, 15:29

#8

@ad у тебя браузер не поддерживает border-radius. UnderShot

#9: IDiz

Лучше бы сделал с нарисованным инпутом. Забэкраундил бы и убрал обводку и всякую чушь... было бы кроссбраузерно...

04.07.2010, 17:39

#10

@IDiz это уже каждый для под себя будет подстраивать. UnderShot

Картинка новости не крута. Не в 16 бит живем же.

04.07.2010, 19:00

#12

@Rebelion эдакая фишка smile

smile