PDA

Click to See Complete Forum and Search --> : Organisational chart

crispy_jelly
03-15-2009, 12:37 PM
Hi, I'm new to the forum and just wanted to get some peoples advice as it seems to be very good on here.

I want to create a Organisational chart similar to that of a family tree only horizontal and backwards :rolleyes: .
It is basically for a schedule where you have races which knockout teams and go into qualifiers and then eventually to a final, See picture for an example.

Just wondered if people have come across this before or have any ideas of how it may be done, I was thinking something like JavaScript.

I have searched the net but with no luck so far :(.

Many thanks if anyone can help.

Crispy.
TheBearMay
03-15-2009, 01:11 PM
Ahh... a sports tournament bracket. How were you thinking of populating the bracket? If it's just fixed text, then javascript is probably not necessary unless you're determined to have the diagonal lines -you can take a 1px dot and use CSS to modify width or height to get horizontal or vertical lines:

<img src="1pxDot.gif" style="width:55px" />
<img src="1pxDot.gif" style="height:55px" />
crispy_jelly
03-15-2009, 01:18 PM
Hmm, never though of doing that with the gif.

I will be populating each bracket from a database dynamically, So it will need to be able to cope with multiple races and qualifiers idealy.

Thanks.
TheBearMay
03-15-2009, 01:58 PM
So, you'll populating from server side. Should be able to play around with the CSS to position things the way you need them.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

</script>
<style type="text/css">
body, html {
padding:0;
margin: 0;
}
p {
border:1px solid black;
width:60px;
position:absolute;
font-size:12px;
}
.hLine {
width:55px;
height:2px;
position:absolute;
}
.vLine {
width:2px;
height:55px;
position:absolute;
}

</style>
</head>

<body>
<p style="top:0;left:5px;">Race 1</p>
<img src="blackDot.gif" style="top:20px;left:66px" class="hLine"/>
<img src="blackDot.gif" style="top:20px;left:120px" class="vLine" />
<img src="blackDot.gif" style="top:74px;left:66px" class="hLine"/>
<p style="top:55px;left:5px">Race 2</p>

<p style="top:25px;left:122px">Race 3</p>


</body>
</html>