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

[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>

 

Edited May 25, 2017 by Castromen

[Endorphin]

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

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

@media(max-width: 768px){

img {

  top:7px;

  left:10px

  }

}

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

[Castromen]

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

[Endorphin]

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

[Castromen]

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

[Endorphin]

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

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

 

[Switch74]

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

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

[Endorphin]

5 минут назад, Switch74 сказал:

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

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

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

[Switch74]

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

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

[Endorphin]

3 часа назад, Switch74 сказал:

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

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

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