0

私は独学のコーダーであり、通常は自分で問題を理解することができますが、これは頑固なものです。私は友人のためにウェブサイトを再設計していて、彼のサイトのモバイルバージョンを正常にコーディングしましたが、デスクトップバージョンは難しいことがわかっています。

このサイトは、ホームバー、追跡用のデータベースです。酒飲み、ショット、ユニット、タブ。インデックスページは、Drinkers＆LastDrinkを購入したリーダーボードです。私の問題は、複数のWebブラウザーで機能するように、リーダーボードに飲酒者ランクを配置することです。

これは次のようになります:(スクリーンショット）

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

交互の背景は、結果のエコーを容易にする場合、私が喜んで廃棄するものです。

私はテーブル、div、ul / liを使ってみました。私が使ったもののサンプル：

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

しかし、それは大きな混乱として出てきたばかりです、誰かが助けることができますか？

4

1 に答える 1

1

私の意見では、これを行うためにテーブルを使用する必要があります。

交互の色を表示する場合は、nth-child（）疑似クラスを使用してtrに背景色を適用する必要があります。

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;
}
于 2013-02-05T17:19:29.957 に答える