|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
11.02.2013, 13:54 | #1 |
Пользователь
Регистрация: 08.02.2013
Сообщений: 32
|
Резиновая форма - как вытянуть input во всю длинну
Не подскажете как сделать, чтобы поле вытянулось во всю длинну и упиралось в кнопку?
Это "резиновая" форма и при сжатии это поле всегда должно иметь отступ 5px от кнопки (кнопка имеет margin-left: 5px). Вот мой код: Код HTML:
<html> <head> <style type="text/css"> .top_form { background: #eaeaea; padding: 6px; width: 50%; float: left; } .top_form_textarea { border: 1px solid #cfcfcf; border-top: 1px solid #bcbcbc; background: #f9f9f9; color: #7b7b7b; width: 100%; padding: 4px 4px; font-family: Arial, Helvetica, sans-serif; font-size: 85%; line-height: 100%; resize: none; outline: none; overflow: auto; margin-bottom: 5px; vertical-align: top; } .top_form_email { border: 1px solid #cfcfcf; border-top: 1px solid #bcbcbc; background: #f9f9f9; color: #7b7b7b; padding: 2px 4px; font-family: Arial, Helvetica, sans-serif; font-size: 85%; height: 23px; outline: none; float: left; margin: 0; } .top_button { height: 23px; padding: 0 9px; margin-left: 5px; outline: none; border: 1px solid #cfcfcf; border-bottom: 1px solid #bcbcbc; background: #F1F1F1 url(../img/button_bg.png) repeat-x; text-shadow: 1px 1px #FFF; cursor: pointer; color: #606060; font-size: 85%; float: right; font-family: Arial, Helvetica, sans-serif; } </style> <body> <div class="top_form"> <form> <div class="textareacontainer"><textarea name="p12" class="top_form_textarea" rows="3" cols="30"></textarea></div> <input type="text" name="p13" size="20" value="" class="top_form_email"> <input type="submit" value="Send" class="top_button"> </form> </div> </body> </html> |
11.02.2013, 16:36 | #2 |
Очень суровый
Участник клуба
Регистрация: 17.12.2009
Сообщений: 1,988
|
ширина кнопки известна? Если нет - опять костыль
Ненавижу быть как все, но люблю, чтобы все были как я.
|
11.02.2013, 16:57 | #3 |
Пользователь
Регистрация: 08.02.2013
Сообщений: 32
|
Да, я понял, берём поле в div и задаём ему margin-right от ширины кнопки.
Даже если известна ширина, то в IE 6 всё идёт наперекосяк и даже в IE 7 ломается. В общем прихожу к выводу, что дивами нереально качественно расставить блоки (чтобы они не разъезжались, не ломались). Только таблицей можно это сделать. |
13.02.2013, 08:01 | #4 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Очередная победа таблиц над здравым смыслом=)
Alar, верни репу!
|
14.02.2013, 16:40 | #5 |
Пользователь
Регистрация: 08.02.2013
Сообщений: 32
|
В чём здравый смысл или нездравый смысл таблицы в данном случае?
С помощью дивов невозможно сделать качественно то, что мне нужно. Значит, нужно делать таблицей - получается, что это здраво, а дивами - нездраво. Кроме того, посмотри, даже А. Лебедев использует таблицы на tema.ru и design.ru - уж он точно имеет здравомыслие Нужно использовать то, что может решить поставленную задачу. В данном случае это table, а не div. Если div способен решить задачу, то покажите способ. |
14.02.2013, 17:09 | #6 | ||||||
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Таблицы для табличных данных. Слои для универсальной разметки. Цитата:
============================ Пиу: Код:
Alar, верни репу!
Последний раз редактировалось Naive; 14.02.2013 в 17:56. |
||||||
14.02.2013, 18:13 | #7 |
Пользователь
Регистрация: 08.02.2013
Сообщений: 32
|
Я всё понимаю, что ты говоришь, во многом согласен.
Но! В данном случае таблица работает лучше и правильнее. А то, что это некашерно (для создателя, но не для пользователя сайтом!) - это уже другой вопрос и он по большому счёту почти не важен. Важно только одно - корректность отображения и кроссбраузерность. Твоя вёрстка косячная В IE 6 поле вытянулось во всю ширину формы, а кнопка съехала на 3 строку. Но большое спасибо за время и силы!!! Я уже сделал таблицей (всего 3 ячейки! и никаких проблем), и всё на 100% отлично. Последний раз редактировалось Дерек; 14.02.2013 в 18:19. |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Форма с title="Что-то здесь написано" в input | keen_ | JavaScript, Ajax | 15 | 11.11.2012 11:19 |
Резиновая шапка стартовой и форма входа! | zech227 | HTML и CSS | 3 | 02.10.2012 12:36 |
Как установить длинну строки в Delphi?! | Npwas | Помощь студентам | 19 | 13.12.2011 23:57 |
Как программно вытянуть инфу о железе на с++ | yanhumak | Общие вопросы C/C++ | 1 | 21.02.2011 20:35 |
Как увеличить длинну выпадающего списка: ДАННЫЕ-ПРОВЕРКА-СПИСОК | kay | Microsoft Office Excel | 3 | 10.02.2009 12:59 |