Hello and welcome to our community! Is this your first visit?
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
    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:


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


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

    <style type="text/css">
    @import url(css/bracket.css);




    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) {
    case 'match_id':
    $qmatch_id = $value;
    case 'round':
    $qround = $value;
    case 'y_pos':
    $qy_pos = $value;
    case 'player1_user_id':
    $qplayer1_user_id = $value;
    case 'player2_user_id':
    $qplayer2_user_id = $value;
    case 'winner':
    $qwinner = $value;

    // 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";
    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";


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


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


    Thanks for any help!!


    The imported CSS file is as follows:


    #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