CODEWITHSUNDEEP
jqueryhtml
Saulius Antanavicius
Saulius Antanavicius

Reputation: 1381

Positioning dots on a map with css

I'm looking of a way to solve a problem, I'm making a map with locations, locations are indicated by dots, however I've been using position:relative; so it counts the top-left from the top of the container, but now i've realised that it's not done by that and it shifts down as there are several 'dots', I can't find a way to work around this, is there an easy way to this?

Preview: removed have a look at the dots by missisipy(by the sea) and the dot to the right, they are mean to be at the same height, but they aren't..

Upvotes: 0

Views: 2449

Answers (3)

Thomas Guillory
Thomas Guillory

Reputation: 5729

You have to us absolute positionning, which allows you to position your elements relative to the parent container.

The only rule is that you parent container must be positionned too, so you can just add position: relative to it, its position will not be affected but it will become a positionned element.

Your HTML:

<div class='map'>
    <span class='point p1'></span>
    <span class='point p2'></span>
    <span class='point p3'></span>
    <span class='point p4'></span>
</div>​

Your CSS:

.map {
    position: relative;
    [...other styling...]
}

.point {
    position: absolute;
    left: [...X coordinate...];
    top: [...Y coordinate...];
    [...other styling...]
}

Demonstration here : http://jsfiddle.net/YYmde/

Upvotes: 0

John S
John S

Reputation: 573

I would think position:absolute might be better. relative will calc from the original position. exact quote from w3schools:

A relative positioned element is positioned relative to its normal position.

most likely in the original DOM structure the one "dot" is above the other so if the position for height is the same then one would be higher than the other as you are seeing.

however for absolute, another direct w3s quote:

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is html:

absolute should work without changing anything else as long as there isnt a parent element with a position other than static. If there is then rework the numbers and you should be good.

fixed could work as well but that would cause issues if the viewing screen isnt large enough for the whole map, which mine was so not an issue here but...

Upvotes: 1

Geoffrey Litt
Geoffrey Litt

Reputation: 160

I'm not 100% sure if I understand the problem you're having, but I think it's because the dot is being positioned relative to the anchor tag, and each time you add an anchor tag, it gets placed below the previous anchor tag. I think that positioning the anchor tags instead of the divs inside the anchor tags will work. So instead of

<a href="http://www.tampaport.com/" target="_blank" class="dot_class">
  <div class="dot" style="top: 255px; left: 642px; opacity: 1; " data-title="Tampa Port Athority">
  </div>
</a>

you could try

<a href="http://www.tampaport.com/" target="_blank" class="dot_class" style="top: 255px; left: 642px; opacity: 1; ">
  <div class="dot"  data-title="Tampa Port Athority">
  </div>
</a>

And make sure to display the anchors as blocks, with relative position:

a.dot_class{
  display: block;
  position: relative;
}

Upvotes: 0

Related Questions