0

I'm trying to create this grid:

grid example

I've made some html generated with jQuery and rotated that with jQuery.rotate. Now my div's are overlapping each other causing a problem to my hover state.

Couldn't find any question that looks like this, has anybody done something like this before?

If you need to look into the code I can post the html / css and javascript. Because it's quite a lot of code I'll do that by request.

Jacob Francke
  • 425
  • 6
  • 23

2 Answers2

1

well stacking too many dives on top of each other isnt that good idea as i think.. why don't you try using svg instead .. those are made for such a situation .. but if you still want to be using divs then please show us the code for your project .. :)

rainykeys
  • 594
  • 4
  • 12
  • Never used svg before, but I've did some drawing before with the canvas element. This also needs to work in IE 7 and 8 so the canvas can't be used this time. I'm going to look into it and see if I can figure it out. Hope it will work to make it interactive with tooltips and stuff. Thank you! – Jacob Francke Apr 13 '12 at 19:00
  • 1
    no problem .. and btw it sure works with every thing , they are treated like and other elements .. – rainykeys Apr 13 '12 at 19:48
  • Hi, I found this awesome jQuery plugin that works very well :) http://keith-wood.name/svg.html – Jacob Francke Apr 16 '12 at 13:50
0

Why don't you use css transform-rotate for each block with absolute positioning and then you can use jQuery to set top and left properties of all onto your grid. I've found something similar on http://neolab.no/ Here, they also used media-queries to re-positionate each block.

RipCorP
  • 25
  • 4