css assistance to draw playoff brackets

1 Views

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/

Read More

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…

Post Views: 1

Related posts

Leave a Reply

1 comment

  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/