www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 17 of 17

Thread: creating tournament brackets?

  1. #16
    Join Date
    Jun 2014
    Posts
    1
    If you are up for a quick and dirty solution with No CSS or java needed. try this:

    https://dl.dropboxusercontent.com/u/...entBrackets.7z

    It's just HTML DIV's and a few .png files for the lines (see the 7Z file for pics).


    Grtz,
    Theo


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
    <meta http-equiv="refresh" content="1" >
    <head>
      <title>Boom16 - dubbele afvalling </title>
    </head>
    <body>
    
    <!-- Div info -->
    	
    	<div id="DivInfo"  style="position:absolute; top:10px; left:930px; width:300px; height:60px; "><FONT SIZE="10" COLOR="000000">DIVISIE 1</FONT></div>
    
    <!-- Scheiding -->
    	
    	<div id="Scheiding"  style="position:absolute; top:604px; left:0px; width:926px; height:2x; border:2px solid #000; "></div>
    	<div id="ST1"        style="position:absolute; top:585px; left:10px; width:200px; height:60px; "><FONT SIZE="3" COLOR="000000">Normale races<br>Herkansings races</FONT></div>
    
    
    <!-- Lijnen -->
    
    	<div id="H"    style="position:absolute; top:606px; left:1132px;width:24px; height:2x;     border:2px solid #000; "></div>
    	<div id="HL2"  style="position:absolute; top:315px; left:900px; width:130px; height:260px; background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    	<div id="HL3"  style="position:absolute; top:635px; left:900px; width:130px; height:260px; background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    	<div id="HL4"  style="position:absolute; top:145px; left:670px; width:130px; height:110px; background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    	<div id="HL5"  style="position:absolute; top:785px; left:670px; width:130px; height:110px; background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    	<div id="HL6"  style="position:absolute; top:315px; left:670px; width:130px; height:110px; background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    	<div id="HL7"  style="position:absolute; top:955px; left:670px; width:130px; height:110px; background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    	<div id="HL8"  style="position:absolute; top:75px;  left:440px; width:130px; height:40px;  background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    	<div id="HL9"  style="position:absolute; top:715px; left:440px; width:130px; height:40px;  background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    	<div id="HL10" style="position:absolute; top:175px; left:440px; width:130px; height:40px;  background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    	<div id="HL11" style="position:absolute; top:815px; left:440px; width:130px; height:40px;  background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    	<div id="HL12" style="position:absolute; top:355px; left:440px; width:130px; height:40px;  background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    	<div id="HL13" style="position:absolute; top:995px; left:440px; width:130px; height:40px;  background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    	<div id="HL14" style="position:absolute; top:455px; left:440px; width:130px; height:40px;  background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    	<div id="HL15" style="position:absolute; top:1095px;left:440px; width:130px; height:40px;  background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    
    <!-- Blokken -->
    
    	<div id="H0"  style="position:absolute; top:575px; left:1160px;width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H0  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    	<div id="H1"  style="position:absolute; top:575px; left:930px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H1  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    	<div id="H2"  style="position:absolute; top:255px; left:700px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H2  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    	<div id="H3"  style="position:absolute; top:895px; left:700px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H3  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    	<div id="H4"  style="position:absolute; top:115px; left:470px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H4  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    	<div id="H5"  style="position:absolute; top:755px; left:470px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H5  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    	<div id="H6"  style="position:absolute; top:395px; left:470px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H6  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    	<div id="H7"  style="position:absolute; top:1035px;left:470px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H7  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    	<div id="H8"  style="position:absolute; top:45px ; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H8  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    	<div id="H9"  style="position:absolute; top:685px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H9  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    	<div id="H10" style="position:absolute; top:185px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H10 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    	<div id="H11" style="position:absolute; top:825px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H11 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    	<div id="H12" style="position:absolute; top:325px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H12 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    	<div id="H13" style="position:absolute; top:965px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H13 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    	<div id="H14" style="position:absolute; top:465px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H14 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    	<div id="H15" style="position:absolute; top:1105px;left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H15 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
      
    	 
    </body>
    </html>

  2. #17
    Join Date
    Mar 2012
    Posts
    1,489
    @gruntagamet

    You will have to explain the meanings of the numbers you have given. I'm guessing that the first column is the higher ranking player, the second is the opponent, but if so: what are the the third and fourth columns???? No that cannot be right, because in the first round the players ranked 11 to 16 play themselves!!! You can't assume that we know the intricacies of tournament organisation. You need to precisely define what the numbers mean, and how the draws work...

    As to your actual question, presumably the top seed for the round is the highest ranked seed (or player?) playing in that round. You cannot compute that with HTML. You need to use PHP or JavaScript if you want the system to work out the play pairings in each round. Which means that you have to rigorously describe the rules.
    Last edited by jedaisoul; 06-15-2014 at 10:46 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles