ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Textarea шире внешнего элемента
2 сообщений из 2, страница 1 из 1
Textarea шире внешнего элемента
    #35603293
Новичок CSS
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Новичок CSS
Гость
страничка следующего содержания:
Код: plaintext
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Test textarea</title>
  <style>
  .text-editor {
    width:  10 %;
  }

  .text-editor .panel {
    background-color: #FFA3A3;
  }

  .text-editor textarea {
    width:  100 %;
  }</style>
</head>

<body>

<div class="text-editor">
<div class="panel">my panel</div>
<textarea></textarea></div>
</body>

</html>

подскажите, почему textarea вылазиет за пределы внешнего DIV?
...
Рейтинг: 0 / 0
20.10.2008, 01:30
| Ответить | Цитировать | Написать  
Textarea шире внешнего элемента
    #35603337
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
нда, это больная мозоль, касается не только textarea, но вообще всех инпутов в xhtml. Если почитать в тырнете, то народ решает это с помощью таблиц с table-layout:fixed, либо дивами оборачивает и все у них якобы получается. Возможно у меня руки не из того места растут, но меня результат сего не устраивает. Оба способа либо обрезают инпут (как в ИЕ6 - скрывается правые несколько пикселей, причем вместе с курсором и иногда даже вместе с последней полбуковкой), либо все равно делают инпут шире (как ФФ3). Опера вообще странная, не комментирую. Поэтому я обычно достигаю более-менее приличного результата через манипуляции с бордерами (в ИЕ все равно разница в пару пикселей, в ФФ и Опере - красота). Поищите в инете еще, может найдете нормальный способ.

Код: plaintext
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru-RU" xml:lang="ru-RU">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>
Что имеем:
<div style="width:10%; background:green">test</div>
<input type="text" style="width:10%"><br>
<textarea style="width:10%"></textarea><br><br>

Просто положить в таблицу:
<table style="width: 10%;" cellpadding="0" border="0">
	<tr><td style="background:green;">test</td></tr>
	<tr><td><textarea style="width: 100%"></textarea></td></tr>
	<tr><td><input type="text" style="width: 100%"></td></tr>
</table>

Положить в таблицу с table-layout: fixed
<table style="width: 10%; table-layout: fixed;" cellpadding="0" border="0">
	<tr><td><div style="width:100%; background:green">test</div></td></tr>
	<tr><td><textarea style="width: 100%"></textarea></td></tr>
	<tr><td><input type="text" style="width: 100%"></td></tr>
</table>

Положить в таблицу, обернув дивами:
<table style="width: 10%;" cellpadding="0" border="0">
	<tr><td><div style="width:100%; background:green">test</div></td></tr>
	<tr><td><div style="width: 100%"><textarea style="width: 100%"></textarea></div></td></tr>
	<tr><td><div style="width: 100%"><input type="text" style="width: 100%"></div></td></tr>
</table>

Как я обычно делаю (с таблицами и td, либо то же самое с дивами):
<table style="width:10%;" cellpadding="0" border="0">
	<tr align="center"><td style="background:green;">test</td></tr>
	<tr><td style="width:100%; border:1px solid #7f9db9"><textarea style="width: 100%; border:0"></textarea></td></tr>
	<tr><td style="width:100%; border:1px solid #7f9db9"><input type="text" style="width:100%; border:0"></td></tr>
</table>

</body>
</html>
...
Рейтинг: 0 / 0
20.10.2008, 05:09
| Ответить | Цитировать | Написать  
2 сообщений из 2, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Textarea шире внешнего элемента
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=35603293&tid=1455709]:
 0ms
get settings:
 8ms
get forum list:
 18ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 200ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 35ms
get tp. blocked users:
 1ms
others: 240ms
total:  522ms
созд. / загр.: 522ms
x
x
Закрыть


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