Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Как склеить?


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

Автор: R.M. 31.5.2006, 10:26
Не совсем понял (показал бы пример на скриншоте) ну насколько я понял тебе просто нужно сунуть в бэкграунд картинку например в <div> а в самом этом диве спозиционировать input'ы 

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

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

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

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

Автор: R.M. 31.5.2006, 16:18
Vaulter, ты прав, но
Цитата(Vaulter @  31.5.2006,  16:18 Найти цитируемый пост)
по умолчанию кажется именно это

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

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

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

Автор: R.M. 1.6.2006, 09:38
Цитата(Zzz @  1.6.2006,  03:09 Найти цитируемый пост)
P.S. Из умной книжки почерпнул, что по умолчанию идет static, т.е. нормльный поток. 

Ну яж говорил что не relative smile спасибо за точную информацию. 

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

Автор: wil 15.6.2006, 12:38
коряво, конечно. по-бырому накатал

Код

<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://mmorpg.rpgland.ru/form/
сделано на основе - http://xhtml.ru/2005/11/28/css-forms/   

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)