Пара вопросов: Оптимизация img при верстке и позиционирование внутри таблицы

[Eridani]

Всем добрый день. Помогите решить задачу, битый день уже сижу.

Есть тут картинка с трассой, которая в макете 1918 шириной, никак не могу додуматься, как её оптимизировать под различное разрешение. Пробовал масштабирование, но тогда элементы такие как input'ы, таймер и т.п. при свертывании экрана уплывают влево вверх под белый хидер. Скручивание по горизонтали тоже пробовал, естественно, картинка тогда сплющивается как гармошка, не комильфо совсем.

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

#Снизу: Решено

И ещё вопросик, чтобы новую тему не создавать:

Позиционирование элемента внутри ячейки таблицы.

Этот синяя ячейка:

<table id="mainblock" width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
<td class="hdImg" width="auto" height="600">
<div id="form_container" style="position:absolute; background:#565; color:#fff; border:3px solid orange; width:205px; height:150px; left: 740px; top: 395px;">
<form method="post" action="send.php" id="order-form">
	 <div class="controls controls-group">
			 <input name="fio" type="text" class="input_text" value="" placeholder="Введите имя"/>
				 <input name="phone" type="text" class="input_text" value="" placeholder="Введите телефон"/>
				 <input name="email" type="text" class="input_text" value="" placeholder="Введите E-Mail"/>
				 <input class="btn btn-warning pull-right" value="ЗАКАЗАТЬ РАСЧЕТ" name="send" type="submit" form="order-form"></button>
		 </form></div>

</td>
</tr>
</table>

В form_container в стиле есть left: 740px; top: 395px, если я правильно понимаю, форма спозиционированна от левого верхнего угла ячейки (td). Это она у меня на 1366 будет смотреться нормально, а у кого разрешение экрана больше, то все равно, форма будет занимать именно эти координаты? Если да, то как прибить её к правому краю ячейки hdimg, а оттуда уже сделать отступ margin'ом (или чем там, я уже в тегах запутался, по 13 часов в день сижу уже за этим), чтобы при горизонтальном свертывании страницы она ехала следом за этим "свертыванием" ?

В принципе, я создал ещё один div блок на всю ширину ячейки таблицы, а дочерний form_container проставил в стиле как right:30px;bottom:30px; и вроде бы эффект достигнут, не знаю пока, насколь актуально.

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

Edited October 11, 2013 by Eridani

[SCooTERina]

Чтобы position:absolute; Привязать к родительскому тегу необходимо у него(hdImg) прописать position:relative;

Сейчас от внешней Таблицы вообще никакого толку нет, absolute на неё внимания не обращает.

[Eridani]

Чтобы position:absolute; Привязать к родительскому тегу необходимо у него(hdImg) прописать position:relative;

Сейчас от внешней Таблицы вообще никакого толку нет, absolute на неё внимания не обращает.

Спасибо.

Ну, я сделал так, вроде бы то, что нужно:

<div id="container1" style="position:relative; width:auto;">
<img class="topImg" src="images/main_block_bg.jpg" border="0" alt="" />
<div id="form_container" style="position:absolute;color:#fff; padding-left:30px;padding-right:30px;padding-bottom:10px;padding-top:45px; border:3px solid white; border-radius:10px; width:205px; height:150px; right:350px;bottom:50px;">

[ShumNo]

Про картинку:

поставил бы фоном, а все элементы, которые есть поверх картинки двигал бы с помощью медиа при разном разрешении

[Eridani]

Про картинку:

поставил бы фоном, а все элементы, которые есть поверх картинки двигал бы с помощью медиа при разном разрешении

Так дело в том что, если я поставлю как background в стиле, то вся эта бандура 1918 шириной отобразится лишь частью на мониторе, насколько я знаю, на фон нельзя воздействовать всякими там width'ами и height'ами.

Вот что это получится, если фоном .

Хотя, я нагло вру, напутал что-то, вот что вышло, если фоном с фиксированной высотой блока:

background:url(images/main_block_bg.jpg) no-repeat top center

А насчет двигать...вот об этом способе я не знаю. Не затруднит чуточку просветить?

Edited October 11, 2013 by Eridani

[ShumNo]

http://htmlbook.ru/css/media

Суть в том, что при разных разрешениях (выбираете размеры при которых реагировать вы сами какие хотите и сколько хотите)

к разным элементам можно устанавливать свои стили

[Eridani]

http://htmlbook.ru/css/media

Суть в том, что при разных разрешениях (выбираете размеры при которых реагировать вы сами какие хотите и сколько хотите)

к разным элементам можно устанавливать свои стили

Спасибо, полезная информация, но нужно будет время привыкнуть.

Edited October 12, 2013 by Eridani