Drawing lines on webpage 1

[Madere]

Hi,

I am busy with displaing genealogy information on a webpage.
I do not want to show it as normal statistics but the same as it is shown in the programmes itself.
This means I have to draw horizontal and vertical lines and maybe also boxes.
I wonder if this is possible with HTML and so how to do this. I have seen it once on a webpage but I can not find it anymore.
If anyone knows how to do this, please let me know.
I have no idea how to achive this myself.
Regards,
Madere.

 

[Mr3Putt]

If you can programatically determine (while processing your database query) WHICH lines you need to put WHERE... you could use tables and:

<style type=&quot;text/css&quot;>
.horizBar {
border: none;
border-top: 1px solid #003366;
}
.vertiBarRight {
border: none;
border-right: 1px solid #003366;
}
.vertiBarLeft {
border: none;
border-left: 1px solid #003366;
}
.downRightBend {
border: none;
border-top: 1px solid #003366;
border-right: 1px solid #003366;
}
.downLeftBend {
border: none;
border-top: 1px solid #003366;
border-left: 1px solid #003366;
}
</style>

... then set up your intervening TD's like
<td class=&quot;downRightBend&quot;>&nbsp;</td>

or something along those lines.

About 4 years ago I wrote an orgChart builder in ASP with variable output-levels, allowing a user to &quot;drill down&quot; through many levels of an orgChart. All connecting lines were handled by BORDERs.

It takes quite a bit of planning to determine colspans, rowspans and the like, but it will work (eventually).

Alternatively, if you don't want to work the the BORDERs stuff, create a 1-pixel image, and use it as the background of your intervening TD elements, like:

<td style=&quot;background:url(px_ff0000.gif) repeat-x;&quot;></td>
...for horizontal line, or...

<td style=&quot;background:url(px_ff0000.gif) repeat-x;&quot;></td>
...for vertical ones.

To create BOXES around your content, you'll still need borders.

 

[Mr3Putt]

rats. typ-o.

[red]
<td style=&quot;background:url(px_ff0000.gif) repeat-y;&quot;></td>
...for vertical ones
[/red]

... sorry bout that.

 

[dwarfthrower]

Three words:

Scalable Vector Graphics

So Very Good

 

[Mr3Putt]

Ah, c'mon dwarfThrower, post the SVG code! :-D

...should only take a couple MB...