Discussion :

[javazeeer]

Bonjour,

Je dois faire un organigramme en version web, de cette forme là :



Malheureusement, j'ai chercher sur internet j'ai trouvé des organigramme qui n’était pas de la même forme.
Donc j'ai essayé de les modifier mais je n'ai pas les compétence pour.(je suis pas un expert en css ).

Quelqu'un peut il m'aider ?

Merci d'avance.

[ParisElliot]

Bonjour,

J'ai trouvé ça pour toi : http://codepen.io/chrisbenjamin/pen/qbqORo

Je pense que ça doit pas être trop compliqué a adapter

[javazeeer]

Merci, je vais testé ça et je vous tient au courant !

[javazeeer]

Je galère à gérer les traits, c'est trop compliqué !

[ParisElliot]

Essaye ça :

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
22
23
24
25
26
27
28
29
 
<!-- Copied from: http://thecodeplayer.com/walkthrough/css3-family-tree -->
 
<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>
        </li>
        <li>
          <a href="#">Child</a>
        </li>
        <li>
          <a href="#">Child</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

[javazeeer]

Sa parait pas mal, ça donne ça :


Je vais essayé de le rempli avec mes données voir le resultat finale.

Merci !

[ParisElliot]

Oui, aprés au niveau des traits, tu peux gérer la taille en jouant sur ça :

Code css :

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

1
2
3
4
5
 
.tree li 
{
	padding: 20px 5px 0 5px;
}

[javazeeer]

parfait j'y suis parvenue en jouant avec le css !

Merci encore !

[javazeeer]

Cela fait 3/4 heures ayant obtenu l'organigramme souhaité que j'essaye maintenant de le mettre en responsive et l'agrandir ...
J'ai tout essayer ... sans sucés, si quelqu’un pourrait m'indiquer ce qu'il faut modifier dans le css

[NoSmoking]

Bonjour,

... si quelqu’un pourrait m'indiquer ce qu'il faut modifier dans le css ...

la structure n'est pas « responsive », ce n'est pas le CSS qu'il te faut modifier mais l'approche et surtout bien savoir ce que tu veux obtenir en réduisant la largeur de ta page.

[javazeeer]

Bonjour,

Donc j'ai crée récemment une page web avec un organigramme, j'ai pas mal galérer mais j'ai réussi finalement à finir l'organigramme.
Cependant, celle-ci n'est pas responsive, je m'explique :

il ressemble a ça quand la pages est assez grandes


Dés que je rétrécie il passe à ça :


J'aimerais savoir, comment je peut faire pour qu'il reste a ça premier forme ?

[javazeeer]

Voici mon CSS :

Code :

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
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
* {margin: 0; padding: 0;}
.tab2
{
margin : auto;
border-radius : 5px;
}
.tree
{
}
.titreprojet
{
	width : 335px;
}
h3
{
	color : black;
}
img
{
	width : 85px;
	height : 80px;
	border-radius : 5px;
	float : left;
}
 
.tree 
{
margin-left : auto;
margin-right : auto;
}
.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;
	/* AUGMENTER LA TAILLE DES LI !!!! */
	width : 350px;
	height : 80px;
	background: #c8e4f8;
	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;
}*/

Voici mon HTML :

Code :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" media="screen, print" href="style.css" /> 
</head>
<body> 
 
	<div class="tree">
	  <ul>
		<li>
		  <a href="#">	  <img src="images/test.jpg" /><h4>test</h4> </br> <h3> test  test</h3> </a>
		  <ul>
			<li>
			  <a href="#">  <img /> <h4>test</h4> </br> <h3> test test </h3> </a>
			  <ul>
				<li>
				  <a href="#">  <img src="images/test.jpg" /><h4>test</h4> </br>  <h3>test test </h3> </a>
				</li>
			  </ul>
			</li>
			<li>
			   <a href="#">  <img src="images/test.png" /><h4>test</h4> </br>  <h3>test test </h3> </a>
			</li>
			<li>
			  <a href="#">  <img src="images/test.jpg" /> <h4>test</h4> </br>  <h3>test test</h3></a>
			</li>
			<li>
			 <a href="#">  <img src="images/test.jpg" /> <h4>test</h4> </br> <h3>test tes</h3></a>
			</li>
		  </ul>
		</li>
	  </ul>
	</div>
 
</body>