Положение поля относительно картинки

Invisible · 29.01.2010, 09:13

Имею некий код:

Код:

&nbsp;&nbsp;
<form action="" method="GET" onsubmit="return submitTags(this.tag.value);">
<img src="{$DIR_STATIC_SKIN}/images/tagcloud.png" border="0" style="margin-left: 10px;">&nbsp;
<input type="text" name="tag" value="{$sTag|escape:'html'}" class="tags-input" >
</form>

Отвечает он за вывод филда (поля) под ввод тегов к сообщению.
Как видно по коду перед филдом идет изображение. (облачко) Данное "облачко" стоит не ровно относительно филда. Выше чем нужно. Хочется сдвинуть имейдж чуть ниже, чтобы достичь желаемого результата. При попытке изменить код на:

Код:

&nbsp;&nbsp;
<form action="" method="GET" onsubmit="return submitTags(this.tag.value);">
<img src="{$DIR_STATIC_SKIN}/images/tagcloud.png" border="0" style="margin-left: 10px; margin-top: 10px">&nbsp;
<input type="text" name="tag" value="{$sTag|escape:'html'}" class="tags-input" >
</form>

(добавил отступ от верхнего края: margin-top: 10px) - сдвигается не только изображение, но и филд вместе с ним.
Вопрос: как задать для имейджа отступ от верхнего края не задев при этом положение филда?

PS: Филд должен остаться на прежнем месте, а имейдж сдвинуться со своего прежнего места немного ниже с целью выравнивания относительно филда.

С уважением.

Niemans · 29.01.2010, 09:19

Пустить картинку либо фоном, либо с абсолютом.

Invisible · 29.01.2010, 09:23

Цитата:

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

Пустить картинку либо фоном, либо с абсолютом.

Живой пример кода можно у Вас попросить? Не совсем представляю как это сделать.

Niemans · 29.01.2010, 09:27

Ну скрин дайте посмотреть что в итоге должно быть, исходя из него пример сделаю.

Invisible · 29.01.2010, 09:37

Цитата:

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

Ну скрин дайте посмотреть что в итоге должно быть, исходя из него пример сделаю.

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

Вот как это выглядит:

http://img203.imageshack.us/img203/5454/tagz.jpg

Поле со словом "имейдж", слева картинка в виде облака.... как Вы можете заметить она явно желает быть ниже чем она есть.

DStereo · 29.01.2010, 10:51

Можно сделать для поля position:relative и top: -ypx; y-количество пикселей на которое нужно поднять форму.

Добавлено через 7 минут

Можно еще попробовать сделать для имейджа vertical-align:middle;

Invisible · 29.01.2010, 11:53

Цитата:

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

Можно сделать для поля position:relative и top: -ypx; y-количество пикселей на которое нужно поднять форму.

Добавлено через 7 минут

Можно еще попробовать сделать для имейджа vertical-align:middle;

Большое спасибо

Исходя из Вашего совета: немного покумекал (сделал не за счет поднятия формы, а зеркально, за счет опускания имейджа.)
и взял имейдж в код:

Код:

<span style="position: relative; top: 7px"></span>

Получилось:

Код:

<span style="position: relative; top: 7px"><img src="{$DIR_STATIC_SKIN}/images/tagcloud.gif" border="0" style="margin-left: 13px; "></span>

Итог: Теперь удобно могу манипулировать положением имаги относительно формы

Еще раз спасибо.
С уважением.

Niemans · 29.01.2010, 11:59

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>
<style>
form {margin: 0; padding: 5px 10px; border: 1px solid #000; width: 200px; overflow: hidden}
img, input {float: left}
.image {margin: 10px 0 0 0;}
input {margin: 0 0 0 15px; padding: 3px 5px; border: 1px solid #000; width: 150px}
</style>
</head>
<body>
<form action="" method="GET" onsubmit="return submitTags(this.tag.value);">
<img src="image.png" width="20" height="24" />
<input type="text" name="tag" value="{$sTag|escape:'html'}" class="tags-input" >
</form>
<form action="" method="GET" onsubmit="return submitTags(this.tag.value);">
<img src="image.png" width="20" height="24" class="image" />
<input type="text" name="tag" value="{$sTag|escape:'html'}" class="tags-input" >
</form></body>
</html>

Две формы для примера, класс image у картинки отвечает за отступ сверху

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Положение элемента	sokol666	HTML, CSS, JavaScript	0	06.07.2009 13:13
Вопрос относительно фреймов	vate	HTML, CSS, JavaScript	2	16.09.2007 15:18
Положение на таймлане	SYSTEMS	Технологии Flash	2	27.12.2006 10:10
мнения относительно дизайна	StorM	Зал дебютантов	22	16.02.2005 11:12
Как опускать баннеры, т.е менять их положение?	Shumell_Veter	HTML, CSS, JavaScript	1	16.06.2003 08:07

29.01.2010, 09:13	#1
Invisible	Имею некий код: Код:    <form action="" method="GET" onsubmit="return submitTags(this.tag.value);"> <img src="{$DIR_STATIC_SKIN}/images/tagcloud.png" border="0" style="margin-left: 10px;">  <input type="text" name="tag" value="{$sTag\|escape:'html'}" class="tags-input" > </form> Отвечает он за вывод филда (поля) под ввод тегов к сообщению. Как видно по коду перед филдом идет изображение. (облачко) Данное "облачко" стоит не ровно относительно филда. Выше чем нужно. Хочется сдвинуть имейдж чуть ниже, чтобы достичь желаемого результата. При попытке изменить код на: Код:    <form action="" method="GET" onsubmit="return submitTags(this.tag.value);"> <img src="{$DIR_STATIC_SKIN}/images/tagcloud.png" border="0" style="margin-left: 10px; margin-top: 10px">  <input type="text" name="tag" value="{$sTag\|escape:'html'}" class="tags-input" > </form> (добавил отступ от верхнего края: margin-top: 10px) - сдвигается не только изображение, но и филд вместе с ним. Вопрос: как задать для имейджа отступ от верхнего края не задев при этом положение филда? PS: Филд должен остаться на прежнем месте, а имейдж сдвинуться со своего прежнего места немного ниже с целью выравнивания относительно филда. С уважением. Последний раз редактировалось Invisible; 29.01.2010 в 09:20..

29.01.2010, 09:19	#2
Niemans	Пустить картинку либо фоном, либо с абсолютом.

29.01.2010, 09:27	#4
Niemans	Ну скрин дайте посмотреть что в итоге должно быть, исходя из него пример сделаю.

29.01.2010, 10:51	#6
DStereo	Можно сделать для поля position:relative и top: -ypx; y-количество пикселей на которое нужно поднять форму. Добавлено через 7 минут Можно еще попробовать сделать для имейджа vertical-align:middle; Последний раз редактировалось DStereo; 29.01.2010 в 10:51.. Причина: Добавлено сообщение

Опции темы
Версия для печати Отправить по электронной почте