• 0
Castromen

Сбивается позиция меток

    Вопрос

    Castromen

    Добрый день.

    Подскажите плз. как установить позиционирование в разных устройствах. (что бы метки отображались в одних и теж же точках на изображении)

    <style>
    #point_mr {
                    font-size: 30pt;
                width: 50px;
                height: 50px;
                line-height: 45px;
                cursor: pointer;
                left: 80%;
                color: #ffffff;
                top: 32%;
                position: absolute;
                border-radius: 50%;
                border: 3px solid #ffffff;
            }
    
            #content {
                    width:100%;
                    height:100%;
            }
    
    </style>
    
    <div id="content" >       
      <!--Изображение-->
    <img style="margin: 0px auto;position: absolute;top: 60px;bottom: -100%;left: -100%;right: -100%;min-width: 100%;min-height: auto;     " src="/sites/ds/IS/SitePages/SKKMRIA/img/123.PNG" class="img-responsive"/>
                                    
     <!--Метки-->
            <div id="metka">
            <a id="map1" href="#animatedModal">            
          <i id="point_mr" class="fa fa-map-marker hover" aria-hidden="true" data-toggle="tooltip" data-placement="right" title="" data-original-title="Метка 1"></i>
        </a>
        </div>
                    
    </div>

     

    Изменено пользователем Castromen

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    9 ответов на этот вопрос

    Рекомендуемые сообщения

    • 0
    Endorphin

    Ну во первых почему такой способ стилизации?

    А во вторых, сжимаете окно и медиа выражениями устанавливаете точки при которых нужно что бы ваше изображение было на нужном положении, пример:

    @media(max-width: 768px){

    img {

      top:7px;

      left:10px

      }

    }

    В данном примере изображение сместиться на указаную точку на планшетах с расширением 768px

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Castromen

    С мобильными разобрался, а едет все когда стационарный компьютер с разным разрешением экрана?

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Endorphin

    сделай что бы блок не тянулся после 1200px например, с центруй его, задав max-width, и отступы авто слева справа

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Castromen

    А если хочу что бы карта была fullcreen?

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Endorphin

    тогда для каждой контрольной точки описывай позицию маркера max-width 1400 и тд, я бы вот не хотел что бы на моем мониторе сайт был показан с картой 1980px размером) это не органично и не красиво, я бы ее за центрировал на уровне всего контента

    А вообще есть вот такая тема у яндекса))) https://tech.yandex.ru/maps/doc/jsapi/1.x/dg/tasks/how-to-add-placemark-docpage/#placemark-dragging

     

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Switch74

    если у вас размер карты меняется, то и координаты точек тоже должно меняться
    если карта у вас в % то и координаты точек в % в чем проблема?

    здесь все как в математике или физике, кг нельзя складывать с граммами, вы конечно можете, но хз что из этого выйдет :)

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Endorphin
    5 минут назад, Switch74 сказал:

    если у вас размер карты меняется, то и координаты точек тоже должно меняться
    если карта у вас в % то и координаты точек в % в чем проблема?

    здесь все как в математике или физике, кг нельзя складывать с граммами, вы конечно можете, но хз что из этого выйдет :)

    Да выше код то посмотрите, у него в процентах всё

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Switch74

    не сказал бы, я вижу пункты и пиксели

    для некоторых элементов позволительно использовать другие измерения, но для каких-то элементов это критично и меняет при масштабировании слегка их позицию
    https://jsfiddle.net/x22qu745/

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Endorphin
    3 часа назад, Switch74 сказал:

    не сказал бы, я вижу пункты и пиксели

    для некоторых элементов позволительно использовать другие измерения, но для каких-то элементов это критично и меняет при масштабировании слегка их позицию
    https://jsfiddle.net/x22qu745/

    У меня впринципе много вопросов к такому стилю верстки, помоему это обречено что бы ломатся

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    Создайте аккаунт или войдите в него для комментирования

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

    Создать аккаунт

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти сейчас

    • Войти через Facebook
    • Войти через Twitter
    • Войти через Microsoft
    • Войти через LinkedIn
    • Войти через Google

    Карта разработчиков

    Карта участников

    Отметь себя на карте для поиска или предложения работы