...

View Full Version : Tournament Bracket Formatting with CSS



pphill2
01-28-2007, 09: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:

[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;

}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum