Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS как растянуть input / 13 сообщений из 13, страница 1 из 1
04.07.2012, 10:38:43
    #37865575
oaken
oaken
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS как растянуть input
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
<html>
  <head>
    <style type="text/css">
      #body{
		width:1024px;
		height:500px;
		margin:0 auto;
		background:yellow;		
	  }
	  #right{
		  float:right;
		  background:green;
		  height:400px;
		  width:200px;
	  }
	  #search_form{
		  height:50px;
		  background:blue;
		  width:100%;		  	  
	  }
	  #s_input{
		  margin:12px;
		  width:680px;		  
	  }
	  #s_button{
		  
	  }
    </style>
  </head>
  <body>
    <div id="body">
    	<div id="right">
        </div>
        <form id="search_form" method="post" action="#" >
        	<label for="searchword">search</label>
        	<input id="s_input" type="text" name="searchword">
            <button id="s_button" onclick="this.form.submit()" name="searchbutton">find...</button>
        </form>
    </div>
  </body>
</html>

Каким образом можно добиться динамического изменения размера поля ввода s_input в зависимости от ширины блока right ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.07.2012, 10:58:58
    #37865612
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS как растянуть input
Код: css
1.
2.
3.
4.
5.
6.
7.
      #right{
          width:19%;
      }

      #s_input{
          width:66%;          
      }
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.07.2012, 11:08:21
    #37865633
oaken
oaken
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS как растянуть input
Паганель,
ну а если я поставлю
Код: html
1.
2.
3.
#right{
          width:30%;
      }

все расползется :) а нужно чтобы просто уменьшился размер s_input соответствующим образом...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.07.2012, 11:12:45
    #37865647
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS как растянуть input
oakenну а если я поставлю
Код: html
1.
2.
3.
#right{
          width:30%;
      }

все расползется :)меняйте ширину #right посредством изменения ширины #body
заодно поменяется и ширина #s_input
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.07.2012, 11:20:13
    #37865663
oaken
oaken
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS как растянуть input
Паганельменяйте ширину #right посредством изменения ширины #body
заодно поменяется и ширина #s_inputДело в том, ято я немогу ничего менять. Ширина тела - фиксирована. Правый блок с изменяемой шириной в зависимости от содержимого. Содержимое в этот блок будут заливать пользователи самостоятельно мне же нужно обеспечить динамическое изменения поля ввода.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.07.2012, 11:21:22
    #37865668
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS как растянуть input
тогда я не знаю как сделать это на css
рекомендую решить задачу посредством js
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.07.2012, 11:38:58
    #37865715
oaken
oaken
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS как растянуть input
Паганельтогда я не знаю как сделать это на css
рекомендую решить задачу посредством jsда я, вобщем не очень-то и c css дружу, а с js дела и того хуже :) если Вас не затруднит, подскажите хотя бы приблизительный алгоритм решения задачи с помощью js.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.07.2012, 11:43:06
    #37865728
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS как растянуть input
расскажите, пожалуйста, подробнее, как именноoakenСодержимое в этот блок будут заливать пользователи самостоятельно
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.07.2012, 11:46:04
    #37865739
oaken
oaken
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS как растянуть input
Паганельрасскажите, пожалуйста, подробнее, как именноoakenСодержимое в этот блок будут заливать пользователи самостоятельновышеприведенный код - часть шаблона к цмс joomla. В позицию right пользователи будут публиковать контент различной (заранее неизвестной) ширины, соответственно разные страницы сайта будут иметь различное доступное место для вывода компонента поиска...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.07.2012, 11:51:26
    #37865753
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS как растянуть input
oakenВ позицию right пользователи будут публиковать контент различной (заранее неизвестной) шириныкак именно?
нажимая какую-то кнопку, отправляя данные на сервер и при этом перегружая страницу?
или динамически на клиенте, оповещая сервер ajax-ом?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.07.2012, 12:15:38
    #37865804
oaken
oaken
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS как растянуть input
Паганелькак именно?
нажимая какую-то кнопку, отправляя данные на сервер и при этом перегружая страницу?
совершенно верно
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.07.2012, 12:23:19
    #37865828
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS как растянуть input
тогда при загрузке страницы можно и указать зависимость, например
Код: javascript
1.
$('#s_input').width($('#right').width() * 3.4);


демонстрация:
http://jsfiddle.net/x2S9A/
поменяйте там ширину #right и понажимайте Run
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.07.2012, 15:17:21
    #37866158
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS как растянуть input
Паганельтогда я не знаю как сделать это на css
Если только изменить разметку и использовать табличку при делении на "право/лево"...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS как растянуть input / 13 сообщений из 13, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 414ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1449620]:
 0ms
get settings:
 5ms
get forum list:
 9ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 173ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 25ms
get tp. blocked users:
 1ms
others: 189ms
total:  414ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]