# Hex map positioning

**URL:** <https://forum.kirupa.com/t/hex-map-positioning/308081>\
**Category:** web dev\
**Created:** [April 16, 2010, 10:36pm UTC](https://forum.kirupa.com/t/hex-map-positioning/308081 "2010-04-16T22:36:44Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![bardic](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bardic/32/3708_2.png) [@bardic](https://forum.kirupa.com/u/bardic)\
**Post date:** [April 16, 2010, 10:36pm UTC](https://forum.kirupa.com/t/hex-map-positioning/308081/1 "2010-04-16T22:36:44Z")

</div>

Hey all,  
I’m trying to make a hex game in js but the problem is I suck at js. So what I want to do is load and position a bunch of tiles. My problem is the positioning part. Here’s what I’ve been trying :

```auto
 
var img = document.createElement("img");
img.setAttribute("src","tile.png");
img.setAttribute("id","tile1");
img.style.paddingLeft = '500px';
document.body.appendChild(img);

var img2 = document.createElement("img");
img2.setAttribute("src","tile.png");
img2.setAttribute("id","tile2");
img2.style.paddingLeft = '525px';
img2.style.marginTop = '25px';
img2.style.zIndex = "2";
document.body.appendChild(img2);

```

This doesn’t work. It adds both tiles to screen, but doesn’t position them correctly.

If anyone could point me to some tutorials about making a hex map in js that would be great! or even positioning elements properly \>.\< My queries my turned up nothing.

Thanks