Organigramme en CSS

**darcy** · 01/12/2006, 10h56

Bonjour,

je cherche à créer un organigramme à en css et html.
Mais je ne sais pas comment commencer...

Se serait Un organigramme standard avec une douzaine de bloc

On procède comment pour le positionnement ?

Est facile à gérer ou avez vous un autres solution?

Merci pour vos réponses

**blueice** · 01/12/2006, 12h25

En utilisant Google ton ami, tu aurais trouvé :

http://www.ljouanneau.com/blog/2003/...age-web-facile

http://www.unice.fr/Radiochimie/lrsa...anigramme.html

http://www.enssup.gov.ma/org/DFC.html

...
...

**MasterOfChakhaL** · 01/12/2006, 19h36

Salut,

La première chose à faire est de structurer logiquement ton organigramme.
Quand tu auras le html qui reflète la structure logique, tu pourras te poser la question du css...

Pour l'instant tout ca est un peu vague... il nous faudrait plus de détails...

**darcy** · 04/12/2006, 09h06

Envoyé par MasterOfChakhaL

Salut,

La première chose à faire est de structurer logiquement ton organigramme.
Quand tu auras le html qui reflète la structure logique, tu pourras te poser la question du css...

Pour l'instant tout ca est un peu vague... il nous faudrait plus de détails...

Merci je vais jeter un oeil sur les liens et après je vois

**darcy** · 04/12/2006, 19h49

Bien je tiens çà dire merci, car comme d'hab, rien à dire, j'ai eu les infos que je voulais ici

J'ai piqué sur les liens et mon organigramme est presque terminé

Merci encore

Bonne continuation!

**MasterOfChakhaL** · 04/12/2006, 19h57

Ca pourrait être sympa alors de partager ta solution
Ca servira surement à d'autres

**darcy** · 14/12/2006, 09h08

Il n'est pas fini mais dès que c'est fait je poste le css et le html

**rogue-spectre** · 08/11/2011, 18h59

Bonjour à tous,

Depuis quelques jours je cherche comment faire un organigramme en css/html et je tombe souvent sur :
ljouanneau.com/standards/css/organigramme.html

J'ai un peu galéré, cherché d'autres façons de faire, mais c'était toujours bof. Je pense avoir trouvé ce que je souhaite en m'inspirant de l'exemple donné au dessus, mais sans rajouter de div dans le fichier html, mais… suspense… en utilisant les pseudo éléments "before" et "after". Désolé si j'arrive après la bataille mais je posterai rapidement un petit exemple de ce que peu donner.

Bonne soirée

**rogue-spectre** · 08/11/2011, 20h36

… et voici le test que j'ai fait

le code 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
37
38
39
40
41
42
43
44
45
46
47
48
49
 
   <!DOCTYPE html >
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
	<link rel="icon" type="image/png" />
  </head>
  <body>
 
	<div id="council_test">
	  <div class="Oneguy" id="council_president">
		<div class="Oneguy_presentation">
		  <h3>Président</h3>
		</div>
	  </div>
 
	  <div class="Oneguy" id="council_vice-president">
		<div class="Oneguy_presentation">
		  <h3>vice-Président</h3>
		</div>
	  </div>
 
	  <div class="Oneguy" id="council_treasurer">
		<div class="Oneguy_presentation">
		  <h3>Trésorier</h3>
		</div>
	  </div>
 
	  <div class="Oneguy" id="council_vice-treasurer">
		<div class="Oneguy_presentation">
		  <h3>vice-Trésorier</h3>
		</div>
	  </div>
 
	  <div class="Oneguy" id="council_secretary">
		<div class="Oneguy_presentation">
		  <h3>Secrétaire</h3>
		</div>
	  </div>
 
	  <div class="Oneguy" id="council_vice-secretary">
		<div class="Oneguy_presentation">
		  <h3>vice-Secrétaire</h3>
		</div>
	  </div>
	</div>
  </body>
</html>

et le 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
 
body{
	background-color:red;
}
/*
   Affichage des presentations des choristes
*/
 
.Oneguy
{
	background: white;
	border-radius: 10px;
	padding: 10px;
	position: relative;
	height:85px;
	width: 255px;
 
	position: relative;
}
 
.Oneguy_avatar
{
	background-color:white;
	width:75px;height:75px;
	padding:5px;
	box-shadow:0 0 1px black;
	float:left
 
}
 
.Oneguy_presentation
{
	text-align:center;
	width: 150px;
	float:left;
	margin-left: 10px;
	margin-top: 10px;
	padding: 5px;
}
 
 
/*
  Organigramme du conseil
*/
#council_test
{
	position: relative;
	width: 700px;
	height: 600px;
	background:green;	
}
 
#council_president{
	position:absolute;
	left:213px;  
	margin:0;
	z-index: 1000;
}
 
#council_vice-president{
	position:absolute;
	left:213px;  
	top: 125px;
	margin:0;	
}
 
#council_treasurer{
	position: absolute;
	top:275px;
	z-index:500;
 
}
#council_vice-treasurer{
	position: absolute;
	top:400px;
 
}
 
#council_treasurer:before{
	position: absolute;
	background: none;
	content:" ";
	height:200px;
	width:200px;
	top:-202px;
	left: 125px;
	border-top: 2px solid black;
	border-left: 2px solid black;
	border-radius: 20px 0 0 0;
}
 
#council_secretary{
	position: absolute;
	right:0;
	top:275px;
	z-index: 500;
}
 
 
#council_vice-secretary{
	position: absolute;
	right:0;
	top:400px;
}
 
 
#council_secretary:before{
	position: absolute;
	background: none;
	content:" ";
	height:200px;
	width:200px;
	top:-202px;
	right: 125px;
	border-top: 2px solid black;
	border-right: 2px solid black;
	border-radius: 0 20px 0 0;
}
 
#council_vice-secretary:before
{
	content:"";
	position:absolute;
	height:50px;
	width:0;
	border-right:2px solid black;
	top: -50px;
	right: 125px;
}
 
 #council_vice-treasurer:before
{
	content:"";
	position:absolute;
	height:50px;
	width:0;
	border-right:2px solid black;
	top: -50px;
	left: 125px;
}
 
#council_vice-president:before
{
	content:"";
	position:absolute;
	height:50px;
	width:0;
	border-right:2px solid black;
	top: -50px;
	right: 50%;
}

l'idée reste la même que pour le tuto dont je parlais dans mon post précédent mais on ne surcharge pas le html. Pour résumer voici ce que j'ai fais

- création d'une boite englobante pour l'organigramme
- création de boites pour les différentes fonctions,
-positionnement absolu de ces boites-fonctions en absolu par rapport à la boite englobante,
et maintenant l'astuce
- utilisation des pseudo élément :before et :after qui me permettent ici de créer un cadre (width et height) positionné en absolu par rapport à une boite-fonction, les lignes étant ici matérialisée à l'aide de propriétés "border" du cadre… dans cette histoire j'ai donc content=" "; pour le pseudo élément, mais rien ne vous empêche de mettre des images pour faire les lien, bien entendu il faudra qu'il y ai de la transparence sinon, ça devrait faire mal aux dents.
- Enfin un petit coup de z-index pour éviter d'éventuels liens qui passeraient au dessus d'une boite-fonction.

En espérant que ça puisse aider quelqu'un

Bonne soirée

PS : vous m'excuserez si le css n'est pas tip top, je ne suis pas un pro.

Organigramme en CSS

CSS

Discussions similaires

Partager

Partager