Bonjour à tous,
J'essaie d'éviter de trop poser de questions en cherchant par moi-même. Mais là il y a un soucis avec un code que j'ai trouvé dont je ne comprend pas l'origine.
Je suis entrain de créer des petits arbres généalogiques pour des personnages de séries télévisées ou films pour aider à comprendre les liens. Je commence avec Game of Throne car avec cette série c'est un gros "bordel". Quand je l'ai commencée pour comprendre qui était qui pour qui je m'étais amusée avec un logiciel de généalogie.
Les Targaryens sont des gens bizarres... 
Bref, j'ai trouvé un code simple mais efficace qui correspond à mes besoins : http://thecodeplayer.com/walkthrough/css3-family-tree
Le problème c'est que le créateur du code ne semble plus donner de support. Donc je m'adresse à vous.
Pour le moment sur mon site cela donne cela : http://ddstv.fr/DaenerysTargaryen.php
Mon problème c'est que le code de l'arbre généalogique se superpose aux autre éléments au lieu de faire s'allonger la page au niveau de la zonne blanche.
Normalement, le nom de l'auteur de la fiche et la date de création devrait être sous l'arbre généalogique.
Je pense qu'il s'agit d'un tout petit élément de css que je n'ai pas compris.
J'ai pensé à la propriété Z-index mais je ne suis pas certaine que ce soit la bonne chose.
Concernant le code utilisé voila ce que j'ai:
Html:
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
| <div class="contour">
<p><span class="titretexte1">Arbre généalogique :</span>
<br>
<div class="tree">
<ul>
<li> <a href="#">Parent</a>
<ul>
<li> <a href="#">Child</a>
<ul>
<li> <a href="#">Grand Child</a> </li>
</ul>
</li>
<li> <a href="#">Child</a>
<ul>
<li><a href="#">Grand Child</a></li>
<li> <a href="#">Grand Child</a>
<ul>
<li> <a href="#">Great Grand Child</a> </li>
<li> <a href="#">Great Grand Child</a> </li>
<li> <a href="#">Great Grand Child</a> </li>
</ul>
</li>
<li><a href="#">Grand Child</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<br />
<br />
<div class="auteur"> <b>Auteur</b>: Ninouee
<br> Ecrit le 06/06/2015 </p>
</div>
</div> |
Css:
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
| /*arbre généalogique début*/
.tree ul {
padding-top: 20px;
position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.tree li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/*We will use ::before and ::after to draw the connectors*/
.tree li::before, .tree li::after{
content: '';
position: absolute; top: 0; right: 50%;
border-top: 1px solid #ccc;
width: 50%; height: 20px;
}
.tree li::after{
right: auto; left: 50%;
border-left: 1px solid #ccc;
}
/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
display: none;
}
/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}
/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.tree ul ul::before{
content: '';
position: absolute; top: 0; left: 50%;
border-left: 1px solid #ccc;
width: 0; height: 20px;
}
.tree li a{
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before{
border-color: #94a0b4;
}
/*arbre généalogique fin*/ |
J'ai seulement retiré la propriété
* {margin: 0; padding: 0;}
du css car ça me faisait des interférences avec mes UL et LI situés dans d'autres endroits de ma page.
Auriez-vous une idée?
Je vous remercie d'avance. 
Arbre généalogique - problème d'affichage
Répondre avec citation
Envoyé par ninouee
Partager