Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Форма с закругленными углами 
:(
    Опции темы
Vex
Дата 11.7.2011, 14:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


кацапосрачмученiкъ
****


Профиль
Группа: Экс. модератор
Сообщений: 3103
Регистрация: 28.3.2002
Где: strawberry fields

Репутация: нет
Всего: 88
Как можно закруглить углы в форме?

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<style>
#contact-area {
  width: 600px;
  margin-top: 25px;
}
#contact-area input, #contact-area textarea {
  padding:   5px;
  width: 400px;
  font-family: Helvetica, sans-serif;
  font-size: 1.4em;
  margin: 0px 0px 10px 0px;
  border: 2px solid   #ccc;
}
#contact-area textarea {
  height: 90px;
}
#contact-area   textarea:focus, #contact-area input:focus {
  border: 2px solid   #900;
}
#contact-area input.submit-button {
  width: 100px;
  float:   right;
}
label {
  float: left;
  text-align: right;
  margin-right: 15px;
  width: 100px;
  padding-top: 5px;
  font-size: 1.4em;
}
</style>

</head>
<body>

<div id="contact-area">
  <form method="post"   action="contactengine.php">
  <label for="Name" id="Name"   onfocus="this.value=''; this.onfocus=null;">Имя:</label>
  <input   type="text" name="Name" />
  <label for="City"   id="City">Город:</label>
  <input type="text" name="City"   />
  <label for="Email" id="Email">Email:</label>
  <input   type="text" name="Email" />
  <label for="Message"   id="Message">Сообщение:</label><br />
  <textarea   name="Message" rows="20" cols="20" onfocus="this.value='';   this.onfocus=null;">Введите свое имя</textarea>
  <input   type="submit" name="submit" value="Отправить" class="submit-button"   />
  </form>
</div>



</body>
</hrml>





Без четырех рисунков по бокам не обойтись? (


--------------------
Слава Україні.
PM   Вверх
Guedda
Дата 11.7.2011, 15:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Подрывник
****


Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

Репутация: 3
Всего: 78
Ну если под современные браузеры (использующие css3.0), то так:
Код

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Такая конструкция работает в IE 9.0+, всех версиях хрома, сафари, FF 3.6, 4, 5+

Добавлено через 13 секунд
Иначе только с картинками.


--------------------
Ll 2
PM MAIL WWW ICQ Skype GTalk   Вверх
SelenIT
Дата 11.7.2011, 15:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401
Все браузеры, кроме IE8-, понимают border-radius. Для IE8- есть "костыли" типа PIE.htc или DD_roundies.js...


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
Guedda
Дата 11.7.2011, 15:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Подрывник
****


Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

Репутация: 3
Всего: 78
Цитата(SelenIT @  11.7.2011,  16:44 Найти цитируемый пост)
Все браузеры, кроме IE8-, понимают border-radius.

FF 3.6 это свойство не понимает. Для него работает -moz-border-radius


--------------------
Ll 2
PM MAIL WWW ICQ Skype GTalk   Вверх
Vex
Дата 11.7.2011, 17:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


кацапосрачмученiкъ
****


Профиль
Группа: Экс. модератор
Сообщений: 3103
Регистрация: 28.3.2002
Где: strawberry fields

Репутация: нет
Всего: 88
Guedda, Спасибо! )


--------------------
Слава Україні.
PM   Вверх
Evghenusi
Дата 12.7.2011, 16:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


майский жук
**


Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15
Цитата(SelenIT @  11.7.2011,  15:44 Найти цитируемый пост)
Для IE8- есть "костыли" типа PIE.htc

IE6 тоже работает с этим костылём
PM WWW   Вверх
SelenIT
Дата 13.7.2011, 04:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401
Цитата(Evghenusi @  12.7.2011,  16:08 Найти цитируемый пост)
IE6 тоже работает с этим костылём

Ну да (минусик после версии традиционно означает "и ниже"). Хотя сейчас сильно заморачиваться украшательствами под 6-й, имхо, уже ни к чему (если сайт не для Китая/Южной Кореи, где IE6 почему-то никак не хочет пока сдавать позиции).

Добавлено через 5 минут и 53 секунды
Цитата(Guedda @  11.7.2011,  15:46 Найти цитируемый пост)
FF 3.6 это свойство не понимает

Согласен. Почему-то мне казалось, что с выходом 5-й версии вся третья ветка утратила актуальность, но глянул статистику - увы, еще не совсем...


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0478 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.