ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS как растянуть input
13 сообщений из 13, страница 1 из 1
CSS как растянуть input
    #37865575
oaken
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
oaken
Участник
Код: 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:38:43
| Ответить | Цитировать | Написать  
CSS как растянуть input
    #37865612
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
Код: css
1.
2.
3.
4.
5.
6.
7.
      #right{
          width:19%;
      }

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

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

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


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


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