トーナメントブラケットをデザインする - 一緒にうまくフィットしない

Question

トーナメントブラケットのビジュアルをデザインしようとしていますが、一緒にスロットを作ることはありません！次のように

CSSは次のとおりです。

HTMLのための今

#tournament-holder{ 
width:708px; 
padding:20px 0 20px 15px; 
float:left; 
} 
.vertical-holder{ 
width:100px; 
padding-right:15px; 
float:left; 
} 
.horizontal-holder1{ 
width:98px; 
height:98px; 
margin-bottom:15px; 
border:1px solid #bdbdbd; 
float:left; 
} 
.horizontal-holder2{ 
width:98px; 
height:98px; 
margin:57.5px 0 72.5px 0; 
border:1px solid #bdbdbd; 
float:left; 
} 
.horizontal-holder3{ 
width:98px; 
height:98px; 
margin:172.5px 0 187.5px 0; 
border:1px solid #bdbdbd; 
float:left; 
} 
.horizontal-holder4{ 
width:98px; 
height:98px; 
margin:402.5px 0 417.5px 0; 
border:1px solid #bdbdbd; 
float:left; 
} 
.horizontal-holder5{ 
width:98px; 
height:98px; 
margin:862.5px 0 877.5px 0; 
border:1px solid #bdbdbd; 
float:left; 
} 
.horizontal-holder6{ 
width:98px; 
height:98px; 
margin:1782.5px 0 1797.5px 0; 
border:1px solid #bdbdbd; 
float:left; 
} 
.white-holder{ 
width:98px; 
height:49px; 
background-color:white; 
float:left; 
} 
.yellow-holder{ 
width:98px; 
height:49px; 
background-color:#FFF8DC; 
float:left; 
} 
.player-holder{ 
width:70px; 
height:49px; 
float:left; 
} 
.score-holder{ 
width:28px; 
height:49px; 
float:left; 
} 

：

Current Bracket problem

：

<div id="tournament-holder"> 
      <div class="vertical-holder"> 
       <?php 
       $q = "SELECT u.username, p.position FROM ".TBL_FOOT_TOUR_PLAYERS." p 
         INNER JOIN ".TBL_USERS." u ON p.userid = u.id 
         WHERE p.tourid = '$tour_id' ORDER BY position"; 
       $result = $database->query($q); 
       $i = 1; 
       while($row=mysql_fetch_assoc($result)){ 
        extract($row); 
        if($i&1){ 
         ?> 
         <div class="horizontal-holder1"> 
          <div class="white-holder"> 
           <div class="player-holder"> 
            <? echo "$username"; ?> 
           </div> 
           <div class="score-holder"> 
            0 
           <div> 
          </div> 
         <?php 
        } 
        else{ 
         ?> 
          <div class="yellow-holder"> 
           <div class="player-holder"> 
            <? echo "$username"; ?> 
           </div> 
           <div class="score-holder"> 
            0 
           <div> 
          </div> 
         </div> 
         <?php 
        } 
        $i++; 
       } 
       ?> 
      </div> 

      <?php 
      //subsequent rounds 

      for($i=1; $i <= $rounds; $i++) 
      { 
       $j = $i + 1; //this is to generate the correct horizontal holder 
       $k = 1; //this is the order of the players - to check if they are odd or even as they come out. 
       $players = $players/2; 
       $q = "SELECT u.username, r.position FROM ".TBL_FOOT_TOUR_ROUNDS." r 
         INNER JOIN ".TBL_USERS." u ON u.id = r.winner 
         WHERE tourid = '$tour_id' && round = '$i' ORDER BY position"; 
       $result = $database->query($q); 
       ?> 
       <div class="vertical-holder"> 
        <?php 
        while($row=mysql_fetch_assoc($result)){ 
        extract($row); 
         if($k&1){ 
          ?> 
          <div class="horizontal-holder<?php echo $j; ?>"> 
           <div class="white-holder"> 
            <div class="player-holder"> 
             <? echo "$username"; ?> 
            </div> 
            <div class="score-holder"> 
             0 
            <div> 
           </div> 
          <?php 
         } 
         else{ 
          ?> 
           <div class="yellow-holder"> 
            <div class="player-holder"> 
             <? echo "$username"; ?> 
            </div> 
            <div class="score-holder"> 
             0 
            <div> 
           </div> 
          </div> 
          <?php 
         } 
         $k++; 
        } 
        ?> 
       </div> 
       <?php 
      } 
      ?> 
     </div> 

次は、ブラケットが現在のようにレンダリングされているものへのリンクです

明らかに、何かが正しく並べられていません。

ブラケットのアイデアは、「トーナメントホルダー」がブラケット全体を保持するということです。各ラウンドには「垂直ホルダー」があります...各垂直ホルダーには、2つのチーム（1つのフィクスチャー）ごとに水平ホルダーが含まれます。 6種類の水平ホルダーは、トーナメントがさらに進んでいくにつれて、フィクスチャ間の間隔が異なります。各水平ホルダには、黄色または白色のホルダがあります。どちらも同じですが、背景色が異なります。これらのそれぞれの中には、プレーヤーとスコアホルダーがあります。

答えはかなり複雑な質問ですが、これを解決できますか？ 私は大きな問題を抱えていますが、それを解決することはできません。

感謝:)

Answer 1

私はこれらのようないくつかのグラフィックスを行って、ウェブスポーツチーム/リーグ管理ソフトウェアを所有するために使用しました。これが機能するには、クエリとループだけでなく、まず構造体をメモリ内に準備する必要があります。

$structure = array(); 
$data = mysql_query('SELECT * FROM standings WHERE blablabla'); 
while($datarow = mysql_fetch_assoc($data)){ 

    //Evaluate the round in the first level and the match in second 
    $round = $datarow['round']; 
    $matchid = $datarow['round']; 
    $homeorvisitor = ($datarow['ishome'] ? 'home' : 'visitor'); 
    $structure[$round][$mathid][$homeorvisitor] = $datarow; 

} 

これはあなたの試合とのラウンドで一緒にグループ化された各試合のために、それぞれの対戦相手を見つける構造を作成します。

次に、単純なループロジックを使用して、各ラウンドを含むテーブルを作成し、各テーブルにマッチアップを表示するdivを作成します。私はそれのためのテーブルを使用するのが好きですが、あなたがCSSで十分なら、CSSでそれを行ってください。ここではdivを使ってみましたが、単純なCSSでうまく出力するはずです。

foreach($structure as $roundkey => $round){ 

    ?><div id="round<?php echo $roundkey; ?>" class="round"><?php 

     foreach($round as $matchid => $match){ 

      ?><div id="match<?php echo $matchid; ?>" class="match round<?php echo $roundkey; ?>"><?php 

       //Output your match box content here 

      ?></div><?php 

     } 

    ?></div><?php 

} 

これは出力する必要があります

<div id="round1" class="round"> 
    <div id="match1" class="match round1"> 
    </div> 
    <div id="match2" class="match round1"> 
    </div> 
    <div id="match3" class="match round1"> 
    </div> 
    <div id="match4" class="match round1"> 
    </div> 
</div> 
<div id="round2" class="round"> 
    <div id="match5" class="match round2"> 
    </div> 
    <div id="match6" class="match round2"> 
    </div> 
</div> 
<div id="round3" class="round"> 
    <div id="match7" class="match round3"> 
    </div> 
</div> 

私が提案するCSSが並んで浮い、ラウンドに一定の幅を作ることであり、各試合は関連するラウンド＃に応じて、特定の高さと幅を取るだろうそれと。ですから、round2で試合よりも小さいラウンドワンで1試合を作ることができるようになりますその方法は、（それを中央に高さの2倍を取る。

すべてが意味をなすこと？応答のための