css assistance to draw playoff brackets - php

Question

I am trying to have a "playoff bracket" on a wordpress site page. The brackets will be fed by database and PHP code to populate them with proper opponents and winners and losers each week.
So I am essentially trying to draw the brackets in some fashion on the page. I am working on it here: http://www.jerseybasketballassociation.com/1a-test-logo/
this is not perfect, just working on it; I only have the first two weeks on there…
if you do not know what I mean by "playoff bracket" you can see an example here:
http://printyourbrackets.com/8seeded.html
basically what I have is OK; but it would be much improved if I somehow was able to put some lines between the two weeks so you could see teams 1 and 8; they have lines that show the winner advancing to second week (labeled as team 1)
Does anyone have any ideas on how I would produces those lines using CSS/html?
I will also paste in the HTML and CSS code that puts this on the page:
<style>
#round1_boxa {border: 1px solid gray; padding: 2px; margin-bottom: 27px;}
#round1_boxb {border: 1px solid gray; padding: 2px; margin-bottom: 54px;}
#round2_boxa {border: 1px solid gray; padding: 2px; margin-top: 27px; }
#round2_boxb {border: 1px solid gray; padding: 2px; margin-top: 108px;}
#round2_boxc {border: 1px solid gray; padding: 2px; margin-top: 108px;}
#round2_boxd {border: 1px solid gray; padding: 2px; margin-top: 108px;}
#round1_cont {width: 150px; float: left;}
#round2_cont {width: 150px; float: left; margin-left: 20px;}
#game_box {margin-bottom: 30px;}
</style>
<div id="round1_cont">
<div id="game_box">
<div id="round1_boxa">
Team 1
</div>
<div id="round1_boxb">
Team 8
</div>
</div>
<div id="game_box">
<div id="round1_boxa">
Team 4
</div>
<div id="round1_boxb">
Team 5
</div>
</div>
<div id="game_box">
<div id="round1_boxa">
Team 3
</div>
<div id="round1_boxb">
Team 6
</div>
</div>
<div id="game_box">
<div id="round1_boxa">
Team 2
</div>
<div id="round1_boxb">
Team 7
</div>
</div>
</div>
<div id="round2_cont">
<div id="round2_boxa">
Team 1
</div>
<div id="round2_boxb">
Team 4
</div>
<div id="round2_boxc">
Team 2
</div>
<div id="round2_boxd">
Team 3
</div>
</div>
So I am trying to see if anyone has any ideas on how to draw those lines that go from box to box to delineate the advancing teams. Thanks so much...

Answer 1

You need to rethink the task and change markup.
<div class="c1">
<div class="team">1</div>
<div class="team">2</div>
<div class="team">3</div>
<div class="team">4</div>
</div>
<div class="c2">
<div class="block first">semi1</div>
<div class="block">semi2</div>
</div>
<div class="c3">
<div class="block">final</div>
</div>
<div class="c4">
<div class="block">winner</div>
</div>
CSS:
* {box-sizing: border-box}
.team {
text-align: right;
line-height: 40px
}
.c1, .c2, .c3, .c4 {
float: left;
width: 100px
}
.c1 .team {
width: 100px;
height: 40px
}
.c2 .block, .c3 .block {
margin-top: 40px;
height: 40px;
width: 100px;
border-top: solid 2px #000;
border-right: solid 2px #000;
border-bottom: solid 2px #000;
text-align: right;
line-height: 40px;
}
.c2 .block.first {
margin-top: 20px;
}
.c3 .block {
height: 80px;
line-height: 80px;
}
.c4 .block {
margin-top: 60px;
text-align: right;
border-bottom: solid 2px #000;
}
Full example here
http://jsfiddle.net/fncxsezn/