Organigramme en HTML et CSS ?

Version imprimable

01/08/2014, 11h36
Tillo

1 pièce(s) jointe(s)

Organigramme en HTML et CSS ?

Bonjour à tous,

Pour l'un de mes projets, j'ai besoin d'afficher un petit arbre généalogique, un peu comme un petit organigramme.
Il contient juste un individu et ses 2 parents, le contenu de cet arbre est généré dynamiquement grâce à du PHP et une base de données.

J'ai bricolé quelque chose de très moche avec du HTML et du CSS :
En bleu les bordures qui seront affichées, toutes les autres seront masquées.

Pièce jointe 152522

Mon idée a consisté à afficher un tableau de 6x6 puis à jouer avec les bordures, les colspans et les rowspan.

J'aimerai savoir si il n'existe pas une meilleure méthode, quelque chose qui serait plus léger.

A bientôt,
Alexis
01/08/2014, 13h03
Vil'Coyote

potentiellement je dirai utilisation de div ou de caneva.
01/08/2014, 16h43
grafimages

Pas mieux, les div et une bonne dose de CSS suffiront et ce sera plus propre et plus léger qu'un tableau.

C'est un problème amusant — surtout du côté de HTML ! Perso, j'aurais aimé utiliser DL, mais les SPAN sont invalides à l'intérieur.

Je propose donc cette solution, utilisant le schema de microdonnées PERSON :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Diagram</title>
</head>
<body>
 
<p>foo</p>
 
<section class="diagram" aria-labelledby="a"
  itemscope itemtype="http://schema.org/Person">
  <p class="person parent"
    itemprop="parent" itemscope itemtype="http://schema.org/Person">
    <span itemprop="name">Parent 1A</span>
  </p>
  <p class="person parent"
    itemprop="parent" itemscope itemtype="http://schema.org/Person">
    <span itemprop="name">Parent 2A</span>
  </p>
  <span class="fork clear"></span>
  <span class="line"></span>
  <h1 class="person child" id="a" itemprop="name">Child A</h1>
</section>
 
<p>bar</p>
 
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.person {
  margin: 0;
  border: 2px solid blue;
  width: 20%;
  height: 8em;
  line-height: 8em;
  text-align: center;
}
.child {
  margin: auto;
  font-weight: normal;
  font-size: 1em;
}
.parent {
  float: left;
}
.parent + .parent {
  float: right;
}
.fork {
  display: block;
  margin: auto;
  border: 2px solid blue;
  border-top-width: 0;
  width: 80%;
  height: 4em;
}
.line {
  display: block;
  border-right: 2px solid blue;
  width: 50%;
  height: 4em;
}
.clear {
  clear: both;
}