Помогите склеить две формы для текста.
 

Здравствуйте. Я придумал для сайта форму отправки сообщений. И тут возникла проблема. Форма будет не прямоугольной, а 6 угольной. Посмотрите пожалуйста на прикрепленный рисунок (поле Messages). Подойдет любое решение. На мой взгляд их два: 1. Создать большую форму, в левом верхнем угле поверх дать рисунок, а под ним не стирающиеся пробелы. Но не знаю как сделать так, чтоб пробелы всегда оставались. 2. Сделать две формы и их "склеить". Java scriptом сделать их работу как одного текстового поля, но тогда будет невозможно выделить весь написанный текст(с остальным думаю что-то сделать можно). Жду ваших советов.
P.S. обидно что современные веб программирование. не позволяет такого осуществить без всяких выдумок(((

В HTML5 есть contenteditable, который позволяет менять содержимое тегов. Последними браузерами вроде поддерживается, и прошлыми IE тоже.
имхо это позволяет поэкспериментировать с отображением и обтеканием как угодно.
При отправке придется скриптом забирать содержимое тега и совать в скрытый input или textarea, либо аяксом напрямую или как-то иначе...

Обычные поля таких фокусов имхо не позволяют... наверно можно обработчик сделать для двух полей, но это сложно и нецелесообразно.

Отлично!! Мне подходит такой вариант. Ну допустим это должно быть в таблице:
, что мне нужно дописать, чтоб блок div обтекал рисунок? БОЛЬШОЕ СПАСИБО!!!

у меня примерно так получилось
без !DOCTYPE не везде работает.

p.s. всегда проверяйте свой HTML-код через валидатор, чтобы не было лишних вопросов...

исправил, т.к. style="float:left;" будет предпочтительнее нежелательного атрибута align="left"...

Спасибо.
Ну вот, набросал альфу-альфу версию. Посмотрите пожалуйста, что у меня получилось. Вот ссылка.
Чтоб выскочила форма отправки, нужно нажать на WRITE ME! Там только дизайн, сам php скрипт еще не написал, извините за большое разрешение))
Вопросы:
1. Как сделать так, чтоб когда напечатано много текста, то появлялся скролл, а не разъезжался блок?
2. Возможно ли сделать поле ввода 6-угольным, а не прямоугольником?
3. Как поставить переносы строк и т.д.?
P.S. не смотрите чрез оперу, а то там какой-то лаг. Лучше всего через Firefox или Chrome.

вообще то overflow:scroll|auto , но тогда float картинки не работает (пропадает обтекание), так что имхо придется оставить как есть, но кнопку отправки сделать подвижной, чтобы динамически съезжала вниз... мб есть другое решение.
в html все четырехугольное...
чтобы не было фокус-рамки сделайте outline-width:0
не понял.

В моем случае outline-width:0 в опере вообше не работает, (можете посмотреть ссылку выше), блок разъезжается как хочет да еще й в разных браузерах по разному, + нельзя совместить overflow:scroll|auto float:left;, кароче ппц((((( мне б идеально подошел textarea с обтеканием, может можно это сделать с помощью какого-нибудь скрипта? HELP, please

имхо даже и не думайте :) если даже это возможно, то сложно и нецелесообразно...

сделайте нормальную верстку, и кнопку send, чтобы она съезжала с текстом... имхо даже так удобнее, когда весь текст виден. Либо без выпендрежа сделайте обычную прямоугольную форму. Будет негламурненько, но функционально. "...не эстетично, зато дешево, надежно и практично..."(с).

- обидно конечно, но так и сделал. Спасибо.

Хотя вышло совсем даже неплохо, можете посмотреть.
P.S. мне так надоели ограниченные возможности в веб-программировании, что буду начинать писать что-то на пк.))

текст переваливает за кнопку SEND и прочее..

есть технология Flash - там возможности программирования существенно шире :)

Посмотрите, сейчас пожалуйста.

Только не через оперу.

Скролл есть, а вот кнопка по-прежнему висит неестественно, среди набранного текста :)

пожалуйста вышлите скрин(((

ой не надо, это баг в мозилле((((((

я работал в chrome

FireFox 3.5.7 + IE 6

оно везде отображается с багами (даже позиционируется на так) кроме google chrome, я это только-что выяснил(но еще не знаю почему).

Спасибо за скрины!!

если учесть, что им практически никто не пользуется.... :). Придется оптимизировать под популярные браузеры :(

вот сейчас это и делаю((( а google все таки рулит!!

Вчера писал-писал (так, что мне аж сегодня ночью ваш форум снился!!), и вроде что-то вышло. Везде работает кроме Оперы, Опера поднимает абсолютное позиционирование на пару десятков пикселей выше. Посмотрите , плиз.

Скролл не появляется. А так ничё...

я так помню, везде надо перекрыть значения margins и paddings нулевыми.

Я его специально отключил, а то он портит всю картину, очень некрасивый, а если создать свой скролл, то это поддерживают далеко не все браузеры. - не помогло. Как выяснилось Опера все элементы с position: absolute, поподнимала на16 пикселей, поменял из position: absolute , на position: relative, и проблема решилась. Теперь у меня гипер-кроссбраузерная форма отправки)))) Намучался же я с этим Internet explorer 6, я его внаглую обманывал, над каждым текстовым полем, протяливал прозрачный gif, с курсором текста и при клике курсор вставал в форму, бо explorer 6, глючит при параметре background-color: transparent. Может кому-то пригодится. Всем спасибо!
P.S. сажусь за php