Форум

ansi_str · #1 (**permalink**) 16.08.2012, 07:38

Здравствуйте, нужно реализовать панельку поиска.
Текстбокс + кнопка.

Делаю так:

<div style="position: relative; top: 10px; right: 400px;">
<asp:TextBox ID="FindTextBox" CssClass="findTextBox" runat="server" />
<asp:Button ID="FindButton" CssClass="findButton" OnClick="FindButton_Click" runat="server" />
</div>

.findTextBox
{
    width: 155px;
    height: 19px;
    border: 0px;
    -moz-border-radius: 100px 0px 0px 100px;
    -webkit-border-radius: 100px 0px 0px 100px;
    border-radius: 100px 0px 0px 100px;
    -khtml-border-radius: 100px 0px 0px 100px;
    behavior: url(../Hack/PIE.htc);
    padding-left: 9px;
    background: url('/images/searchTextBox.png') repeat-y right;
    display: inline-block;
    position: relative;
}

.findButton
{
    background-image: url('/images/serchbutton.png');
    width: 25px;
    height: 22px;
    border: 0px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    background-position: center top;
    display: inline-block;
    cursor: hand;
    right: 5px;
}

Но есть большие проблемы с вёрсткой текстбокс + кнопка под разные браузеры. То по вертикали, то по горизонтали кнопка гуляет.

Подскажите советом, как можно решить эту пробему?

ksa · #2 (**permalink**) 16.08.2012, 09:18

Сообщение от ansi_str

как можно решить эту пробему?

Начать с нормального html примера...

ansi_str · #3 (**permalink**) 16.08.2012, 09:19

Что для вас означает нормальный пример?

ksa · #4 (**permalink**) 16.08.2012, 09:20

Сообщение от ansi_str

Что для вас означает нормальный пример?

Это значит:
- скопировал
- вставил в файл
- запустил его в браузере
и все увидел

ksa · #5 (**permalink**) 16.08.2012, 09:23

Антипример.

Типа твоего...

Помогите мне сверстать вот эту небольшую страничку... У меня там что-то съезжает (на самом деле нет

)

Class wrk.ZEN.Find Extends %ZEN.Component.page
{

/// Имя приложения, которому принадлежит эта страница.
Parameter APPLICATION;

/// Отображаемое имя для нового приложения.
Parameter PAGENAME;

/// Домен, используемый для локализации.
Parameter DOMAIN;

/// This Style block contains page-specific CSS style definitions.
XData Style
{
<style type="text/css">
/* default styles */
.b {
	background-color:#DCDCDC;
}
</style>
}

/// This XML block defines the contents of this page.
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page enclosingClass="b" xmlns="http://www.intersystems.com/zen" title="">
<html>
	<h3>Полнотекстовый поиск по выполненным работам</h3>
</html>
<hgroup >
	<text size="100" id="find" />
	<button caption="Найти" onclick='zenPage.Find(); zenPage.Find()' />
</hgroup>
<spacer height="10" />
<tableNavigatorBar tablePaneId="table" />
<tablePane
	valueColumn="ID"
	id="table"
	sql=""
	rowSelect="true"
	pageSize="25" 
	useSnapshot="true"
	useKeys="true"
	ondblclick='zenPage.Select(zenThis.getValue("ID"))'
>
<column colName="ID" hidden="true" />
<column colName="job" header="Работа" width="30%" />
<column colName="who" header="Исполнитель" width="10%" />
<column colName="vers" header="Версия" width="5%" />
<column colName="txt" header="Описание" />
</tablePane>
</page>
}

Method Select(Id) [ Language = javascript ]
{
	top.location= 'wrk.ZEN.StageEdit.cls?id='+Id
}

Method Find() As %Status [ ZenMethod ]
{
	set text= ..%GetComponentById("find")
	set text= text.value
	quit:text="" $$$OK
	set str= ""
	for i=1:1:$L(text," ") set str=str_"'"_$P(text," ",i)_"'"_","
	set $E(str,$L(str),$L(str))=""
	set sql="select ID,Job->Name as job,Member->Name as who, vers->Name as vers, Text as txt from wrk.Stage where Text %CONTAINSTERM ("_str_")"
	set table= ..%GetComponentById("table")
	set table.sql= sql
	&js<zenPage.Refresh()>
	quit $$$OK
}

Method Refresh() [ Language = javascript ]
{
	this.getComponentById("table").executeQuery()
}

}

Deff · #6 (**permalink**) 16.08.2012, 09:26

<!DOCTYPE>
<head>
<title>Активные темы</title>
<style type="text/css">
#ServSearch {
 position: relative;
 z-index:1000;
 height:32px;
 top: 10px;
 left:50%;
 margin-left:300px;
 border:red 1px solid;
 width:300px;

}
.findTextBox
{
    width: 155px;
    height: 19px;
    border: 0px;
    -moz-border-radius: 100px 0px 0px 100px;
    -webkit-border-radius: 100px 0px 0px 100px;
    border-radius: 100px 0px 0px 100px;
    -khtml-border-radius: 100px 0px 0px 100px;
    behavior: url(../Hack/PIE.htc);
    padding-left: 9px;
    background: url('/images/searchTextBox.png') repeat-y right;
    display: inline-block;
}

.findButton
{
    background-image: url('/images/serchbutton.png');
    width: 25px;
    height: 22px;
    border: 0px;
    cursor: pointer;
    overflow: hidden;
    background-position: center top;
    display: inline-block;
    cursor: hand;
    right: 5px;
}
</style>
</head>
<body style="width:100%;">





<div id=ServSearch style="">
<asp:TextBox ID="FindTextBox" CssClass="findTextBox" runat="server" />
<asp:Button ID="FindButton" CssClass="findButton" OnClick="FindButton_Click" runat="server" />
</div>




</body>
</html>

ansi_str · #7 (**permalink**) 16.08.2012, 09:28

Сейчас покажу ка ОНО работает

ansi_str · #8 (**permalink**) 16.08.2012, 09:42

ksa, Не разобрался, не нужно критиковать

Deff, не помогло, спасибо всё равно

ksa · #9 (**permalink**) 16.08.2012, 09:47

Сообщение от ansi_str

Не разобрался, не нужно критиковать

Панятна!

ansi_str · #10 (**permalink**) 16.08.2012, 10:16

<htmL>
<head>
<style type="text/css">
.findButton
{
    background-image: url('/images/serchbutton.png');
    width: 25px;
    height: 22px;
    border: 0px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    background-position: center top;
    display: inline-block;
    cursor: hand;
    right: 5px;
}

.findTextBox
{
    width: 155px;
    height: 19px;
    border: 0px;
    -moz-border-radius: 100px 0px 0px 100px;
    -webkit-border-radius: 100px 0px 0px 100px;
    border-radius: 100px 0px 0px 100px;
    -khtml-border-radius: 100px 0px 0px 100px;
    behavior: url(../Hack/PIE.htc);
    padding-left: 9px;
    background: url('/images/searchTextBox.png') repeat-y right;
    display: inline-block;
    position: relative;
}

#header_over
{
    margin: 0 auto;
    height: 118px;
    width: 980px;
}

</style>
</head>
<body>
	<div id="header_over">
		<div style="position: relative; top: 10px; right: 400px;">

			<input type="Text" ID="FindTextBox" CssClass="findTextBox" />
			<input type="SUBMIT" ID="FindButton" CssClass="findButton"  />
		</div>
	</div>
</body>
</html>

Добавил в класс:

vertical-align: middle;

Стало лучше, но в IE 8 и в Опере кнопка чуть выше инпута на несколько пикселей

Форум

Справочник

Discord чат

Курсы javascript