Discussion :

[MagixKiller]

Bonjour!

Aujourd'hui un problème de taille se présente a moi.

Je cherche à faire un arbre de tournoi horizontal (La finale est a droite) en CSS, joli, sans utiliser de table, avec une base en HTML comme suit:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="tree">
    <div class="level">
        <div class="item">
            <span class="title">Titre du match</span>
        </div>
        <!--
             et ici on peut encore rajouter des niveaux
             en rajoutant des <div class="level">
        -->
    </div>
</div>

Le problème est que je ne connais pas à le nombre de matchs dans mon arbre car c'est généré en PHP: le code CSS doit s'adapter a tous les cas de figure.

L'idéal serait d'avoir un truc comme ca:


Est-ce possible?

Si oui, Comment???

Merci, bonne journée!

[rodolphebrd]

Bonjour,

une possibilité serait de passer par le modèle tabulaire:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="tree">
    <div class="level">
        <div class="item">
          <p>équipe 1 VS équipe 8</p>
          <p>équipe 4 VS équipe 5</p>
          <p>équipe 2 VS équipe 7</p>
          <p>équipe 3 VS équipe 6</p>
       </div>
    </div>
      <div class="level">
        <div class="item">
          <p>équipe 1 VS équipe 5</p>
          <p>équipe 2 VS équipe 6</p>
        </div>
    </div>
    <div class="level">
        <div class="item">
          <p>équipe 1 VS équipe 6</p> 
        </div>
     </div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
#tree{
  display:table;
  width:60%;
  vertical-align:middle;
}
.level{
  display:table-cell;
  width:33%;
  vertical-align:middle;
}

http://codepen.io/anon/pen/sDGbt

[MagixKiller]

Ceci semble être une possibilité intéressante, cependant une question se pose: comment respecter l'espacement vertical de façon a ce que chaque item soit entre les deux items qui le précèdent, comme sur l'image ci-dessus?
Bonne soirée, merci

[Invité]

Bonjour,

Tu veux qu'on t'emballe la solution dans un joli paquet-cadeau et qu'on te la dépose sous le sapin ?
Tu crois au Père Noël ??

Il va falloir faire toi-même des recherche et nous faire des propositions de code !