Форум

Duda.Ml1986@gmail.com · #1 (**permalink**) 07.04.2014, 12:01

Всем привет.
Есть вот такая верстка:

Прикол в том что при изменении экрана иконка с лупой перемещается в плохом направлении, то есть если расширение более 1000пх то норм, а вот стили адаптиновсти прописаны на диапазон: 768 / 999

и получается что нужно еще будет специально прописывать стили этого инпута для расширения например 785, когда он сьехал.

Короче говоря если блок 100%, а картинка 37 пх по высоте и ширине 36 пх как ее прикрутить раз и навсегда?

Для примера предлагаю посмотреть мои потуги в "адаптивном бою" http://duvanov.url.ph/

Код:

.col span_1_of_4{
width: 100%
}
#search {
    width: 100%;
    height: 37px;
    position: relative;
    padding: 0;
    margin: 0;
    margin-bottom: 10px;
}
#search input[type=text] {
    border: 0;
    border: none;
    border: 1px solid #87c602;
    -webkit-border-radius: 7px 0 0 7px;
    -moz-border-radius: 7px 0 0 7px;
    -ms-border-radius: 7px 0 0 7px;
    -o-border-radius: 7px 0 0 7px;
    border-radius: 7px 0 0 7px;
    padding: 9px;
    margin: 0;
    height: 16px;
    font: bold 16px calibri;
    color: #a3a4a5;
}
#search input[type=submit] {
    background: none;
    border: 0;
    border: none;
    width: 36px;
    height: 37px;
}
#search_btn {
    width: 36px;
    height: 37px;
    background: url(../img/search/search_btn.png);
    background-repeat: no-repeat;
    vertical-align: middle;
    position: absolute;
    right: 5px;
    top: 0;
}

<div class="col span_1_of_4">
                <div id="search">
                    <form method="get" action="mysite.com">
                        <input type="text" name="q" value="поиск" onfocus="this.value=''" onblur="if (this.value==''){this.value='поиск'}">
                        <div id="search_btn">
                            <input type="submit" value="&nbsp;">
                        </div>
                    </form>
                </div>

ksa · #2 (**permalink**) 07.04.2014, 13:49

Duda.Ml1986@gmail.com, именно "поиск" к адаптивности никаким боком...
Все можно решить как-то так

<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
	margin: 0;
	padding: 0;
}
#content {
	width: 70%;
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
}
#find_box {
	position: relative;
	width: 100%;
	height: 20px;
	border: 1px solid green;
}
#find_data {
	height: 100%;
	margin-right: 20px;
}
#find {
	width: 100%;
	height: 100%;
	border: none;
}
#find_btn {
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	height: 100%;
	background-color: green;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id='content'>
	<div id='find_box'>
		<div id='find_data'>
			<input  id='find' type='text' />
		</div>
		<div id='find_btn'></div>
	</div>
</div>
</body>
</html>

Duda.Ml1986@gmail.com · #3 (**permalink**) 07.04.2014, 14:54

Благодарствую за ответ) Оказывается ошибка была в задании ширины инпута, исправил и все сразу окейно стало.

Форум

Справочник

Discord чат

Курсы javascript