Позиционирование элемента

[gumuch]

Добрый день уважаемые профессионалы!

Вот столкнулся с такой проблемой...

Есть фон сайта (просто одна картинка), на этой картинке есть нарисованные ящики которые я хочу сделать ссылками (3 шт.)

Я делаю следующее: нарисовал три картинки (пока что они разноцветные, что бы было видно куда их ставить, потом будут прозрачные), вставил их поверх фоновой картинки на те места куда требуется и прописал на каждую ссылку.

В CSS поставил

.leto {
top: 38px;
right: 310px;
z-index:99999;
position:absolute;
}

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

<a href="http://storeclothes.com.ua/index.php?option=com_content&view=article&id=16&Itemid=43"class="leto">
<img src="images/stories/link/leto.png" ></a>

Все вроде работает но когда приблизить либо отдалить сайт (скрулом мышки) либо человек зайдет на широкоформатном монике то все три мои прозрачные картинки с ссылками сдвинутся и будут кликаться уже не в том месте. Я понимаю что это потому что я позиционирую свои картинки от окна браузера, а вот как сделать так, чтобы закрепить эти три картинки в точном месте на фоновой картинке я не могу понять!

С position я игрался и ничего у меня не вышло.

У кого какие мысли есть?!

Спасибо за любую помощь.

На сайт можно глянуть тут: Моя ссылка

Edited April 4, 2012 by gumuch

[Switch74]

я бы отделил ящики от фона и сделал как отдельные картинки, а позиционировать лучше относительно одного и того же, скорее всего поможет перенос ссылок в .wrapper и не забудь, что он должен иметь position.

Edited April 4, 2012 by Switch74

[gumuch]

я бы отделил ящики от фона и сделал как отдельные картинки, а позиционировать лучше относительно одного и того же, скорее всего поможет перенос ссылок в .wrapper и не забудь, что он должен иметь position.

Спасибо. Конечно что такое .wrapper я не знаю но у меня есть немножко другая идейка - более легкая (может быть не проффесинальная). Сделаю просто широкие прямоугольники да и все.

[hypnocolor]

Ширина области ссылок не решит вашей проблемы, потому что позиционируются они всё равно относительно окна браузера.

.wrapper — это фиксированная область вашей страницы, равная 980 пикселям. Относительно неё и нужно позиционировать ссылки, так как у нее размер останется всегда одним и тем же, в отличие от размера окна браузера. В общем, я согласен со Switch74 — картинки-ссылки нужно сделать в виде прозрачных png-шек с одним текстом, перенести внутрь .wrapper и там уже задавать расположение.