Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

0

Поиск

Автор suharixk, 14 янв. 2012 08:38

Авторизуйтесь для ответа в теме

Сообщений в теме: 4

#1 suharixk

Продвинутый пользователь

Пользователи
52 сообщений

Отправлено 14 Январь 2012 - 08:38

Подскажите пожалуйста куда вставить вот этот код:
1)

<!DOCTYPE html>
<html>
<head>
	<title>Поисковая форма с использованием CSS3 | Материалы сайта RUSELLER.COM</title>
	<meta charset="utf-8">
	<style>
	body {
		 background: #000000 url(header.jpg) no-repeat center top;
			
		font: 12px 'Lucida sans', Arial, Helvetica;
		color: #333;
		text-align: center;
	}
	
	a {
		color: #2A679F;
	}
	
	/*-------------------------------------*/
	
	.form-wrapper {
		width: 450px;
		padding: 8px;
		margin: 100px auto;
		overflow: hidden;
		border-width: 1px;
		border-style: solid;
		border-color: #dedede #bababa #aaa #bababa;
		-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
		-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
		box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;	
		background-color: #f6f6f6;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8)); 
		background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
		background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
		background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
		background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
		background-image: linear-gradient(top, #f6f6f6, #eae8e8);
	}
	
	.form-wrapper #search {
		width: 330px;
		height: 20px;
		padding: 10px 5px;
		float: left;	
		font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
		border: 1px solid #ccc;
		-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
		-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
		box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;	  
	}
	
	.form-wrapper #search:focus {
		outline: 0; 
		border-color: #aaa;
		-moz-box-shadow: 0 1px 1px #bbb inset;
		-webkit-box-shadow: 0 1px 1px #bbb inset;
		box-shadow: 0 1px 1px #bbb inset;  
	}
	
	.form-wrapper #search::-webkit-input-placeholder {
	   color: #999;
	   font-weight: normal;
	}
	
	.form-wrapper #search:-moz-placeholder {
		color: #999;
		font-weight: normal;
	}
	
	.form-wrapper #search:-ms-input-placeholder {
		color: #999;
		font-weight: normal;
	}	
	
	.form-wrapper #submit {
		float: right;	
		border: 1px solid #00748f;
		height: 42px;
		width: 100px;
		padding: 0;
		cursor: pointer;
		font: bold 15px Arial, Helvetica;
		color: #fafafa;
		text-transform: uppercase;	
		background-color: #0483a0;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
		background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
		background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
		background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
		background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
		background-image: linear-gradient(top, #31b2c3, #0483a0);
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;	  
		text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
		-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
		-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
	}
	  
	.form-wrapper #submit:hover,
	.form-wrapper #submit:focus {		
		background-color: #31b2c3;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
		background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
		background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
		background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
		background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
		background-image: linear-gradient(top, #0483a0, #31b2c3);
	}	
	  
	.form-wrapper #submit:active {
		outline: 0;	
		-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
		-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;	
	}
	  
	.form-wrapper #submit::-moz-focus-inner {
		border: 0;
	}
	</style>
</head>

<body>
<br><br><br><br>
<form class="form-wrapper">
	<input type="text" id="search" placeholder="Что будем искать.." required>
	<input type="submit" value="искать" id="submit">
</form>


</body>
</html>

понятно что в коде Html , но нужно чтобы он стал на место старого поиска.

и где в css разместить вот это:

.form-wrapper {
2			width: 450px;
3			padding: 8px;
4			margin: 100px auto;
5			overflow: hidden;
6			border-width: 1px;
7			border-style: solid;
8			border-color: #dedede #bababa #aaa #bababa;
9			-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
10			-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
11			box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
12			-moz-border-radius: 10px;
13			-webkit-border-radius: 10px;
14			border-radius: 10px;
15			background-color: #f6f6f6;
16			background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
17			background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
18			background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
19			background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
20			background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
21			background-image: linear-gradient(top, #f6f6f6, #eae8e8);
22	}
23	 
24	.form-wrapper #search {
25			width: 330px;
26			height: 20px;
27			padding: 10px 5px;
28			float: left;
29			font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
30			border: 1px solid #ccc;
31			-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
32			-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
33			box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
34			-moz-border-radius: 3px;
35			-webkit-border-radius: 3px;
36			border-radius: 3px;
37	}
38	 
39	.form-wrapper #search:focus {
40			outline: 0;
41			border-color: #aaa;
42			-moz-box-shadow: 0 1px 1px #bbb inset;
43			-webkit-box-shadow: 0 1px 1px #bbb inset;
44			box-shadow: 0 1px 1px #bbb inset;
45	}
46	 
47	.form-wrapper #search::-webkit-input-placeholder {
48	   color: #999;
49	   font-weight: normal;
50	}
51	 
52	.form-wrapper #search:-moz-placeholder {
53			color: #999;
54			font-weight: normal;
55	}
56	 
57	.form-wrapper #search:-ms-input-placeholder {
58			color: #999;
59			font-weight: normal;
60	}
61	 
62	.form-wrapper #submit {
63			float: right;
64			border: 1px solid #00748f;
65			height: 42px;
66			width: 100px;
67			padding: 0;
68			cursor: pointer;
69			font: bold 15px Arial, Helvetica;
70			color: #fafafa;
71			text-transform: uppercase;
72			background-color: #0483a0;
73			background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
74			background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
75			background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
76			background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
77			background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
78			background-image: linear-gradient(top, #31b2c3, #0483a0);
79			-moz-border-radius: 3px;
80			-webkit-border-radius: 3px;
81			border-radius: 3px;
82			text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
83			-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
84			-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
85			box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
86	}
87	 
88	.form-wrapper #submit:hover,
89	.form-wrapper #submit:focus {
90			background-color: #31b2c3;
91			background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
92			background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
93			background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
94			background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
95			background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
96			background-image: linear-gradient(top, #0483a0, #31b2c3);
97	}
98	 
99	.form-wrapper #submit:active {
100			outline: 0;
101			-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
102			-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
103			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
104	}
105	 
106	.form-wrapper #submit::-moz-focus-inner {
107			border: 0;
108	}

Но так чтобы соответствовало стилистике сайта

Наверх

#2 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 14 Январь 2012 - 17:53

Все стили подобие этому

.form-wrapper #submit:active {
		outline: 0;	
		-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
		-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;	
	}

вы можете разместить в файле стилей main.css разделе редактора тем. Например в самом конце файла. А весь оставшийся HTML код в шаблоне "HTML" за исключением строк

<!DOCTYPE html>
<html>
<head>
	<title>Поисковая форма с использованием CSS3 | Материалы сайта RUSELLER.COM</title>
		<meta charset="utf-8">
	<style>

 </style>
</head>

<body>

</body>
</html>

так как это общая разметка и она уже присутствует в шаблоне. В общем остается только одна форма

<form class="form-wrapper">
		<input type="text" id="search" placeholder="Что будем искать.." required>
		<input type="submit" value="искать" id="submit">
</form>

По умолчанию форма в шаблоне выглядит так

<form action="http://{NET_DOMAIN}/search" method="post">
  				<p>
  					<label for="keywords">Поиск</label>
  					<input type="text" maxlength="100" id="keywords" name="q" value="{SEARCH_QUERY}" />
  					<input type="image" value="Search" title="search" alt="search" src="{ASSETS_IMAGES_PATH}search_button.gif" id="submit" name="submit" />
  			  </p>
				</form>

Если просто применить стили не меняя разметки - то будет так

<form action="http://{NET_DOMAIN}/search" method="post" class="form-wrapper">
  				<p>
  					<label for="keywords">Поиск</label>
  					<input type="text" maxlength="100" id="search" name="q" value="{SEARCH_QUERY}" />
  					<input type="image" id="submit"  value="Search" title="search" alt="search" src="{ASSETS_IMAGES_PATH}search_button.gif" id="submit" name="submit" />
  			  </p>
				</form>

Наверх

#3 suharixk

Продвинутый пользователь

Пользователи
52 сообщений

Отправлено 14 Январь 2012 - 21:51

так что то получилось, а какие строки будут отвечать за размер? и за перемещение

Наверх

#4 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 16 Январь 2012 - 15:47

Не совсем понятен ваш вопрос. За размер чего? блока или поля для ввода?. Пожалуйста, опишите ваш вопрос более детально, а так же сообщите ваш адрес магазина для наглядности.

Наверх

#5 suharixk

Продвинутый пользователь

Пользователи
52 сообщений

Отправлено 16 Январь 2012 - 16:19

Vaccina (16 Январь 2012 - 15:47) писал:

Не совсем понятен ваш вопрос. За размер чего? блока или поля для ввода?. Пожалуйста, опишите ваш вопрос более детально, а так же сообщите ваш адрес магазина для наглядности.

сам разобрался )) спасибо