Форма входа

mvcreative

Старая форма входа

Страница 1 из 11
Модератор форума: BSide 
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Проблема с версткой формы поиска
Проблема с версткой формы поиска
Henuz2000Дата: Пятница, 16.11.2012, 15:00 | Сообщение # 1
Молчун
Группа: Пользователи
Пользователь №: 2306
Сообщений: 9
Награды: 0
Репутация: 0
Статус: оффлайн
Я верстке особо не научен, но вот на практике столкнулся с проблемой при верстке формы поиска для ucoz.

На макете:


На деле:


У меня имеется 2 вопроса:
1) Как вставить эту иконку лупы (некликабельну, просто для красоты)?
2) Как сделать рядом кнопку поиска не вот эту вот, стандартную, а как на макете?

Вот мой код на данный момент:


А это css:


P.s. 2 картинки прикрепил в архиве
Заранее спасибо.




Прикрепления: img.rar(2Kb)



Сообщение отредактировал Henuz2000 - Пятница, 16.11.2012, 15:05
 
вверх
BSideДата: Пятница, 16.11.2012, 15:35 | Сообщение # 2
Настоящий писец!
Группа: Администраторы
Пользователь №: 700
Сообщений: 510
Награды: 19
Репутация: 32
Статус: оффлайн
henuz2000, эффект тот же, не идеал конечно, но от него танцевать можно..
Code
#edit-submit {
cursor: pointer;
margin: -17px 5px 0px 5px;
line-height: 80px;
height: 30px;
width: 60px;
background: url('img/goSearch.png.png');
border: none;
}
 
вверх
cechДата: Пятница, 16.11.2012, 15:35 | Сообщение # 3
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
Разбираться в чужом коже не хочу, но скажу как сделал бы я
Вырезаем единую картинку всю http://i.imgur.com/hwCuy.png, фон прозрачный. Далее пишем такую структуру
Code
<div class="search_form">
  <div class="search_inp"><input type="text" value=""/></div>
  <input type="submit" value="" class="search_btn"/>
  <div class="clear"></div>
</div>


Смысл в том что классу search_inp и классу search_btn это фон поля, и сама кнопка задаем float:left. Далее на класс search_btn вешаем полностью фон поля и задаем внутренние отступы для инпута и внешний правый отступ от кнопки, на класс search_btn вешаем фон кнопки, предварительно обнулив у нее стили border.

Получается примерно такой код

Code
.clear {clear:both;} /*снять обтекания float*/
.search_inp {
  float:left;
  width:100px;
  height:20px;
  backgroung:url() no-repeat;
  padding:5px 0 0 5px; /*отступы внутренние чтобы спозиционировать инпут*/
  margin-right:5px; /*правый отсутп до кнопки*/
}
.search_inp input {
  background:none;
  border:0 none;
  width:90px;
  height:15px;
}
.search_btn {
  width:30px;
  height:20px;
  float:left;
  background:url() no-repeat;
  cursor:pointer;
}


Как то так



 
вверх
Henuz2000Дата: Воскресенье, 18.11.2012, 13:15 | Сообщение # 4
Молчун
Группа: Пользователи
Пользователь №: 2306
Сообщений: 9
Награды: 0
Репутация: 0
Статус: оффлайн
Что-то все равно никак.
 
вверх
BSideДата: Воскресенье, 18.11.2012, 14:07 | Сообщение # 5
Настоящий писец!
Группа: Администраторы
Пользователь №: 700
Сообщений: 510
Награды: 19
Репутация: 32
Статус: оффлайн
Henuz2000, что-то не так делаешь значит, пробуй, пробуй и еще раз пробуй, рано или поздно разберешься..
 
вверх
SaiqdrxДата: Воскресенье, 18.11.2012, 17:22 | Сообщение # 6
Охрипший
Группа: Проверенные
Пользователь №: 1228
Сообщений: 336
Награды: 7
Репутация: 21
Статус: оффлайн
Я делаю проще вырезаю фото с поиском и кнопокой для поиска и прописываю
Форму для поиска :

А потом в css прописываю фон для этого поиска :

Id - search отвечает за расположения формы поиска в шаблоне.
Класс - serch_text - это форму куда пользователь вводит,что ищет;
Класс - go - это сама кнопка на которую надо нажать что бы начался поиск.
 
вверх
Henuz2000Дата: Воскресенье, 18.11.2012, 18:51 | Сообщение # 7
Молчун
Группа: Пользователи
Пользователь №: 2306
Сообщений: 9
Награды: 0
Репутация: 0
Статус: оффлайн
Saiqdrx, Спасибо тебе)
Проблемка разрешилась.
 
вверх
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Проблема с версткой формы поиска
Страница 1 из 11
Поиск: