Question

I’m a self taught coder and usually I can figure out problems for myself but this ones a stubborn one. I’m redesigning a website for my friend and I’ve successfully coded the mobile version of his site, but the desktop version is proving to be difficult.

The site is a database for a home bar, tracking; Drinkers, Shots, Units and Tabs. The index page is a leaderboard with Drinkers & Last Drink bought. My problem is positioning the Drinkers Ranks on the leaderboard to work across multiple web browsers.

It’s meant to look like this: (screenshot)

http://giblets-grave.co.uk/previews/1400x900_GG-desktop_design_final.jpg

The alternating background is something I’m willing to scrap if it makes echoing results easier.

I’ve tried using tables, divs, ul/li’s.. sample of what I used:

<table cellpadding="0" cellspacing="0">
<col width="85px" />
<col width="65px" />
<col width="65px" />
   <tr>
      <th colspan="3" align="left">Chris Clarkson</th>
   </tr>
   <tr>
      <td>
         <div class="crop round-five body-shadow" >
            <img src="uploads/1.jpg" class="" />
         </div>
      </td>
      <td>
         <ul><h2>382.73</h2><li>units</li></ul><br />
      </td>
      <td>
         <ul><h2>613</h2><li>shots</li></ul><br />
      </td>
   </tr>
</table>

but its just coming out as a big mess, can anyone help?

Answer 1

Definitely should be using table to do this in my opinion.

As for displaying the alternating colors, you would want to apply a background color to the tr’s using nth-child() pseudo-class.

JSFIDDLE: http://jsfiddle.net/XYh7f/

HTML:

<div class="container">
<div class="leaderboard">
<table id="main">
    <tr>
        <td>Leaderboard</td>
    </tr>
    <tr>
        <td>
            <table class="client">
                <tr> 
                    <th colspan="3">Chris Clarkson</th>
                </tr>
                <tr>
                    <td>IMG</td>
                    <td>267.26 units</td>
                    <td>457 shots</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table class="client">
                <tr> 
                    <th colspan="3">Chris Clarkson</th>
                </tr>
                <tr>
                    <td>IMG</td>
                    <td>267.26 units</td>
                    <td>457 shots</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</div>
<div class="drinks">
    <table id="main-data">
        <tr>
            <td class="data-title"><h2>Last Drinks Served</h2></td>
        </tr>
        <tr>
            <table class="data">
                <tr>
                    <td class="data-time">Time</td>
                    <td class="data-shots">Shots</td>
                    <td class="data-drink">Drink</td>
                    <td class="data-drinker">Drinker</td>
                    <td class="data-date">Date</td>
                </tr>
                <tr>
                    <td class="data-time">Time</td>
                    <td class="data-shots">Shots</td>
                    <td class="data-drink">Drink</td>
                    <td class="data-drinker">Drinker</td>
                    <td class="data-date">Date</td>
                </tr>
                <tr>
                    <td class="data-time">Time</td>
                    <td class="data-shots">Shots</td>
                    <td class="data-drink">Drink</td>
                    <td class="data-drinker">Drinker</td>
                    <td class="data-date">Date</td>
                </tr>
            </table>
        </tr>
    </table>
</div>
</div><!-- END CONTAINER -->

CSS:

/* CONTAINER STYLES */
.container {
    width: 960px;
}

.leaderboard {
    float: left;
}

.drinks { 
    float: left;
}

/* LEADER BOARD STYLES */
table {
    color: #eee;
    width: 200px;
    background: none;
}

tr { background: none; }
td { background: none; }

#main {
    text-align: center;
}

#main tr:nth-child(odd) {
    background: #444;
}

#main tr:nth-child(even) {
    background: #555;
}

#main tr td .client tr {
    background: none;
}

/* LAST DRINKS SERVED STYLES */

#main-data {
    width: 740px;
}

#main-data tr:nth-child(odd) {
    background: #444;
}

.data {
    width: 740px;
}

.data tr:nth-child(odd) {
    background: #222;
}

.data td {
    border-right: 1px solid #000;
}

.data tr:nth-child(even) {
    background: #333;
}

.data-title {
    padding: 0 0 0 60px;
}

.data-time {
    text-align: right;
    width: 120px;
}

.data-shots {
    text-align: right;
    width: 60px;
}

.data-drink {
    text-align: center;
    width: 240px;
}

.data-drinker {
    text-align: left;
    width: 200px;
}

.data-date {
    width: 140px;
}