Как сделать форму поля больших размеров? CSS HTML

32

anton000

25 июня 2013, 12:47

2015

Скачал с интернета форму входа на сайт. Всё бы хорошо, но она на сайте отображается точно так же, но текстовые поля, куда нужно вводить логин и пароль, они стали маленькими.

Файл index.php:


<html>
<head>
<title>Система управления контентом</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
body {
    margin: 0;
	padding: 0;
	background: #f4f4f4;
	font: 14px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
</style>
</head>
<body>
<table width=100%>
<tr width=80%><h1><center>Шапка сайта</center></h1></tr>

</table>
<table width=100%>
<tr>
     <td width=20% VALIGN=TOP><h3>Меню:</h3>
	 <br>Фрукты
	 <br>Овощи
	 <br>Салаты
	 <?
include "config.php";
?>
	 </td>
	 <td width=60% VALIGN=TOP><center>Центральный блок</center></td>
	 <td width=20% VALIGN=TOP>
	 	<div class="wrapper">

		<form class="form1" action="index.html">

			<div class="formtitle">Введите данные аккуанта</div>

			<div class="input">
				<div class="inputtext">Логин: </div>
				<div class="inputcontent">

					<input type="text" />

				</div>
			</div>

			<div class="input nobottomborder">
				<div class="inputtext">Пароль: </div>
				<div class="inputcontent">

					<input type="password" />
					<br/><a href="#">Забыли пароль?</a>

				</div>
			</div>

			<div class="buttons">

				<input class="orangebutton" type="submit" value="Войти" />

				<input class="greybutton" type="submit" value="Отмена" />

			</div>
	 </td>
</tr>
</table>

</body>
</html>

Файл style.css:


<style>
body {
margin: 0;
	padding: 0;
	background: #f4f4f4;
	font: 14px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
   h1 {
    background: #000080; /* Цвет фона блока */ 
    color: #ffe; /* Цвет текста */ 
    margin: 0; /* Нулевые отступы вокруг текста */ 
    padding: 10px; /* Поля вокруг текста */ 
   }

.link { text-align: center; clear: both; padding: 20px 0; }
.link a { color: #333333; }

.wrapper {
	width: 447px;
	margin: -6px auto;
}

/* Form 1 style */

.form1 {
	width: 450px;
	float: left;
	background: #fff;
	color: #777;
	-webkit-box-shadow: 0px 0px 8px 2px #d1d1d1;
	-moz-box-shadow: 0px 0px 8px 2px #d1d1d1;
	box-shadow: 0px 0px 8px 2px #d1d1d1; 
	-webkit-border-top-left-radius: 0px;
	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px; 
	overflow: hidden;
}

.formtitle {
	padding: 10px;
	line-height: 16px;
	font-size: 13px;
	text-shadow: -1px -1px #e87c19;
	color: #fff;
	font-weight: bold;
	border-bottom: 1px solid #eb8d19;
	width: 430px;
	background: #ffbd27; /* Old browsers */
	background: -moz-linear-gradient(top, #ffbd27 0%, #ffb119 50%, #ff9d19 51%, #ff9d19 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffbd27), color-stop(50%,#ffb119), color-stop(51%,#ff9d19), color-stop(100%,#ff9d19)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffbd27 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffbd27 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #ffbd27 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbd27', endColorstr='#ff9d19',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #ffbd27 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* W3C */
}

.input {
	width: 410px;
	border-bottom: 1px solid #ddd;
	margin-bottom: 10px;
	margin: 20px;
	overflow: hidden;
}

.inputtext {
	float: left;
	line-height: 18px;
	height: 35px;
	font-size: 14px;
	width: 120px;
}

.inputcontent {
	float: left;
	width: 290px;
	height: 50px;
}

.inputcontent input {
	padding: 5px;
	height: 18px;
	width: 200px;
	line-height: 18px;
	border: 1px solid #c7c7c7;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	color: #777;
}

.inputcontent a {
	color: #0084ff;
	font-size: 12px;
	text-decoration: none;
	line-height: 12px;
}

.nobottomborder {
	border-bottom: 0;
}

.buttons {
	background: #f1f1f1;
	border-top: 1px solid #ddd;
	padding: 15px;
	height: 34px;
}

.greybutton {
	background: #e1e1e1; /* Old browsers */
	background: -moz-linear-gradient(top, #e1e1e1 0%, #bababa 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e1e1e1), color-stop(100%,#bababa)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1e1e1', endColorstr='#bababa',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* W3C */ 
	border: 1px solid #bababa;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px; 
	line-height: 20px;
	font-size: 16px;
	padding: 6px 12px;
	color: #fff;
	text-shadow: -1px -1px #bababa;
	float: right;
	margin-left: 10px;
	cursor: pointer;
}

.greybutton:hover{
	background: #bababa; /* Old browsers */
	background: -moz-linear-gradient(top, #bababa 0%, #e1e1e1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bababa), color-stop(100%,#e1e1e1)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa', endColorstr='#e1e1e1',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* W3C */ 
}

.orangebutton {
	background: #ffc339; /* Old browsers */
	background: -moz-linear-gradient(top, #ffc339 0%, #ff9b19 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc339), color-stop(100%,#ff9b19)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffc339 0%,#ff9b19 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffc339 0%,#ff9b19 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #ffc339 0%,#ff9b19 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc339', endColorstr='#ff9b19',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #ffc339 0%,#ff9b19 100%); /* W3C */
	border: 1px solid #ff9b19;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px; 
	line-height: 20px;
	font-size: 16px;
	padding: 6px 12px;
	color: #fff;
	text-shadow: -1px -1px #ff9b19;
	float: right;
	margin-left: 10px;
	cursor: pointer;
}

.orangebutton:hover{
	background: #ff9b19; /* Old browsers */
	background: -moz-linear-gradient(top, #ff9b19 0%, #ffc339 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9b19), color-stop(100%,#ffc339)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9b19', endColorstr='#ffc339',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* W3C */
}

На примере - ДО

ПОСЛЕ:

Сразу говорю, код сайта я выложил полностью весь. Так как не работает именно в части сайта. Если делать это всё отдельно друг от друга, то есть сайт отдельно от формы, то всё будет ОК.

Скажите пожалуйста, как можно сделать такие же поля, как на картинке - "ДО".

IT

4

If_then_else

29 июня 2013, 15:09

#1

Здесь выглядит так, как ДО. Подозреваю, что у Вас перекрывается чем-то padding:5px; для .inputcontent input. Вот как выглядит, если его убрать http://jsfiddle.net/, то есть Ваше ПОСЛЕ. Можно указать селектор конкретно для этой формы. Например, присвоить ей ID


HTML:
<form class="form1" id="form-login" action="index.html">...
CSS:
#form-login .inputcontent input{padding:5px;...}

DLE передача данные методом адаптивный input с внутренним Помогите с версткой WP

68

Moneymaker8

30 июня 2013, 17:07

#2

anton000:
Скажите пожалуйста, как можно сделать такие же поля, как на картинке - "ДО".

1) Выучить HTML и CSS и сделать форму самому, а не брать у других :)

2) Заплатить денежку кому-то, чтобы сделали за вас :)

3) Первой строкой прописать <!DOCTYPE html>, который видимо вы забыли скопировать.

1

Добавить меню в main.tpl Как правильно прописать DOCTYPE Как добавить третью колонку

M2

341

mark2011

30 июня 2013, 17:12

#3

anton000:
<br>Салаты <? include "config.php"; ?> </td>

Религия не позволяет включить данный файл в начале, а не разрывать таблицу непонятно чем?

1

------------------- Крутые VPS и дедики. Качество по разумной цене ( http://cp.inferno.name/view.php?product=1212&gid=1 ) VPS25OFF - скидка 25% на первый платеж по ссылке выше

32

anton000

30 июня 2013, 18:11

#4

mark2011:
Религия не позволяет включить данный файл в начале, а не разрывать таблицу непонятно чем?

Ага)))

А если серьёзно, то содержимое этого файла должно находиться между тегами <td>!

53

domen4you

30 июня 2013, 20:31

#5

Там какой-то левый шрифт стоит

Helvetica Neue

если у Вас его нет на компе, то соответственно будет отображаться по-другому

M2

341

mark2011

1 июля 2013, 01:46

#6

anton000:
А если серьёзно, то содержимое этого файла должно находиться между тегами <td>!

Тогда файл включают в самом начале, а там, где должно находиться содержимое, делают


echo $содержимое;

Или у вас в php файле хранится html-код?

32

anton000

1 июля 2013, 08:07

#7

mark2011:
Тогда файл включают в самом начале, а там, где должно находиться содержимое, делают


echo $содержимое;

Или у вас в php файле хранится html-код?

Да, уже в самом php настроен вывод.

Тренды маркетинга в 2024 году: мобильные продажи, углубленная аналитика и ИИ

VK приобрела 70% в структуре компании-разработчика red_mad_robot