Темная Форма входа

@GimaS · Регистрация: 11.05.2011

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

Помогите, мне хотелось бы увидеть такую форму входа как на скриншоте, но так как я не понимаю css, то не могу сделать темные поля ввода. Как можно сделать точно такие же поля?

мой сайт

http://g-c-k.net.ru/

На моем сайте форма входа справа сделана.

Вот код самой формы:

Code
1
2
3
4
5
6
7
8
9
10
11
<?if($PAGE_ID$="login")?><div style="width:180px;"><?endif?>
<table border="0" cellspacing="1" cellpadding="0" width="100%">
<?if($ERROR$)?><td colspan="2" style="color:red;text-align:center;">$ERROR$</td><?endif?>
<tr><td width="20%" nowrap="nowrap">Логин:</td><td><input class="loginField" type="text" name="user" value="" size="20" style="width:100%;" maxlength="50"/></td></tr>
<tr><td>Пароль:</td><td><input class="loginField" type="password" name="password" size="20" style="width:100%" maxlength="15"/>
</td></tr>
</table>
<table border="0" cellspacing="1" cellpadding="0" width="100%">
<tr><td nowrap style='font-size:11px;'><a href="$REMINDER_LINK$">Забыл пароль</a> | <a href="$REGISTER_LINK$">Регистрация</a><?if($PAGE_ID$="login" && $HIDDEN_ALLOWED$)?><br/><input id="hid$PAGE_ID$" type="checkbox" name="hidden" value="1" /><label for="hid$PAGE_ID$">скрытый</label><?endif?></td><td align="right" valign="top"><input class="loginButton" name="sbm" type="image" src="/images/vxod/vxod.png" value="Вход"/></td></tr>
</table>
<?if($PAGE_ID$="login")?></div><?endif?>

@acupation · 11.05.2011, 13:15

HTML5
1
2
3
4
5
  <style type="text/css">
   .loginField{
    background: #000000; /* Цвет фона */
   }
  </style>

@GimaS · 11.05.2011, 13:50 **[ТС]**

Спасибо хоть и на этом, но получается далеко не так(На скрине показано). Мне бы хотелось точно такие же поля как на придедущем скриншоте. Ну или просто похожие

@acupation · 11.05.2011, 14:28

Добавь в css

CSS
1
2
border: none; /* нет бордюра */
  border-color: transparent;

забыл еще

CSS
1
text: #FFFFFF; /* цвет текста */

Добавлено через 35 минут
Попробуй так, должно быть похоже:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">
.loginField {
color: #B9BDBF;
font-size: 14px;
width: 200px;
height: 32px;
line-height: 24px;
padding: 4px 5px 4px 8px;
background: url(/images/search_bg.png) no-repeat;
margin-right: 5px;
border: none;
}
</style>

@GimaS · 11.05.2011, 14:36 **[ТС]**

Можешь поподробней написать, как в css написать твой код? HTML код вставил,но там баги появляются

@acupation · 11.05.2011, 14:37

подожди 5 минут, я щас сделаю как на картинке)

@GimaS · 11.05.2011, 14:37 **[ТС]**

Ок, жду=)

@acupation · 11.05.2011, 14:42

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
.loginField {
color: #B9BDBF;
font-size: 14px;
height: 26px;
line-height: 24px;
padding: 4px 5px 4px 8px;
background: #202328;
margin-right: 5px;
border: none;
}
</style>

попробуй. Я гляну на сайте.

@GimaS · 11.05.2011, 14:45 **[ТС]**

О спс, так как я хотел.

Добавлено через 1 минуту
Правда, поля немного за дизайн залазят. Но я думаю отступом их поправить можно

@acupation · 11.05.2011, 14:46

у тебя немного вылезают края инпута за рамку. Нужно немного уменьшить. Добавь в этот код

HTML5
1
width: 150px;

где 150px - это ширина, изменяй ее до тех пор пока не понравица)
так же:
font-size: 14px - размер шрифта.
height: 26px - высота инпута.

Можешь сам подрегулировать.

@GimaS · 11.05.2011, 14:54 **[ТС]**

Спасибо за помощь!

@RosenR@t · 11.05.2011, 15:12

GimaS, а как вы меню такое верхнее сделали не расскажете?! Или это cms-ка какая то?!

@GimaS · 11.05.2011, 15:27 **[ТС]**

Это не мой шаблон, его рипали с сайта

сайт

http://themeforest.net/item/chromegt-business-portfolio-html-theme/full_screen_preview/147740

Автор рипа тут

сайт

http://mvcreative.ru/

@Alorian · 11.05.2011, 16:00

Сообщение от RosenR@t

GimaS, а как вы меню такое верхнее сделали не расскажете?! Или это cms-ка какая то?!

Если очень интересно, то можно исходный код посмотреть.
Глянул несколько минут, в целом технология понятна:
1. После загрузки страницы создается еще один <li> у меню.
2. Отменяется синий фон у активного пункта меню
3. Синий фон присваивается добавленному <li>
4. Добавленный <li> перемещается поверх активного пункта меню, ширина его становится такая же как у активного пункта меню.
5. На событие "наведение мыши" добавленный ли перемещается поверх того пункта меню на который навели мышь.

И т.д. Детально не вникал, так что алгоритм может отличаться.
Подробнее можно посмотреть в файле /js/js.js начало на строке 196
Написано с помощью jquery

15.10.2011, 09:49

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

Новые блоги и статьи Все статьи Все блоги /
Запрет удаления строк ТЧ документа при определенном условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .

@GimaS 1 / 1 / 0 Регистрация: 11.05.2011 Сообщений: 13
	11.05.2011, 13:50 [ТС]
	Спасибо хоть и на этом, но получается далеко не так(На скрине показано). Мне бы хотелось точно такие же поля как на придедущем скриншоте. Ну или просто похожие Изображения 0

@GimaS 1 / 1 / 0 Регистрация: 11.05.2011 Сообщений: 13
	11.05.2011, 14:36 [ТС]
	Можешь поподробней написать, как в css написать твой код? HTML код вставил,но там баги появляются 0

@acupation 67 / 67 / 6 Регистрация: 26.03.2010 Сообщений: 546
	11.05.2011, 14:37
	подожди 5 минут, я щас сделаю как на картинке) 1

@GimaS 1 / 1 / 0 Регистрация: 11.05.2011 Сообщений: 13
	11.05.2011, 14:37 [ТС]
	Ок, жду=) 0

@GimaS 1 / 1 / 0 Регистрация: 11.05.2011 Сообщений: 13
	11.05.2011, 14:45 [ТС]
	О спс, так как я хотел. Добавлено через 1 минуту Правда, поля немного за дизайн залазят. Но я думаю отступом их поправить можно 0

@GimaS 1 / 1 / 0 Регистрация: 11.05.2011 Сообщений: 13
	11.05.2011, 14:54 [ТС]
	Спасибо за помощь! 0

@RosenR@t 136 / 136 / 7 Регистрация: 07.07.2010 Сообщений: 774
	11.05.2011, 15:12
	GimaS, а как вы меню такое верхнее сделали не расскажете?! Или это cms-ка какая то?! 0

@GimaS 1 / 1 / 0 Регистрация: 11.05.2011 Сообщений: 13
	11.05.2011, 15:27 [ТС]
	Это не мой шаблон, его рипали с сайта сайт http://themeforest.net/item/chromegt-business-portfolio-html-theme/full_screen_preview/147740 Автор рипа тут сайт http://mvcreative.ru/ 0

Resorr
	15.10.2011, 09:49
	привет. вот ты ему делал шаблон, можешь кинуть готовое все, а то чет у меня за поля выходит и все и место ввода ни че не отоброжается !! (( плиииз