Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Позиционирование 
:(
    Опции темы
yintar1980
Дата 23.12.2015, 15:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 31
Регистрация: 26.10.2015

Репутация: нет
Всего: нет



Всем привет.
Помогите,пожалуйста решить такую проблему:
У меня есть следующий блок(код ниже).т.е.в блоке с id="div009"( с относительной позицией) содержится блок  class="grunt"(с абсолютной позицией к блоку с id="div009" ).У блока с id="div009" на background повешено изображение и при наведении мыши на div с  class="grunt"(область для класса грунт задается координатами, код ниже) он становится видимым(код скрипта ниже) и соответственно накладывается на изображение которое стоит на background у блока с id="div009" .У меня на ноутбуке все накладывается идеально и в нужном месте(так как я подобрал left для своего монитора).Проблема в том,что как иолько меняется ширина окна браузера(даже незначительно) то  и соответственно на других компах(с другими разрешениями мониторов) div с  class="grunt" уже не накладывается на изображение  блока с id="div009" в  нужной мне области(так как изображение у  блока с id="div009" смещается, а отступ у div с  class="grunt" остается left=333px )
Я понимаю ,что мне надо при событии $(window).resize отслеживать изменение ширины окна и динамически менять отступ left.Но как я ни пытался ничего не выходит(отступ left рассчитывается неправильно).
Просьба, не пинайте ,а подскажите пожалуйста как это правильно сделать?

Код

 <map name="pic_montag">
     <area shape="circle" coords="180,90,90"   class="grunt">
  </map>    

Код

 <div class="divSTD" style="width:100%;  margin-top:5px">
                <div id="div009" style="position: relative;">

                    <div class="grunt" style="display: none; font-family: verbana;  position: absolute;filter:alpha(opacity=70);opacity: 0.8; top: 10.5%;left:333px;width: 164px;height: 164px; border-radius: 82px; background: rgb(255, 255, 255);">'
                        <div style="margin-top: 24px;line-height:17px; color:black;font-size:12px;cursor:pointer">Без учета<br>особенностей грунта,<br>даже самый хороший септик прослужит Вам не долго</div>'
                    </div>
 </div>
 </div>

[JS]
 $('.grunt').mouseleave(function() {
                                    $('.grunt').hide();
                                });
 $('.grunt').mouseenter(function() {
                                    $('.grunt').show();
                                });
[/JS] 
PM MAIL   Вверх
ksnk
Дата 23.12.2015, 15:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386



Бякграунд что, по центру накладывается? Тогда и позиционировать его нужно от центра

Код

.grunt {
  top:10.3%;
  left:50%; /* тут ничего не трогать  ;) */
  margin-left:-100px; /* вот так можно сдвинуть грунт на нужную позицию*/
}



--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
yintar1980
Дата 23.12.2015, 19:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 31
Регистрация: 26.10.2015

Репутация: нет
Всего: нет



ksnk. а как расчитать это смещение, проблема именно в этом?

PM MAIL   Вверх
ksnk
Дата 23.12.2015, 21:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386



В смысле? Подобрать числовое значение смещения? 
В окне отладчика Хрома. Встать на элемент. Правой кнопкой на "просмотр кода". 
Справа в окне отладчика появится стиль, примененный к этому элементу. Его можно прямо там и править.


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
yintar1980
Дата 23.12.2015, 22:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 31
Регистрация: 26.10.2015

Репутация: нет
Всего: нет



так я и подобрал как вы говорите для своего ноутбука (-342px), но мне же надо динамически высчитывать и менять этот отступ при изменении экрана.
PM MAIL   Вверх
yintar1980
Дата 23.12.2015, 22:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 31
Регистрация: 26.10.2015

Репутация: нет
Всего: нет



ksnk, я понял о чем вы говорите .Спасибо Вам огромное!!!!!!!!!!!
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0808 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.