Форма обратной связи

@prince2011 · Регистрация: 05.07.2011

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

У меня есть вот такая вот форма обратной связи в виде картинки как можно её сверстать ?

@vasvas7775 · 22.07.2011, 22:31

Ну, есть несколько вариантов.
В одном из них Можно использовать эту картинку как основу, а над ней с помощью стилей в нужных местах поместить поля, задав через, css размер отсутствие границы, цвет.

Или сверстать эту таблицу стилями и блоками с нуля.

@prince2011 · 22.07.2011, 23:04 **[ТС]**

Счас попробую 1 вариант !

Добавлено через 18 минут
А как перенести форму на задний план картинки ?

@vasvas7775 · 22.07.2011, 23:05

CSS
1
z-index;;

@prince2011 · 23.07.2011, 17:19 **[ТС]**

Сообщение от vasvas7775

CSS
1
z-index;;

Не получается поместить на задний план форму !

Добавлено через 10 минут
На задний план поместил, но писать нельзя !

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

Добавлено через 16 часов 55 минут
vasvas7775 я подстраивал всё под firefox, но после того как я сделал форму решил проверить через opera и удивился у меня в firefox форма была по середине, а в opera она у меня слева. Мне кажется всё дела в позиции. Вот код html и css :

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<center>
<img src="img/14.png">
<form id="form" method="post" action="mail.php" align="left">
 <input name="name" type="text" id="input" size="30"/>
<br /><br>
 <input name="email" type="text" id="input" size="30" />
 <br /><br>
 <textarea name="mess" rows="3" id="input" cols="23"></textarea>
 <p>
<input type="image" src="img/18.png" id="input" name="bottom">
 </p>
 </form>
</center>

CSS
1
2
3
4
5
#form {
position:relative;
left:1px;
top:-305px;
}

Что не так ?

Добавлено через 46 минут
Выровнял по центру забыл про :

HTML5
1
align="left"

Но не могу подровнять всё с firefox, в opera чуть ниже в firefox выше. Как можно это исправить ?

@vasvas7775 · 23.07.2011, 17:51

Вот посмотри здесь, пишут как прописать отдельные стили для разных браузеров.

@prince2011 · 23.07.2011, 22:31 **[ТС]**

Хорошо.

Добавлено через 27 минут
Не получается ничего я присоединил файл css style_opera.css строчкой :

HTML5
1
<!--[if lte Opera 11.50]><link href="css/style_opera.css" rel="stylesheet" type="text/css" /<![endif]-->

Добавил в этот css :

CSS
1
2
3
4
5
#form {
position:relative;
left:0px;
top:5px;
}

Но изменений нет никаких !

Добавлено через 4 часа 1 минуту
С ie всё пошло нормально не могу сделать с оперой версию проверил всё также вводил я 11.50 у меня такая сейчас .

@vasvas7775 · 24.07.2011, 09:29

Вот это подключает стили для хрома, в 11 опере не работает, в 10 не знаю, 11 вообще мало что поддерживает.
Говорят что для оперы отдельные стили подключают через js щас попробую поискать. или для фирефокс.

HTML5
1
<link rel="stylesheet" href="opera.css" type="opera/css" media="screen" />

Добавлено через 9 минут
Для оперы, стили можно подключить вот так:

Java
1
2
3
4
5
<script type="text/javascript">//проверка для оперы
    var ua=navigator.userAgent.toLowerCase();
    isOpera=(ua.indexOf("opera")!=-1);
    if (isOpera) document.write("<link href='opera.css' rel='stylesheet' type='text/css' /> ");
</script>

Все работает опробовал.

P.S.: Правда говорят валидатор это подключение не любит......

Добавлено через 2 минуты
Вот рак для оперы тоже работает

JavaScript
1
2
3
4
5
<script>
if (window.opera) {
    document.write("<link rel='stylesheet' href='opera.css' />")
}
</script>

@prince2011 · 24.07.2011, 12:02 **[ТС]**

Сообщение от vasvas7775

Вот этот код помог, спасибо.

Добавлено через 22 минуты
Так с ie,opera и firefox разобрался хотелось бы ещё для 1 браузера установить отдельные стили для - Google Chrome. Может подскажите как ?

Добавлено через 48 минут
И ещё бы подключить отдельные стили для Safari .

@vasvas7775 · 24.07.2011, 12:08

Попробуй так, опере последние версии не видет,
Зато хром работает

HTML5
1
<link rel="stylesheet" href="opera.css" type="opera/css" media="screen" />

@prince2011 · 24.07.2011, 12:11 **[ТС]**

Счас попробую

@vasvas7775 · 24.07.2011, 12:14

chrome и safari используют один движок webkit.
Поэтому код подключения стилей для хрома и сафари работает одинаково. Проварил.

@prince2011 · 24.07.2011, 12:23 **[ТС]**

Для Chroma пошло, ещё бы для safari что нибудь )

Добавлено через 20 секунд
Ясно благодарю.

Добавлено через 8 минут
Всё отлично подключилось !

@vasvas7775 · 24.07.2011, 12:28

Хорошо, я рад, значит не зря в инете копался......

@prince2011 · 24.07.2011, 13:13 **[ТС]**

Не зря, но при подключении стиля к сафари и хрому можно выбрать только 1 если ставишь на хром тогда в сафари криво, а если в сафари тогда в хроме криво, т.к. type одинаковый !

@vasvas7775 · 24.07.2011, 13:19

Не знаю, я обычно если пишу код, стараюсь добиться его кроссбраузерности, обычно работает во всех браузерах кроме IE, но для нее пишу отдельные стили, и не весь код полностью, а поправку к коду, исключительно для IE

@prince2011 · 24.07.2011, 13:26 **[ТС]**

Ну дак да, ну я так посмотрел и 70 % людей в мире используют internet explorer !

@vasvas7775 · 24.07.2011, 13:44

Может быть всякое, Обычно им пользуется те кто только купил компы, ничего в них не понимают, или не хотят понимать. Ведь он стоит по умолчанию.....

Писать весь сайт под IE не стоит, Пиши кроссбраузерность под хром оперу сафари, для IE подправь отдельными стилями, и оля-ля твой сайт, во всех браузерах совершенно одинаково выглядит!!!!

@prince2011 · 24.07.2011, 13:55 **[ТС]**

Дак я так и сделал.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера 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. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@prince2011 97 / 36 / 6 Регистрация: 05.07.2011 Сообщений: 382

	Форма обратной связи 22.07.2011, 22:25. Показов 5994. Ответов 18 Метки нет (Все метки) У меня есть вот такая вот форма обратной связи в виде картинки как можно её сверстать ? Миниатюры 0

@vasvas7775 Обитатель 539 / 317 / 42 Регистрация: 24.12.2010 Сообщений: 795
	22.07.2011, 22:31
	Ну, есть несколько вариантов. В одном из них Можно использовать эту картинку как основу, а над ней с помощью стилей в нужных местах поместить поля, задав через, css размер отсутствие границы, цвет. Или сверстать эту таблицу стилями и блоками с нуля. 0

@prince2011 97 / 36 / 6 Регистрация: 05.07.2011 Сообщений: 382
	22.07.2011, 23:04 [ТС]
	Счас попробую 1 вариант ! Добавлено через 18 минут А как перенести форму на задний план картинки ? 0

@vasvas7775 Обитатель 539 / 317 / 42 Регистрация: 24.12.2010 Сообщений: 795
	23.07.2011, 17:51
	Вот посмотри здесь, пишут как прописать отдельные стили для разных браузеров. 0

@prince2011 97 / 36 / 6 Регистрация: 05.07.2011 Сообщений: 382
	24.07.2011, 12:11 [ТС]
	Счас попробую 0

@vasvas7775 Обитатель 539 / 317 / 42 Регистрация: 24.12.2010 Сообщений: 795
	24.07.2011, 12:14
	chrome и safari используют один движок webkit. Поэтому код подключения стилей для хрома и сафари работает одинаково. Проварил. 0

@prince2011 97 / 36 / 6 Регистрация: 05.07.2011 Сообщений: 382
	24.07.2011, 12:23 [ТС]
	Для Chroma пошло, ещё бы для safari что нибудь ) Добавлено через 20 секунд Ясно благодарю. Добавлено через 8 минут Всё отлично подключилось ! 0

@vasvas7775 Обитатель 539 / 317 / 42 Регистрация: 24.12.2010 Сообщений: 795
	24.07.2011, 12:28
	Хорошо, я рад, значит не зря в инете копался...... 0

@prince2011 97 / 36 / 6 Регистрация: 05.07.2011 Сообщений: 382
	24.07.2011, 13:13 [ТС]
	Не зря, но при подключении стиля к сафари и хрому можно выбрать только 1 если ставишь на хром тогда в сафари криво, а если в сафари тогда в хроме криво, т.к. type одинаковый ! 0

@vasvas7775 Обитатель 539 / 317 / 42 Регистрация: 24.12.2010 Сообщений: 795
	24.07.2011, 13:19
	Не знаю, я обычно если пишу код, стараюсь добиться его кроссбраузерности, обычно работает во всех браузерах кроме IE, но для нее пишу отдельные стили, и не весь код полностью, а поправку к коду, исключительно для IE 0

@prince2011 97 / 36 / 6 Регистрация: 05.07.2011 Сообщений: 382
	24.07.2011, 13:26 [ТС]
	Ну дак да, ну я так посмотрел и 70 % людей в мире используют internet explorer ! 0

@vasvas7775 Обитатель 539 / 317 / 42 Регистрация: 24.12.2010 Сообщений: 795
	24.07.2011, 13:44
	Может быть всякое, Обычно им пользуется те кто только купил компы, ничего в них не понимают, или не хотят понимать. Ведь он стоит по умолчанию..... Писать весь сайт под IE не стоит, Пиши кроссбраузерность под хром оперу сафари, для IE подправь отдельными стилями, и оля-ля твой сайт, во всех браузерах совершенно одинаково выглядит!!!! 0

@prince2011 97 / 36 / 6 Регистрация: 05.07.2011 Сообщений: 382
	24.07.2011, 13:55 [ТС]
	Дак я так и сделал. 0