Как сверстать форму обратной связи?

@bartila · Регистрация: 06.07.2014

Студворк — интернет-сервис помощи студентам

Доброго времени суток. Подскажите, мне пожалуйста, как создать форму обратной связи, если имеется вот такая картинка?

@bartila · 06.07.2014, 16:08 **[ТС]**

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

@vovandr · 06.07.2014, 16:14

Картинке float: left а остальному блоку с содержимым формы overflow: hidden

@bartila · 06.07.2014, 16:17 **[ТС]**

спасибо, за совет.

@Academik · 07.07.2014, 02:29

bartila, примерно так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
    <div class="order">
        <h2>Доставка цветов</h2>
        <form method="POST" action="">
            <ul>
                <li><input type="text" placeholder="Имя"></li>
                <li><input type="text" placeholder="E-Mail"></li>
                <li><textarea placeholder="Сообщение"></textarea></li>
            </ul>
            <p><input type="submit" value="Заказать"></p>
        </form>
    </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
        .order{background: url('flowers.jpg') 0 0 no-repeat; padding: 50px 0 0 230px;}
        .order h2{font: italic 41px Arial; color: #a90d3c; margin: 0 0 10px 0;}
        .order ul{margin: 0; padding: 0;}
        .order ul li{padding: 5px 0; list-style-type: none;}
 
        .order input, .order textarea{font: 12px Tahoma; border: 1px solid #dcdcdc;}
        .order input[type="text"]{width: 300px; height: 16px; padding: 5px;}
        .order input[type="submit"]{border: 0; background: none; font: italic 32px Times; color: #a90d3c; text-decoration: underline; cursor: pointer;}
        .order input[type="submit"]:hover{text-decoration: none;}
        .order textarea{width: 300px; padding: 5px; resize: none;}
        .order p{width: 300px; margin: 0; text-align: center;}

Название: flowers.jpg
Просмотров: 54

Размер: 44.5 Кб

Посмотреть тут http://jsfiddle.net/VGeHt/

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@bartila 1 / 1 / 0 Регистрация: 06.07.2014 Сообщений: 15

	Как сверстать форму обратной связи? 06.07.2014, 16:01. Показов 1951. Ответов 4 Метки нет (Все метки) Доброго времени суток. Подскажите, мне пожалуйста, как создать форму обратной связи, если имеется вот такая картинка? Миниатюры 0

@bartila 1 / 1 / 0 Регистрация: 06.07.2014 Сообщений: 15
	06.07.2014, 16:08 [ТС]
	эта часть страницы, то есть кусочек, просто я не пойму с чего мне начинать, ведь мне надо сделать так, чтобы картинка как бы обтекала форму. 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	06.07.2014, 16:14
	Картинке float: left а остальному блоку с содержимым формы overflow: hidden 1

@bartila 1 / 1 / 0 Регистрация: 06.07.2014 Сообщений: 15
	06.07.2014, 16:17 [ТС]
	спасибо, за совет. 0