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

[maasja]

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

P.S. обидно что современные веб программирование. не позволяет такого осуществить без всяких выдумок(((

Вложения

[Расширение jpg было запрещено, вложение больше недоступно.]

[Sham]

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

HTML код:

Код: Выделить всё

<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 обтекал рисунок? БОЛЬШОЕ СПАСИБО!!!

[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]

у меня примерно так получилось

HTML код:

Код: Выделить всё

<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-код через

валидатор

, чтобы не было лишних вопросов...

[Sham]

Спасибо.

Ну вот, набросал альфу-альфу версию. Посмотрите пожалуйста, что у меня получилось.

Вот

ссылка.

Чтоб выскочила форма отправки, нужно нажать на WRITE ME! Там только дизайн, сам php скрипт еще не написал, извините за большое разрешение))

Вопросы:

1. Как сделать так, чтоб когда напечатано много текста, то появлялся скролл, а не разъезжался блок?

2. Возможно ли сделать поле ввода 6-угольным, а не прямоугольником?

3. Как поставить переносы строк и т.д.?

P.S. не смотрите чрез оперу, а то там какой-то лаг. Лучше всего через Firefox или Chrome.

[Sham]

Цитата maasja:



1. Как сделать так, чтоб когда напечатано много текста, то появлялся скролл, а не разъезжался блок?

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

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


Цитата maasja:



2. Возможно ли сделать поле ввода 6-угольным, а не прямоугольником?

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

в html все четырехугольное...

чтобы не было фокус-рамки сделайте outline-width:0


Цитата maasja:



3. Как поставить переносы строк и т.д.?

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

не понял.

[Sham]

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

[maasja]

Цитата maasja:



textarea с обтеканием, может можно это сделать с помощью какого-нибудь скрипта?

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

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



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

[maasja]

Цитата Sham:



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

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

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



Хотя вышло совсем даже неплохо, можете

посмотреть

.

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