Programming Help

Web Development



What's Here?

  • Members: 149,458
  • Replies: 506,329
  • Topics: 79,799
  • Snippets: 2,664
  • Tutorials: 706
  • Total Online: 2,136
  • Members: 104
  • Guests: 2,032

Welcome to Dream.In.Code
Become an Expert!

Join 149,458 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 2,136 people online right now. Registration is fast and FREE... Join Now!




making a flowchart using HTML and CSS

 
 Reply to this topicStart new topic

making a flowchart using HTML and CSS, for purposes of a tournament bracket...
scripting_challenged
17 Oct, 2007 - 04:00 AM
Post #1

New D.I.C Head
*

Joined: 17 Oct, 2007
Posts: 7


My Contributions
Hello,

I was scouring the Net for the kind of implementation I was looking for, and happened to find it on this page: http://www.battle.net/tournaments/sandlot/

If you scroll to the very bottom, there is a vertically-oriented flowchart which is very nicely done using only CSS (and HTML, obviously).

I've looked at the source behind it and I'm not quite understand it. Where is the code for the arrows? blink.gif

And sorry if it's obvious, but I just can't figure out how it works beyond the boxes themselves. Must have something to do me being up for almost 24 hours now doing nothing but schoolwork. excl.gif
User is offlineProfile CardPM
+Quote Post

no2pencil
RE: Making A Flowchart Using HTML And CSS
17 Oct, 2007 - 04:18 AM
Post #2

My fridge be runnin OH NOEZ!
Group Icon

Joined: 10 May, 2007
Posts: 7,116



Thanked: 76 times
Dream Kudos: 2425
Expert In: Goofing Off

My Contributions
http://www.battle.net/tournaments/sandlot/images/arrow1.gif
CODE

<div style="width:26px; height:289px; background:url(images/arrow1.gif); position:absolute; left:165px; top:68px;"></div>
<div style="width:26px; height:197px; background:url(images/arrow2.gif); position:absolute; left:70px; top:160px;"></div>
<div style="width:26px; height:289px; background:url(images/arrow1.gif); position:absolute; left:138px; top:423px;"></div>
<div style="width:26px; height:289px; background:url(images/arrow1.gif); position:absolute; left:45px; top:423px;"></div>
User is online!Profile CardPM
+Quote Post

scripting_challenged
RE: Making A Flowchart Using HTML And CSS
17 Oct, 2007 - 04:19 AM
Post #3

New D.I.C Head
*

Joined: 17 Oct, 2007
Posts: 7


My Contributions
QUOTE(no2pencil @ 17 Oct, 2007 - 05:18 AM) *

http://www.battle.net/tournaments/sandlot/images/arrow1.gif
CODE

<div style="width:26px; height:289px; background:url(images/arrow1.gif); position:absolute; left:165px; top:68px;"></div>
<div style="width:26px; height:197px; background:url(images/arrow2.gif); position:absolute; left:70px; top:160px;"></div>
<div style="width:26px; height:289px; background:url(images/arrow1.gif); position:absolute; left:138px; top:423px;"></div>
<div style="width:26px; height:289px; background:url(images/arrow1.gif); position:absolute; left:45px; top:423px;"></div>


So he is lining it up using absolute values?
User is offlineProfile CardPM
+Quote Post

fuzzyjello
RE: Making A Flowchart Using HTML And CSS
17 Oct, 2007 - 04:24 PM
Post #4

New D.I.C Head
*

Joined: 13 Apr, 2007
Posts: 19


My Contributions
They are using absolute divs and tables in a encompassing relative container.

http://www.battle.net/tournaments/sandlot/images/arrow1.gif
CODE

<div style="width:185px; height:750px; float:right; padding:10px; margin-right:10px; position:relative;">
<div style="width:26px; height:289px; background:url(images/arrow1.gif); position:absolute; left:165px; top:68px;"></div>
<div style="width:26px; height:197px; background:url(images/arrow2.gif); position:absolute; left:70px; top:160px;"></div>
<div style="width:26px; height:289px; background:url(images/arrow1.gif); position:absolute; left:138px; top:423px;"></div>
<div style="width:26px; height:289px; background:url(images/arrow1.gif); position:absolute; left:45px; top:423px;"></div>

<div class="box1" style="left:10px; top:0px;"><div class="box2"><small><small class="boxtitle">
» Community Sites</small>
<ul>
<li>Each site will form a team
<li>Creates logo and a team name
<li>Will be given a "Salary Cap"
</ul>
</small></div></div>

<div class="box1" style="width:145px; left:10px; top:108px;"><div class="box2"><small><small class="boxtitle">
» Player Pool</small>
<ul>
<li>64 Players
<li>Players from US, EU, and KR
<li>Well known and accomplished players
</ul>
</small></div></div>

<div class="box1" style="width:145px; left:10px; top:240px;"><div class="box2"><small><small class="boxtitle">
» Community Votes</small><br>
<ul>
<li>Community votes on the Battle.net website placing a virtual "value" on each player
</ul>
</small></div></div>

<div class="box1" style="left:10px; top:356px;"><div class="box2"><small><small class="boxtitle">
» Draft</small>
<ul>
<li>Captains will "buy" players based on community votes
<li>Limited to predetermined "salary" for the team
<li>Results in 8 total teams
<li>8-10 players per team
</ul>
</small></div></div>

<div style="left:10px; top:504px; position:absolute;">
<table width="185" cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
<td width="90">
<div class="box3"><div class="box2"><small><small class="boxtitle">
» League A</small>
<ul>
<li>4 teams per league
<li>Round Robin system of matches
</ul>
</small></div></div>
</td>

<td width="5"><img src="/images/pixel.gif" width="5" height="1"></td>

<td width="90">
<div class="box3"><div class="box2"><small><small class="boxtitle">
» League B</small>
<ul>
<li>4 teams per league
<li>Round Robin system of matches
</ul>
</small></div></div>
</td>
</tr>

<tr><td colspan="3" height="5"></td></tr>

<tr valign="top">
<td>
<div class="box3"><div class="box2"><small><small class="boxtitle">
» Matches</small>
<ul>
<li>Single elimination
<li>Best of 3
</ul>
</small></div></div>
</td>

<td width="5"></td>

<td>
<div class="box3"><div class="box2"><small><small class="boxtitle">
» Matches</small>
<ul>
<li>Single elimination
<li>Best of 3
</ul>
</small></div></div>
<br><br>
</td></tr></table>
</div>

<div class="box1" style="left:10px; top:711px;"><div class="box2"><small><small class="boxtitle">
» Finals</small>
</small></div></div>

</div>


The first several divs are the arrows, and then the 'box' divs have a background image placed on them in the CSS. This is just one of the ways you could go about doing this.
User is offlineProfile CardPM
+Quote Post

scripting_challenged
RE: Making A Flowchart Using HTML And CSS
18 Oct, 2007 - 05:35 PM
Post #5

New D.I.C Head
*

Joined: 17 Oct, 2007
Posts: 7


My Contributions
QUOTE(fuzzyjello @ 17 Oct, 2007 - 05:24 PM) *

The first several divs are the arrows, and then the 'box' divs have a background image placed on them in the CSS. This is just one of the ways you could go about doing this.

Hmm.

Do you recommend any easier, "newb" friendly ways of accomplishing the same thing? I'd say my CSS experience is intermediate.

Basically, I'm looking to set up a tournament tree on a site that I manage. The problem is that, since we will have many tourneys with different numbers of participants each time, I don't want to confuse myself when having to make new trees.

If it was just the one tree, I would probably use the same method used on the Blizzard site, even though it would probably take me forever (i.e. several days) to actually fully understand it.
User is offlineProfile CardPM
+Quote Post

fuzzyjello
RE: Making A Flowchart Using HTML And CSS
18 Oct, 2007 - 05:57 PM
Post #6

New D.I.C Head
*

Joined: 13 Apr, 2007
Posts: 19


My Contributions
QUOTE

Do you recommend any easier, "newb" friendly ways of accomplishing the same thing? I'd say my CSS experience is intermediate.

Basically, I'm looking to set up a tournament tree on a site that I manage. The problem is that, since we will have many tourneys with different numbers of participants each time, I don't want to confuse myself when having to make new trees.

If it was just the one tree, I would probably use the same method used on the Blizzard site, even though it would probably take me forever (i.e. several days) to actually fully understand it.


If the tree structure is going to be the same (the same number of boxes and arrows every time), I would suggest taking the time to understand the code and build a template. Then, as you change participants, you can copy the code of the previous tournament and just insert the new participants information. I would suggest building it using mostly CSS like Blizzard did. Yours may be easier to work with because you can use the whole page.

However, if your trees are going to be shifting the number of boxes etc. you may just want to make an image of the tree and players information. Keep in mind that this is not accessible and may be tedious to create every time.
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 1/7/09 01:35PM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month