Alignement JS+CSS

Version imprimable

Alignement JS+CSS

Bonjour,

Je me heurte à un petit problème qui fait intervenir à la fois CSS, Javascript et HTML, mais je me dis que c'est surement dans cette section que je trouverai la solution :)

Mon application est en php et permet d'afficher une arborescence de fichier.
Cette arborescence ressemble un peu à ça :

- Racine Date de la dernière modif Numero de Revision

- DossierFils Date de la dernière modif Numero de Revision

enfant.txt Date de la dernière modif Numero de Revision
enfant2.php ....
+ DossierFils2 ....

Là ou vous voyez des "-", on peu cliquer dessus et faire "disparaitre" le bloc, ou un "+" pour les faire apparaitre, via la fonction Javascript qui suit :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function expand(n) { var node = n; while ( node.nodeName != "UL" ) node = node.nextSibling; if ( node.style.display == 'block' ) { node.style.display = 'none'; n.src = 'images/plus.gif'; } else { node.style.display = 'block'; n.src = 'images/minus.gif'; } }
Tous les fichiers contiennent des liens vers une page permettant de les afficher.

Dans mon code, pour l'affichage d'un dossier je fais appel à ce code :
Code:

1 2 $espace2 = 403 - 60 * $cpt_arbo ; echo '<li><img src=\'images/minus.gif\' onclick="expand(this)"><span class=\'dossier\'>'.$nom.'</span><span class=\'date\' style=\'margin-left:'.$espace2.'px\'>'.$date.'</span><span class=\'revision\' style=\'margin-left:63px\'>'.$rev.'</span></li>' ;
Pour l'affichage d'un fichier ( qui ne peut donc pas contenir de fils ), j'utilise une table à l'intérieur d'un <li>, c'est peut-être pas très beau, mais ça me permet d'aligner correctement les parties "Date" et "Revision". Le code est le suivant :
Code:

1 2 $espace = 435 - 40 * $cpt_arbo ; echo '<li><table cellpadding=0 cellspacing=0><tr><td width='.$espace.'px><img src=\'images/fichier_non_modif.png\' alt=\''.$nom.' est un fichier non modifié\' ><a href=\'Controleur_Gestion_Fichier.php?type='.$type.'&dst='.$url.'\'>'.$nom.'</a></td><td width=140px><span class=\'date\'>'.$date.'</span></td><td><span class=\'revision\'>'.$rev.'</span></td></tr></table></li>' ;
Note : $cpt_arbo me permet de savoir à quel niveau d'arborescence je suis et d'augmenter le retrait en conséquence.

Mon problème est le suivant :
Pour faire fonctionner mon javascript je ne peut utiliser qu'une balise <li> avec un contenu de type %inline, ce qui ne concerne QUE les dossiers. Mais comment avoir un alignement des colones "Date" et "Revision", sachant que je ne peux pas vraiment les positionner avec des <span> ( le positionnement dépend de la taille du nom du dossier ) ?
Ou alors, comment modifier mon Javascript afin de pouvoir l'utiliser dans le contexte d'un fichier, ie une <table> contenue dans un <li> ?

22/04/2008, 13h19
MasterOfChakhaL

Salut,

A priori, ton problème concerne l'alignement d'éléments. Pour simplifier la chose pour tout le monde, je te suggère de nous donner le code HTML généré pour un bout de l'arborescence et le css associé.

Ok ok, mais disons que le code risque d'être un peu incompréhensible, même épuré....

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
37
38
39
40
41
42
43
44
 
<div id='repertoire'>
	<table cellpadding=0 cellspacing=0>
		<tr>
			<th width=400px></th>
			<th width=150px>Date de Modification</th>
			<th>Revision</th>
		</tr>
	</table>
	<uL>
		<li>
			<img src='images/minus.gif' onclick="expand(this)" >
			<span class='dossier'>Tags</span>
			<span class='date' style='margin-left:349px'>10/04/2008</span>
			<span class='revision' style='margin-left:63px'>14</span>
		</li>
		<uL>
			<li>
				<img src='images/minus.gif' onclick="expand(this)" >
				<span class='dossier'>Projet1</span>
				<span class='date' style='margin-left:296px'>10/04/2008</span>
				<span class='revision' style='margin-left:63px'>14</span>
			</li>
			<uL>
				<li>
					<table cellpadding=0 cellspacing=0>
						<tr>
							<td width=345px>
								<img src='images/fichier_non_modif.png' >
								<a href='Controleur_Gestion_Fichier.php?type=fn&dst=./Tags/Projet1/toto.txt'>toto.txt</a>
							</td>
							<td width=140px>
								<span class='date'>10/04/2008</span>
							</td>
							<td>
								<span class='revision'>14</span>
							</td>
						</tr>
					</table>
				</li>
			</uL>
		</uL>
	</uL>
</div>

Le problème en fait c'est de trouver comment concilier <span>X</span> et <table><tr><td>X</td></tr></table>. Mais si vous trouvez une solution pour changer le JavaScript ça résoud tout également.

Et pour le CSS ( j'ai essayé de limiter à l'essentiel, il peut manquer des éléments ) :

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
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
 
 
uL {
	list-style-type : none ;
}
 
li {
	margin-left : -10px ;
}
.date {
	font-family : 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif ;
	font-size : 13px ;
	color : #333333 ;
	font-style : italic ;
	vertical-align : bottom ;
 
}
.revision {
	font-family : 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif ;
	font-size : 13px ;
	color : #333333 ;
	font-weight : none ;
	vertical-align : bottom ;
}
.dossier {
	font-family : 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif ;
	font-weight : bold ;
	font-size : 13px ;
	color : #777777 ;
}
#repertoire {
	float : left ;
	width : 95% ;
	font-family : 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif ;
}
 
td {
	vertical-align : top ;
}
 
a:link {
	color : black ;
	text-decoration : none ;
	font-size : 14px ;
	font-weight : bold ;
}
a:visited {
	color : black ;
	text-decoration : none ;
	font-size : 14px ;
	font-weight : bold ;
}
a:hover {
	text-decoration : underline ;
	font-size : 14px ;
	font-weight : bold ;
}
a:active {
	color : red ;
	text-decoration : none ;
	font-size : 14px ;
	font-weight : bold ;
}

Je n'ai mis qu'un dossier, un sous dossier et un fichier dans le code pour simplifier, mais les dossiers doivent être alignés au fichier ( tous les fichiers s'alignent pareil.

Voici un screen :
http://img186.imageshack.us/img186/9964/screenak1.png