Bonjour,

je souhaite réaliser un affichage de logs de debug que je suis en train de développer pour une application. Chaque opération loguée est un bloc qui peut contenir lui même plusieurs opérations qui elle même peut en contenir etc.

J'aimerais qu'au final ça ressemble à ça :


Je suis donc confronté à un problème de récursivité et j'aimerais réaliser le tout entièrement en CSS (pas de code serveur) puisque le fichier de log est en XML, donc j'aimerais juste appliquer une transformation XSLT pour avoir un visuel sympa. Avant d'en arriver là, je fais une maquette en statique et je suis déjà confronté à des problèmes que je n'arrive pas à résoudre.

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
 
<div class="operation"  style="background-color:green;">
	<div class="titre">Opération 1</div>
	<div class="process">Process : 15</div>
	<div class="duree">Durée : 250 ms</div>
 
	<div class="operation"  style="background-color:red;">
		<div class="titre">Opération 1-1</div>
		<div class="process">Process : 15</div>
		<div class="duree">Durée : 200 ms</div>					
	</div>
	<div class="operation"  style="background-color:red;">
		<div class="titre">Opération 1-2</div>
		<div class="process">Process : 15</div>
		<div class="duree">Durée : 50 ms</div>
	</div>
</div>
<div class="operation"  style="background-color:yellow;">
	<div class="titre">Opération 2</div>
	<div class="process">Process : 15</div>
	<div class="duree">Durée : 250 ms</div>		
</div>
Les blocs "operation" sont inclus dans d'autres blocs "operation" de manière récursive.

Mon CSS est pour l'instant tout simple :

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
 
.titre{
				font-size: 1.5em;
			}
 
			.process{
				width:50%;
				float:left;
			}
 
			.duree{
				width:50%;
				float:left;
			}
 
			.operation{			
				float: left;
				min-width: 300px;
				text-align: center;				
			}
J'aimerais que chaque bloc operation fasse au minimum 300px et que du coup l'élément père s'agrandisse le cas échéant. par exemple que le bloc "Opération 1" fasse 600px car il contient 2 blocs fils donc 2x 300px.
Voici le résultat :



Le bloc père est systématiquement plus large que la somme des blocs fils. Et plus je rajoute de récursivité, plus le phénomène s'amplifie.
Est-ce que quelqu'un voir de quoi ça peut venir ?

Toute aide est la bienvenue !

Merci !



Edit : en fait, j'ai juste englobé les balises "process" et "duree" dans une autre div et ça résoud mon problème ...