5 replies [Last post]
Firestorm ZERO
Offline
newbie
Last seen: 13 years 35 weeks ago
Joined: 2006-06-19
Posts: 7
Points: 0

Is it possible to style a unordered list to be like a tournament bracket (http://en.wikipedia.org/wiki/Image:Tournamentbracket.png)? Where the teams are on the left and the final round is on the right.

I seen it is mostly done with tables. Here is what I have so far. Last resort would be using the positioning rules but I would hopefully not use it if possible. Also I don't need the lines to connect them. I just need to have them position pretty much in place.

HTML

   <div>
        <ul>
            <li><span>Team 1 vs. Team 5 </span>
                <ul>
                    <li><span>Team 1 vs. Team 3 </span>
                        <ul>
                            <li><span>Team 1 vs. Team 2 </span>
                                <ul>
                                    <li><span>Team 1 vs. </span>
                                    </li>
                                    <li><span>Team 2 vs. </span>
                                    </li>
                                </ul>
                            </li>
                            <li><span>Team 3 vs. Team 4 </span>
                                <ul>
                                    <li><span>Team 3 vs. </span>
                                    </li>
                                    <li><span>Team 4 vs. </span>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><span>Team 5 vs. Team 7 </span>
                        <ul>
                            <li><span>Team 5 vs. Team 6 </span>
                                <ul>
                                    <li><span>Team 5 vs. </span>
                                    </li>
                                    <li><span>Team 6 vs. </span>
                                    </li>
                                </ul>
                            </li>
                            <li><span>Team 7 vs. Team 8 </span>
                                <ul>
                                    <li><span>Team 7 vs. </span>
                                    </li>
                                    <li><span>Team 8 vs. </span>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

CSS

        div
        {
            direction: rtl;
        }
        ul li
        {
            list-style: none;
        }
        ul li span
        {
            border: 1px solid #f00;
        }

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 7 years 47 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

My first thought was that

My first thought was that you could do it based off a multiple column list, with each column styled differently. Not sure if that would work, but I do think it's entirely possible with just css.

Firestorm ZERO
Offline
newbie
Last seen: 13 years 35 weeks ago
Joined: 2006-06-19
Posts: 7
Points: 0

Yeah I could put unordered

Yeah I could put unordered lists side by side but the way the data is stored, it doesn't keep track of what level it is in. I would have to change the way I pull the data and render it.

Any more suggestions welcome.

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 7 years 47 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

This peaked my interest, so

This peaked my interest, so I thought I'd give it a go. Here's what I came up with based on Stu Nicholl's 3 column ul:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
#info dl {
  clear:both;
  width:728px;
  height:8em;
  margin:2em auto;}
#info dt {
  margin-bottom:1em; 
  font-weight:bold;}
#info dd {
  width:10%; 
  float:left; 
  margin:0;}
 
#info ul.first {
  counter-reset:item 0;
  list-style-type: none;}
#info ul.second {
	counter-reset:item 5;
	line-height: 2.4em;
	list-style-type: none;
}
#info ul.third {
	counter-reset:item 9;
	list-style-type: none;
	line-height: 4.8em;
}
 
#info ul li {
	display: block;
}
#info ul li:before {
  content: counter(item) ". "; 
  counter-increment: item 1;}
</style>
</head>
<body>
<div id="info">
<dl>
<dt>My Shopping List (unordered)</dt>
<dd>
<ul class="first">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
</ul>
</dd>
<dd>
<ul class="second">
<li>Two</li>
<li>Three</li>
<li>Five</li>
<li>Eight</li>
</ul>
</dd>
<dd>
<ul class="third">
<li>Three</li>
<li>Five</li>
</ul>
</dd>
</dl>
</div>
</body>
</html>

You may need to adjust #info dd width % based on how much text you have. I tried this in FF3 and IE7 and it seemed to position fine with em line height. If you want to adjust the line height, just make sure to double the second column's value for the third column and so forth if you add more columns.

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 7 years 47 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

Sorry, posted before I saw

Sorry, posted before I saw your reply. I guess I'm a little unsure on how you're pulling the data into your html and how that affects the markup.
If you're pulling the data in as Team 1 vs Team 2, I'm not sure how your going to break those two values (Team 1, Team 2) into separate lines. Am i off base or is that kinda what you're trying to do?

Firestorm ZERO
Offline
newbie
Last seen: 13 years 35 weeks ago
Joined: 2006-06-19
Posts: 7
Points: 0

The way I pull data and how

The way I pull data and how it is stored is that I have to go through the "tree" one path and then when I reach the end I go one level up and continue the other path. So a single unordered list is easy to make.

Anyway after trial and error I figured out the CSS. I basically compress them and fit then in like blocks.

div
        {
            width: 400px;
        }
        ul
        {
        	margin: 0;
        	padding: 0;
        }
        ul li
        {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        ul li span
        {
 
        }
 
        div > ul > li > span
        {
        	display: block;
        	height: 400px;
        	width: 100px;
        	float: right;
        }
 
 
        div > ul > li > ul > li > span
        {
        	display: block;
        	height: 200px;
        	width: 100px;
        	float: right;
        }
 
        div > ul > li > ul > li > ul > li > span
        {
        	display: block;
        	height: 100px;
        	width: 100px;
        	float: right;
        }
 
        div > ul > li > ul > li > ul > li > ul > li > span
        {
        	display: block;
        	height: 50px;
        	width: 100px;
        	float: right;
        }