VPF::Как склеить? - Форум программистов

Zzz

Дата 31.5.2006, 00:54 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 306
Регистрация: 21.2.2003
Где: Мурманск

Репутация: нет
Всего: 5

Доброго времени суток!
Задача состоит в следующем: Есть картинка (для примера представьте окно регистрации Windows) и два поля ввода, каким способом можно наложить поля ввода на картинку, так чтобы они совпали с нарисованными. Картинка будет располагаться в центре окна браузера... естественно что центр меняется в зависимости от размеров окна браузера и поля ввода должны перемещаться вслед за ней.

--------------------

Бесполезной громоздкой надстройкой является Windows от Майкрософт. Она занимает 1Мб памяти диска и рассчитана на использование устройства типа мышь.

"ЭВМ в инженерной практике" М. 1989г.

R.M.

Дата 31.5.2006, 10:26 (ссылка)

(нет голосов)

Загрузка ...

Анархист

Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: 9
Всего: 30

Не совсем понял (показал бы пример на скриншоте) ну насколько я понял тебе просто нужно сунуть в бэкграунд картинку например в <div> а в самом этом диве спозиционировать input'ы

--------------------

Помнишь как бодрили дискотеки прошлого века? Теперь стул, компьютер и нету человека.

Nokia LifeStyle - Всё для смартфонов Nokia

Zzz

Дата 31.5.2006, 14:26 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 306
Регистрация: 21.2.2003
Где: Мурманск

Репутация: нет
Всего: 5

Вот пример картинки с логином. На ней есть два белых поля: Username и Password. Необходимо на html-страничке разместить 2 INPUT'а как раз над этими полями (грубо говоря чтоб создавалось впечатление что вводится именно в эту форму).

Цитата

а в самом этом диве спозиционировать input'ы

Каким образом можно спозиционировать? Я представляю себе, что такое относительное позиционирование в CSS, но если задавать в %, то получается не точно, если в px, то при изменении размеров окна браузера это не работает. Еще раз повторюсь что картинка "плавает" в центре экрана, т.е. при изменении размеров браузера, она центруется.

Присоединённый файл ( Кол-во скачиваний: 38 )

PS.JPG 19,95 Kb

--------------------

Vaulter

Дата 31.5.2006, 15:18 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1724
Регистрация: 30.12.2002
Где: бункер

Репутация: нет
Всего: 22

Zzz, если указывается position:relative (по умолчанию кажется именно это)
то если у бокса top: 100px; left:100px -
то он будет на 100 и 100 относительно РОДИТЕЛЬСКОГО бокса.

--------------------

R.M.

Дата 31.5.2006, 16:18 (ссылка)

(нет голосов)

Загрузка ...

Анархист

Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: 9
Всего: 30

Vaulter, ты прав, но

Цитата(Vaulter @ 31.5.2006, 16:18

)

по умолчанию кажется именно это

Мне тоже так казалось, но если опустить position:relative то относительного позиционирования от родительского бокса небудет.

--------------------

Zzz

Дата 1.6.2006, 02:09 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 306
Регистрация: 21.2.2003
Где: Мурманск

Репутация: нет
Всего: 5

Спасибо, попробую... Честно говоря сразу как-то не подумал о том что позиционировать нужно относительно какого-то блока (т.е. родительского), всегда (а случаев было мало smile

) использовал relative только относительно всего документа. Опыта не достает smile

P.S. Из умной книжки почерпнул, что по умолчанию идет static, т.е. нормльный поток.

Это сообщение отредактировал(а) Zzz - 1.6.2006, 02:12

--------------------

R.M.

Дата 1.6.2006, 09:38 (ссылка)

(нет голосов)

Загрузка ...

Анархист

Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: 9
Всего: 30

Цитата(Zzz @ 1.6.2006, 03:09

)

P.S. Из умной книжки почерпнул, что по умолчанию идет static, т.е. нормльный поток.

Ну яж говорил что не relative smile

спасибо за точную информацию.

--------------------

set36

Дата 14.6.2006, 00:15 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 27
Регистрация: 14.4.2006

Репутация: нет
Всего: 1

А не проще ли всё это в таблицу и ударить CSS'ом, а не делать здоровенную картинку и парицца с позиционированием и выставлением фиксированных размеров для инпутов.
Обычные бордеры и бэкграунды не будут глючить, а позиционирование и фиксированный размер бывают непредсказуемы.

wil

Дата 15.6.2006, 12:38 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 125
Регистрация: 28.3.2006

Репутация: нет
Всего: 4

коряво, конечно. по-бырому накатал

Код


<form method="post" action="#" id="testForm">
 <fieldset>
 <label for="inp1" style="margin-top: 115px;">Username: <br /></label>
  <input id="inp1" style="margin-top: 115px;" name="name" value="" /><br />
 <label for="inp2">Password: <br /></label>
  <input id="inp2" name="passw" value="" /><br />
  <input type="submit" value="Отправить" class="noresize submit" />
  </fieldset>
</form>

Код


*{padding:0;margin:0;}
#testForm {
  font-size:0.8em; /* размер шрифта формы */
  width: 461px;

}
#testForm fieldset {
  /* рамка вокруг формы */
  border:solid 0px #500116;  /* нормальная граница рамки */
  background-image: url('bg2.jpg');
  width: 461px;
  height: 230px;
}
#testForm legend {
  color: #B90004; /* IE использует цвет шрифта не такой,
  как у остальных элементов, исправляем */
  background:inherit;
}
#testForm label {
  float:left; /* подписи к полям сдвигаются влево */
  width:5em; /* ширина колонки подписей */
  margin-left: 0.5em;
  text-align:left;
}
#testForm input, #testForm select, #testForm textarea {
  margin:0 0 0.5em 0.2em;
  width: 300px; /* ширина полей формы */
  padding:0;
  /* делаем одинаковый шрифт для input, select, textarea */
  font-family: Verdana, sans-serif;
  font-size:90%;
  background-color: #fff;
}

#testForm .noresize {
  width:auto; /* для кнопок, переключателей */
}
#testForm .submit {
  /* сдвигаем кнопку отправки */
  float: right;
  margin-right:2em;
}

пример
сделано на основе - http://xhtml.ru/2005/11/28/css-forms/

Это сообщение отредактировал(а) wil - 15.6.2006, 12:40

Присоединённый файл ( Кол-во скачиваний: 10 )

bg2.jpg 16,30 Kb

--------------------

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »