How to align isometric tiles?

[cu11]

Hey

Im trying to get my isometric tiles to align properly but this always leaves alternative tiles of emptyness see image below:

http://imgur.com/RRRta

From what i can tell its impossible to line images of isometric tiles to be placed side by side due to the empty corners.

This is the example tile im trying it with http://www.clker.com/cliparts/9/b/0/..._1.svg.med.png

So how do engines with isometric tiles line up properly :S

[RobA]

What software are you using?

(You are correct that isometric tiles are made to be placed each row and column 1/2 offset)

-Rob A>

[ravells]

As far as I know this is the only way you can place them....or rotations of the same pattern.

[cu11]

Im am trying to achieve it in JS/HTML/CSS

And yes that is how they are placed ravells but the corners causes issues..ill look into js setting images with 1/2 offsets

[RobA]

Im am trying to achieve it in JS/HTML/CSS

And yes that is how they are placed ravells but the corners causes issues..ill look into js setting images with 1/2 offsets

Something like this should work with CSS:

<div style="background: url(tile.png) repeat scroll 0% 0% transparent; height: 600px; width: 600px;">
	<div style="background: url(tile.png) repeat scroll 0% 0% transparent; height: 750px; width: 750px; position: relative; top: -75px; left: -150px;">
		&nbsp;</div>
</div>

You can figure how to clean up the edge overlaps, etc.

Here: http://testbed.cartocopia.com/test.html

edit - looks like you need to trim 1 row off your image to get rid of the white line...?

-Rob A>

[Gidde]

If you can, cu11, try to leave the JS out of that equation, as many end users browse with JS turned off. So if your stuff requires it to display correctly, it's going to look wonky to those folks.

[Midgardsormr]

I don't know if your programming paradigm permits this, but try chopping each tile into four triangular pieces, reshuffling the pieces into rectangular sections, and laying those out on a grid.

That is, if Rob's solution doesn't work for you, although his is more elegant since it's all in CSS.

[cu11]

Rob's suggestion works perfect... just quick question how do i work out the numbers if the tile i use happens to be changed in size ? Im assuming theres a formula ?

Rob's idea is exactly what i was trying to work out

[RobA]

Rob's suggestion works perfect... just quick question how do i work out the numbers if the tile i use happens to be changed in size ? Im assuming theres a formula ?

Rob's idea is exactly what i was trying to work out

Just the offset: relative; top: -75px; left: -150px;

-75 is half the tile height and -150 is half the width.

-Rob A>