View Full Version : Tournament Bracket Formatting with CSS

Jan 28th, 2007, 10:19 PM
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;