Flow diagram in html/css

Question

Hi, is there some good way to create a flow / swimline diagram without resorting to scripting or tables? I'm talking about showing different hosts sending packets (so hosts on the X axis, time on the Y and arrows to the destination host). It seems like too much elements for tables (especially the arrows spanning multiple columns either way), but on the other hand, divs would be hard to position in the right place horizontally (they'd have to be basically aligned to a specified "column").

Is there any good way out? Any helper frameworks? (I don't want to do canvas stuff unless really needed)

Edit: Forgot to add why I didn't mention images at all - some elements of the diagram should have :hover actions and should be clickable in the future.

Answer 1

I would suggest using PNG files with a transparent alpha layer (for overlaps), and positioning them absolutely with CSS. I haven't seen your overall layout, so I can't say that this is the best approach for your particular situation though.

Sample CSS code for a circle such as this: <a class="circle" id="myCircle" href="foo">Foo</a>

a.circle {
  display:block;
  height:100px;
  width:100px;
  background-image:url(/path/to/circle.png);
  background-repeat:no-repeat;
  position:absolute;
  line-height:100px;
  text-align:center;
  }

code for an individual circle element:

a#myCircle {
  top:234px;
  left:357px;
}

The class definition creates a set of attributes for all anchor elements that share the class "circle". The anchor with the ID of "myCircle" would then be positioned with the coordinates of 234,357 in pixels from the top left corner of the parent element with position:relative; set.