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

[maasja]

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

[Sham]

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

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

[maasja]

Отлично!! Мне подходит такой вариант. Ну допустим это должно быть в таблице:
<td width="250px" height=150px">
<img src="message.png" width="100px" height="30px">
<div id="text" contenteditable="true" style="width:250px; height:150px;">введите тут текст</div>
</td>, что мне нужно дописать, чтоб блок div обтекал рисунок? БОЛЬШОЕ СПАСИБО!!!

[Sham]

у меня примерно так получилось
<div>
<img src="message.png" width="100" height="100" style="float:left;" />
<div id="text" contenteditable="true" style="margin:0; padding:0; width:300px; border:1px dotted #ff1493; min-height:200px;">
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
</div>
</div>
без !DOCTYPE не везде работает.

p.s. всегда проверяйте свой HTML-код через валидатор (http://validator.w3.org/), чтобы не было лишних вопросов...

[Sham]

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

[maasja]

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

[Sham]

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

[maasja]

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

[Sham]

textarea с обтеканием, может можно это сделать с помощью какого-нибудь скрипта? »
имхо даже и не думайте :) если даже это возможно, то сложно и нецелесообразно...

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

[maasja]

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

Хотя вышло совсем даже неплохо, можете посмотреть (http://leon-photo.net/proba1/index.html).
P.S. мне так надоели ограниченные возможности в веб-программировании, что буду начинать писать что-то на пк.))

[dmitryst]

Хотя вышло совсем даже неплохо »
текст переваливает за кнопку SEND и прочее..

мне так надоели ограниченные возможности в веб-программировании, »
есть технология Flash - там возможности программирования существенно шире :)

[maasja]

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

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

[dmitryst]

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

[maasja]

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

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

я работал в chrome

[dmitryst]

FireFox 3.5.7 + IE 6
http://keep4u.ru/imgs/s/2010/01/14/c4/c40d2106cc0c8988f664bd37b8371c7d.jpg (http://keep4u.ru/full/c40d2106cc0c8988f664bd37b8371c7d.html)
http://keep4u.ru/imgs/s/2010/01/14/b3/b34837f848b3dabda56689f935f8a055.jpg (http://keep4u.ru/full/b34837f848b3dabda56689f935f8a055.html)

[maasja]

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

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

[dmitryst]

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

[maasja]

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

[maasja]

Вчера писал-писал (так, что мне аж сегодня ночью ваш форум снился!!), и вроде что-то вышло. Везде работает кроме Оперы, Опера поднимает абсолютное позиционирование на пару десятков пикселей выше. Посмотрите (http://leon-photo.net/proba1/index.html#2) , плиз.

[dmitryst]

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

Опера поднимает абсолютное позиционирование на пару десятков пикселей выше »
я так помню, везде надо перекрыть значения margins и paddings нулевыми.