Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Tournament Bracket Formatting with CSS

    I created a php script that outputs matches for a tournament bracket and I am having trouble making them line up in an acceptable manner. Please respond with ideas of how I can arrange the matches into tournament bracket format with CSS. Due to the nature of the script some of the styles will have to be made as inline styles. I have all the divs outlined in different colors.

    begin view_tournament.php:

    [code]

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <head>
    <title><?php

    include ("login/include/session.php");
    $tnt_name = $_GET['name'];
    $tnt_id = $_GET['tnt_id'];
    echo "TournamentScape: $tnt_name";

    ?></title>
    </head>
    <style type="text/css">
    @import url(css/bracket.css);
    <!--

    -->
    </style>

    <body>

    <?php

    echo "<strong>$tnt_name</strong><p>";

    // get tournament info from database

    $query = "(SELECT `match_id`, `round`, `y_pos`, `player1_user_id`, `player2_user_id`, `winner` FROM `matches` WHERE `tnt_id` = $tnt_id)";

    $result = mysql_query($query) or die(mysql_error());

    // store tournament information in roundtracker array

    while ($rowdata = mysql_fetch_row($result)) {

    $roundtracker[] = array('match_id' => $rowdata[0], 'round' => $rowdata[1] , 'y_pos' => $rowdata[2], 'player1_user_id'=> $rowdata[3], 'player2_user_id'=> $rowdata[4], 'winner'=> $rowdata[5]);

    }

    // begin div structure

    /* main div begin*/ echo "<div id = \"tournament\">\n";

    $current_round = 0;
    $current_y_pos = 0;

    //iterate through matches

    $z = 0;
    while(is_null($roundtracker[$z]) === FALSE) {

    foreach($roundtracker[$z] as $key => $value) {
    switch($key)
    {
    case 'match_id':
    $qmatch_id = $value;
    break;
    case 'round':
    $qround = $value;
    break;
    case 'y_pos':
    $qy_pos = $value;
    break;
    case 'player1_user_id':
    $qplayer1_user_id = $value;
    break;
    case 'player2_user_id':
    $qplayer2_user_id = $value;
    break;
    case 'winner':
    $qwinner = $value;
    break;
    }

    // include anything that has to occur for every element of each match here
    }


    // include anything that has to occur once for each match here

    if ($qround == $current_round) {

    if ($qround != 0) {
    echo "</div>\n";
    }

    echo "<div id = \"round\" border=1>\n";
    $current_round++;
    }
    if ($qplayer1_user_id == 0) {
    $xplayer1 = 'Empty';
    }
    else $xplayer1 = $qplayer1_user_id;

    if ($qplayer2_user_id == 0) {
    $xplayer2 = 'Empty';
    }
    else $xplayer2 = $qplayer2_user_id;

    $calc = $qround * 100;

    echo "<div id = \"match\" style=\" position: relative; margin-top: $calc"."px; bottom: $calc"."px\" >$xplayer1<br><br>versus<br><br>$xplayer2</div>\n";



    $z++;
    }

    echo "</div></div>\n";







    ?>

    Return <a href="index.php">Home</a>
    </body>
    </html>

    [code]

    Thanks for any help!!

    -Pat

    The imported CSS file is as follows:

    bracket.css:

    #tournament {

    border: 5px solid black;

    }

    #round {

    border: 3px solid red;
    float: left;

    }

    #match {

    border: 3px solid blue;
    height: 200px;

    }

    #fill {

    height: 100px;

    }
    Last edited by pphill2; 01-29-2007 at 06:21 PM. Reason: Posted code instead of Link


 

Posting Permissions

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