Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Проблема с вёрстокой для плашки поиска. (https://javascript.ru/forum/xhtml-html-css/30791-problema-s-vjorstokojj-dlya-plashki-poiska.html)

ansi_str 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 16.08.2012 09:18

Цитата:

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

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

ansi_str 16.08.2012 09:19

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

ksa 16.08.2012 09:20

Цитата:

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

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

ksa 16.08.2012 09:23

Антипример. :D Типа твоего...

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

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 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 16.08.2012 09:28

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

ansi_str 16.08.2012 09:42

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

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

ksa 16.08.2012 09:47

Цитата:

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

Панятна! :lol:

ansi_str 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 и в Опере кнопка чуть выше инпута на несколько пикселей


Часовой пояс GMT +3, время: 13:47.