Рисование скобки турнира (CSS / HTML на основе набора данных PHP)

Если вы не знакомы с тем, что я имею в виду в турнирной скобке, см. Здесь: http://img.ruphp.com/php/bracket1.gif

Тем не менее, я построил набор данных и вычислил количество раундов (ceil (log ($ numPlayers, 2))), и мне удобно находить количество игроков в каждом раунде и т. Д.

Теперь мне нужно переместить мой массив совпадений для каждого раунда в скобки. Будь то CSS или представленный мной, я могу играть с дизайном самостоятельно, мне просто интересно, как я должен это делать (подумайте, что турнир может иметь переменное количество раундов) во что-то визуальное.

Благодаря!

Вы можете пойти со столами и установить соответствующие rowspan строк для выравнивания скобки. Это более простой способ, но некоторые говорят не семантически правильно. Пример .

Вы также можете сделать это с помощью слоев CSS'd, просто вычислив соответствующие позиции и используя абсолютно позиционированные divs, чтобы они выглядели как скобка. Обратите внимание, что этот подход не будет текущим, если вы не переместите его на javascript. Подробнее об этом .

Наконец, вы можете сделать это с вложенными списками, как описано в этом разделе , но это выглядит довольно грязно.

У меня есть проект ( TournamentsApi ), который был создан для отслеживания и проведения турниров. Вы должны взглянуть на него.

На моем сайте я передаю скобки в SVG и внедряю их в HTML. Я был бы рад поделиться кодом, который я использую для генерации / внедрения SVG, если бы вы были склонны использовать мою реализацию.

Конечно, моя написана на C #, поэтому она может не устраивать вас. Однако исходный код был выпущен под лицензией MIT, и вы можете использовать структуры данных, которые я создал для вашего собственного проекта

Если вы готовы к быстрому и грязному решению без необходимости использования CSS или java. попробуй это:

https://dl.dropboxusercontent.com/u/43939704/TournamentBrackets.7z

Это всего лишь HTML DIV и несколько .png файлов для строк (см. Файл 7Z для фото).

Грц, Тео

 <!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> <div id="HL16" style="position:absolute; top:30px; left:210px; width:130px; height:15px; background-image: url(Rood3.png); background-size:100% 100%;"></div> <div id="HL17" style="position:absolute; top:670px; left:210px; width:130px; height:15px; background-image: url(Rood3.png); background-size:100% 100%;"></div> <div id="HL18" style="position:absolute; top:105px; left:210px; width:130px; height:15px; background-image: url(Blauw3.png); background-size:100% 100%;"></div> <div id="HL19" style="position:absolute; top:745px; left:210px; width:130px; height:15px; background-image: url(Blauw3.png); background-size:100% 100%;"></div> <div id="HL20" style="position:absolute; top:170px; left:210px; width:130px; height:15px; background-image: url(Rood3.png); background-size:100% 100%;"></div> <div id="HL21" style="position:absolute; top:810px; left:210px; width:130px; height:15px; background-image: url(Rood3.png); background-size:100% 100%;"></div> <div id="HL22" style="position:absolute; top:245px; left:210px; width:130px; height:15px; background-image: url(Blauw3.png); background-size:100% 100%;"></div> <div id="HL23" style="position:absolute; top:885px; left:210px; width:130px; height:15px; background-image: url(Blauw3.png); background-size:100% 100%;"></div> <div id="HL24" style="position:absolute; top:310px; left:210px; width:130px; height:15px; background-image: url(Rood3.png); background-size:100% 100%;"></div> <div id="HL25" style="position:absolute; top:950px; left:210px; width:130px; height:15px; background-image: url(Rood3.png); background-size:100% 100%;"></div> <div id="HL26" style="position:absolute; top:385px; left:210px; width:130px; height:15px; background-image: url(Blauw3.png); background-size:100% 100%;"></div> <div id="HL27" style="position:absolute; top:1025px;left:210px; width:130px; height:15px; background-image: url(Blauw3.png); background-size:100% 100%;"></div> <div id="HL28" style="position:absolute; top:1090px;left:210px; width:130px; height:15px; background-image: url(Rood3.png); background-size:100% 100%;"></div> <div id="HL28" style="position:absolute; top:450px; left:210px; width:130px; height:15px; background-image: url(Rood3.png); background-size:100% 100%;"></div> <div id="HL30" style="position:absolute; top:525px; left:210px; width:130px; height:15px; background-image: url(Blauw3.png); background-size:100% 100%;"></div> <div id="HL31" style="position:absolute; top:1165px;left:210px; width:130px; height:15px; background-image: url(Blauw3.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> <div id="H16" style="position:absolute; top:10px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H16 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> <div id="H17" style="position:absolute; top:650px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H17 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> <div id="H18" style="position:absolute; top:80px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1 <br>H18 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div> <div id="H19" style="position:absolute; top:720px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1 <br>H19 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div> <div id="H20" style="position:absolute; top:150px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H20 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> <div id="H21" style="position:absolute; top:790px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H21 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> <div id="H22" style="position:absolute; top:220px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1 <br>H22 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div> <div id="H23" style="position:absolute; top:860px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1 <br>H23 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div> <div id="H24" style="position:absolute; top:290px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H24 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> <div id="H25" style="position:absolute; top:930px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H25 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> <div id="H26" style="position:absolute; top:360px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1 <br>H26 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div> <div id="H27" style="position:absolute; top:1000px;left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1 <br>H27 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div> <div id="H28" style="position:absolute; top:1070px;left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H28 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> <div id="H28" style="position:absolute; top:430px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H28 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> <div id="H30" style="position:absolute; top:500px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1 <br>H30 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div> <div id="H31" style="position:absolute; top:1140px;left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1 <br>H31 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div> </body> </html>