css - 括弧の HTML/CSS 部分

Question

カップシステムを開発中なのですが、ブラケット部分についてアドバイスを頂きたいです。望ましい結果は次のようになります。

http://www.partyplanning101.com.php5-7.dfw1-1.websitetestlink.com/wp-content/uploads/2009/02/tornament_board.gif

テーブルではなく、CSS と組み合わせた div を使用してページを作成したいと思います。これを最も最適にするにはどうすればよいですか？これのサンプルを持っている人はいますか？

私は HTML/CSS の部分についてのみ助けを求めています。それ以外は何もありません。

score 10 · Accepted Answer

これは面白そうだったので、開発を始めました。今すぐ仕事に戻らなければならないので、これが私が得た距離です。基本はここから完成できるようにレイアウトされていると思いますが、暇なときにも完成させて、後で投稿する予定です。

http://jsfiddle.net/AcuPp/

アップデート：

終了-http://jsfiddle.net/AcuPp/3/

CSS

#container { 
    width: 800px; 
    height: 600px; 
    float: left; 
}

section { 
    width: 130px; 
    height: 520px; 
    float: left;
}

section > div { 
    width: 100px; 
    height: 20px; 
    border: 1px solid #000; 
    margin: 10px 0; 
    background: #73789F; 
    color: white; 
    padding: 10px 10px 10px 20px;
}

section > div:nth-child(2n) { 
    margin-bottom: 40px;
}

.connecter { 
    width: 30px; 
    height: 520px; 
    float: left; 
}

.line { 
    width: 30px; 
    height: 520px; 
    float: left; 
}

.connecter div { 
    border: 1px solid #000; 
    border-left: none; 
    height: 50px; 
    width: 100%; 
    margin: 80px 0 0 1px;
}

.connecter div:first-child { 
    margin: 32px 0 0 1px; 
}

.line div { 
    border-top: 1px solid #000; 
    margin: 133px 0 0 1px; 
}

.line div:first-child { 
    margin-top: 55px; 
}

#quarterFinals > div { 
    margin-top: 91px; 
}

#quarterFinals > div:first-child { 
    margin-top: 37px; 
}

#conn2 div { 
    margin-top: 133px; 
    height: 133px;
}

#conn2 div:first-child { 
    margin-top: 57px; 
}

#line2 div { 
    margin-top: 270px; 
}

#line2 div:first-child { 
    margin-top: 125px; 
}
#semiFinals > div { 
    margin-top: 230px; 
}
#semiFinals > div:first-child { 
    margin-top: 105px; 
}
#conn3 div { 
    margin-top: 125px; 
    height: 270px;
}

#line3 div { 
    margin-top: 270px; 
}

#final > div { 
    margin-top: 250px; 
}

</ p>

HTML

<article id="container">

<section>
    <div>Player 1</div>
    <div>Player 2</div>
    <div>Player 3</div>
    <div>Player 4</div>
    <div>Player 5</div>
    <div>Player 6</div>
    <div>Player 7</div>
    <div>Player 8</div>
</section>

<div class="connecter">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="line">
    <div>
    </div><div>
    </div><div>
    </div><div>
    </div>
</div>

<section id="quarterFinals">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

<div class="connecter" id="conn2">
    <div></div>
    <div></div>
</div>

<div class="line" id="line2">
    <div></div>
    <div></div>
</div>

<section id="semiFinals">
    <div></div>
    <div></div>
</section>

<div class="connecter" id="conn3">
    <div></div>
</div>

<div class="line" id="line3">
    <div></div>
</div>

<section id="final">
    <div></div>
</section>

</article>

score 1 · Accepted Answer

私の完全な実用的なソリューションはここにあります: http://jsfiddle.net/t9feh/

私は、誰が各試合に勝つかなど、後で少しずつ入ってくる可能性のあるデータで読みやすく、修正しやすい、純粋にセマンティックなマークアップを使用したソリューションを好みます。

そこで、プレイヤーがマッチにネストされ、マッチがラウンドにネストされたマークアップ構造から始めました。

HTML:

<div class="tournament">

    <div class="round quarter-finals">

        <div class="match" >
            <div class="player">Player 1</div>
            <div class="player winner">Player 2</div>
        </div>

        <div class="match">
            <div class="player winner">Player 3</div>
            <div class="player">Player 4</div>
        </div>    

        <div class="match">
            <div class="player">Player 5</div>
            <div class="player winner">Player 6</div>
        </div>

        <div class="match">
            <div class="player">Player 7</div>
            <div class="player">Player 8</div>
        </div>    

    </div>

    <div class="round semi-finals">

        <div class="match">
            <div class="player">Player 2</div>
            <div class="player winner">Player 3</div>
        </div>

        <div class="match">
            <div class="player">Player 6</div>
            <div class="player">Player 7</div>
        </div>    

    </div>

    <div class="round finals"> 

        <div class="match">
            <div class="player">Player 3</div>
            <div class="player"></div>
        </div>     

    </div>

    <div class="round"> 
        <div class="champion"> 
            <div class="player"></div>
        </div>
    </div>
</div>

「勝者」のクラスは任意のプレーヤーに追加でき、適切にスタイルが設定されることに注意してください。

そのときの主な課題は、コネクタを作成することです。セマンティックマークアップは、デザインフックがないことを意味します。これには BG 画像が必要です。これらを「一致」要素に配置するために、データ URL ( DataURL.netで使用したユーティリティを参照) を使用しました。

CSS:

.tournament{width:720px;}

.round{
       float:left;    
}

.player{
    font-family:arial;
    width:120px;   
    height:20px;
    padding:10px;
    background:#73789F;
    color:white;
}

.player.winner{background:green;}

.match{
    padding:5px 50px 5px 0px;
}

/*QUARTER-FINALS*/
.quarter-finals .match{
    height:100px;
    background:right top no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAABkAQMAAAD+JvEYAAAAA3NCSVQICAjb4U/gAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADEwLzEwLzEyGAKeIwAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAAAnSURBVCiRY/gPBgcYhjoNBPZQ/v4hQjeAHD0I3IGXRgpXqsbXEKEB2yGL0P7iVKIAAAAASUVORK5CYII=);
}
.quarter-finals .player{

}
.quarter-finals .player:first-child{
    margin-bottom:5px;
}

/*SEMI-FINALS*/
.semi-finals .match{
    padding-top:30px;
    height:185px;
    background:right top no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAC5AQMAAABQhv7pAAAAA3NCSVQICAjb4U/gAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADEwLzEwLzEyGAKeIwAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAAArSURBVDiNY/gPBgcYRumBpYHAHsrfP0oPKboBFHmDwB2jNAk0Un77PwxoAJbztvAUr3KAAAAAAElFTkSuQmCC);
}

.semi-finals .player:first-child{
    margin-bottom:70px;
}

/*FINALS*/
.finals .match{
    padding-top:85px;
    height:350px;
    background:top right no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAFeAQMAAAD9sN5nAAAAA3NCSVQICAjb4U/gAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADEwLzEwLzEyGAKeIwAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAAA0SURBVEiJY/gPBgcYRulRepQmngYCeyh//yg9So/Sg45uAGXSQeCOUXqUHrI0Uj33fxjQAEJS8U50LMSKAAAAAElFTkSuQmCC);
}

.finals .player:first-child{
    margin-bottom:180px;

}
/* CHAMP*/
.champion{padding-top:200px;}

score 0 · Accepted Answer

出来るよ。divの位置に応じて以下のコードを変更してください。

CSS

h1 {
    width:580px; 
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:18px;
    text-align:center;
    margin:40px auto;
 }
#container {
    width:580px; 
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:11px;
    text-align:center;
    margin:auto;
 }  
#container a {
    display:block;
    color:#000;
    text-decoration:none;
    background-color:#f6f6ff;
 }
#container a:hover {
    color:#900;
    background-color:#f6f6ff;
 }
#no1 {
    width:190px;
    line-height:60px;
    border:1px solid #000;
    margin:auto;
 }
#no1 a {
    height:60px;
 }
#line1 {
    font-size:0;
    width:1px;
    height:20px;
    color:#fff;
    background-color:#000;
    margin:auto;
 } 
#line2 {
    font-size:0;
    width:424px;
    height:1px;
    color:#fff;
    background-color:#000;    
    margin:auto;
 } 
#line3 {
    font-size:0;
    display:inline;
    width:1px;
    height:20px;
    color:#fff;
    background-color:#000;
    margin-left:78px;
    float:left;
 }  
#line4,#line5,#line6 {
    font-size:0;
    display:inline;
    width:1px;
    height:20px;
    color:#fff;
    background-color:#000;
    margin-left:140px;
    float:left;
 }
#no2 {
    display:inline;
    border:1px solid #000;
    clear:both;
    margin-left:35px;
    float:left;
 }
#no2 a,#no4 a,#no8 a {
    width:84px; 
    height:50px;
    padding-top:8px; 
 }  
#no3 {
    display:inline;
    border:1px solid #000;
    margin-left:58px;
    float:left;
 }
#no3 a,#no5 a,#no6 a,#no7 a,#no9 a {
    width:84px; 
    height:42px;
    padding-top:16px;  
 } 
#no4 {
    display:inline;  
    border:1px solid #000;
    margin-left:53px;
    float:left;
 }  
#no5 {
    display:inline;   
    border:1px solid #000;
    margin-left:55px;
    float:left;
 }  
#line7,#line13 {
    font-size:0;
    display:inline;
    width:1px;
    height:38px;
    color:#fff;
    background-color:#000;
    margin-left:219px;
    float:left;
 } 
#line8,#line14 {
    font-size:0;
    display:inline;
    width:1px;
    height:38px;
    color:#fff;
    background-color:#000;
    margin-left:281px;
    float:left;
 }  
#no6,#no8 {
    display:inline;  
    border:1px solid #000;
    margin-left:107px;
    float:left;
 }
#line9,#line11,#line15,#line17 {
    font-size:0;
    display:inline;
    width:26px;
    height:1px;
    color:#fff;
    background-color:#000;    
    margin-top:29px;
    float:left;
 }  
#line10,#line12,#line16,#line18 {
    font-size:0;
    display:inline;
    width:1px;
    height:60px;
    color:#fff;
    background-color:#000;
    float:left;
 } 
#line16,#line18 {
    height:30px;
 }
#no7,#no9 {
    display:inline; 
    border:1px solid #000;
    margin-left:169px;
    float:left;
 } 
.clear {
    clear:both;
 }

HTML

<div id="container">

<div id="no1"><a href="">Managing Director</a></div>
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
<div id="line4"></div>
<div id="line5"></div>
<div id="line6"></div>
<div id="no2"><a href="#">Sales &amp; Marketing Director</a></div>
<div id="no3"><a href="#">Production Director</a></div>
<div id="no4"><a href="#">Human Resources Director</a></div>
<div id="no5"><a href="#">Finance Director</a></div>
<div id="line7"></div>
<div id="line8"></div>
<div class="clear"></div>
<div id="no6"><a href="#">Factory Manager</a></div>
<div id="line9"></div>
<div id="line10"></div>
<div id="no7"><a href="#">Management Accountant</a></div>
<div id="line11"></div>
<div id="line12"></div>
<div class="clear"></div>
<div id="line13"></div>
<div id="line14"></div>
<div class="clear"></div>
<div id="no8"><a href="#">Quality Control Manager</a></div>
<div id="line15"></div>
<div id="line16"></div>
<div id="no9"><a href="#">Financial Accountant</a></div>
<div id="line17"></div>
<div id="line18"></div>
<div class="clear"></div>

</div>

</body>
</html>

こちらのデモhttp://jsfiddle.net/ZRJRj/1/

score 0 · Accepted Answer

SVG ( http://www.w3schools.com/svg/default.asp ) または Canvas ( http://en.wikipedia.org/wiki/Canvas_element )を見たいと思っています。

私はSVGを使います。JavaScript を使用してコネクタラインの終点を計算する必要があります。これはブラウザーで SVG を使用して描画し、単純なインターフェイスの背後にあるすべてをきれいに抽象化します。実際、JavaScript はアプリケーション全体を結合するものであり、SVG は単に描画するためのものであり、HTML と CSS はアプリケーションの他の部分を表示するのに役立ちます。

または、SVG を使用して決勝のラインナップ全体を表示することもできます。次に、JavaScript を使用してコンテンツを操作し、適切なチームタイトルと関係を表示します。

それは美しいでしょう。

css - 括弧の HTML/CSS 部分

4 に答える 4

HTML:

CSS:

Related

Reference