Discussion :

[nektarfl]

Bonjour,

Pas facile de faire un titre qui correspond à mon problème.

J'avais une table avec 3 colonnes et un lien pour la ligne (table créée dynamiquement à partir d'une base de données)

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="liste">
   <div class="ligne" onclick="faitletravail(1)">
      <span></span>
      <span></span>
      <span></span>
   </div>
   <div class="ligne"  onclick="faitletravail(2)">
      <span></span>
      <span></span>
      <span></span>
   </div>
   etc...
</div>

dans le CSS, j'avais

Code :

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

1
2
3
#liste div { display:table-row;}
 
#liste div span {	display:table-cell;}

J'avais une table bien organisée

Mais j'ai eu la bonne idée de vouloir ajouter une croix pour avoir la possibilité d'effacer la proposition de travail à faire et là, plus de mise en page possible

Soit je mets la croix dans la ligne intégrée à un <span>, mais le onclick correspondant ne fonctionne pas, c'est le onclick de la ligne qui prend le dessus alors j'ai changé la structure de ma ligne, mais j'ai alors perdu la mise en colonne.

structure de la page actuellement modifiée, mais je n'arrive pas à m'en sortir avec le CSS nécessaire pour avoir mes croix sur la même ligne que le texte correspondant et mes cases alignées dans 3 colonnes bien visibles.

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
<div id="listcertifaimprimer">
   <div>
      <img src="http://standard.ressorts.org/images/publish_x.png" onclick="effacecertlist(125)" width="12" height="12" title="Effacer la demande de ce certificat">
      <span onclick="" class="txtlistebl">
         <span></span>
         <span></span>
         <span></span>
      </span>
   </div>
   <div>
      <img src="http://standard.ressorts.org/images/publish_x.png" onclick="effacecertlist(49)" width="12" height="12" title="Effacer la demande de ce certificat">
      <span onclick="" class="txtlistebl">
         <span></span>
         <span></span>
         <span></span>
      </span>
   </div>
</div>

actuellement, mon CSS correspondant :

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
#listcertifaimprimer div span {
	position: relative;
	display:table-row;
}
 
#listcertifaimprimer div span:hover {
	position: relative;
	display:table-row;
		background-color: black;
		color: white;
}
 
#listcertifaimprimer div span span {
	position: relative;
	padding-right: 5px; 
	padding-left: 5px; 
	width: auto; 
	text-overflow: ellipsis; 
	text-align: left; 
	display:table-cell;
}

S'il n'y a pas de solution avec le CSS, il va falloir que je récupère la position à laquelle se trouve ma première cellule que j'aurais eu le soin de décaler vers la droite pour aller y poser un div juste devant afin que ça corresponde à la bonne ligne quelque soit le navigateur (il y a toujours des différences d'affichages) et surtout, faire ça, c'est un peu une usine à gaz. Mais si j'ai pas le choix...

Merci à ceux qui vont me donner un coup de pouce sur ce problème là. (je continue de chercher de mon coté comme à chaque fois que je pose une question)

C'est visible là : http://gestion1.ressorts.org (il y a un accès de test indiqué sur la page d'accueil) puis menu BL/Factures, puis Certificats et enfin n'importe quelle liste de certificats (conformité, matière ou contrôle) puisqu'il s'agit de la même création de liste, mais avec des actions différentes ou pas d'action(pas encore programmées)

NOTA: même s'il s'agit d'un programme à allure pro, c'est surtout un développement amateur pour mon usage propre parce que je n'ai pas trouvé mon bonheur dans les programmes existants à un tarif non prohibitif.

[Invité]

Bonjour,

1/ difficile de TESTER, quand :

• ton code HTML ne comporte pas de données (même fictives),
• et que tu ne fournis pas un dessin ou autre pour qu'on sache vraiment ce que tu veux obtenir...

2/ Dautre part, il n'est pas interdit (c'est même recommandé !) d'utiliser des <table> pour afficher des données tabulaires.

Et même si tu souhaites conserver les div avec des table-row / table/cell, la structaure <table><tr><td> t'aidera grandement !

• <table> -> display:table;
• <tr> -> display:table-row;
• <td> -> display:table-cell;

Ca devrait aussi simplifier l'écriture de ton code (l'utilisation de <span> n'est pas très judicieux ici) :

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
<div id="listcertifaimprimer">
   <div>
      <div>....</div>
      <div>....</div>
      <div>....</div>
      <div>....</div>
   </div>
   <div>
      <div>....</div>
      <div>....</div>
      <div>....</div>
      <div>....</div>
   </div>
</div>

Code css :

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

1
2
3
#listcertifaimprimer { display:table; }
#listcertifaimprimer > div { display:table-row; }
#listcertifaimprimer > div > div { display:table-cell; }

[nektarfl]

Merci de tes remarques, mais j'ai indiqué un lien ( http://gestion1.ressorts.org ) pour aller sur la page en question. Il y a une société de test qui me permet de tester sans mettre en péril ma base de donnée actuellement active. menu BL/Facture, puis certificat de conformité et certificat matière.

J'avais commencé avec des tables <table><tr><td>etc mais je n'ai pas trouvé à noircir la ligne entière quand la souris passe dessus, et pire encore, je n'ai pas réussi à faire faire une action sur une ligne (<tr onclick="action()"> ne semble pas fonctionner). Dans mon cas, mon problème vient de la croix que j'ai maladroitement tenté de rajouter. (Avant, ça marchait bien)
Je crois que je vais revenir à la version précédente, décaler ma table qui fonctionnait bien et placer mes croix d'annulation dans un autre div en colonne en espérant qu'au bout de 25 ou 50 lignes, je n'aurais pas de décalage.

Ce que je veux, c'est que les croix se retrouvent sur la même ligne que le texte correspondant, qu'en cliquant sur la croix, on obtienne une action et que le reste de la ligne change d'aspect quand la souris passe dessus (que la croix soit concernée par la mise à la couleur noire du fond n'est pas important) et qu'en cas de clic, quelque soit l'endroit de la ligne, une autre action se déroule. et surtout que mes 3 colonnes soient alignées correctement.

A propos de span, j'étais resté sur le fait que quand j'ai un nouveau bloc, c'est div et quand je veux rester dans le même bloc ou la même ligne, c'est span (surement mon manque d'expérience)

[nektarfl]

J'ai trouvé la solution à mon problème et merci à ceux qui m'ont lu et à celui qui m'a donné la bonne piste à suivre, même si sa solution n'était pas correcte, elle m'a aidé à mieux analyser ce que je devais faire pour arriver au résultat.

En fait, je m'acharnais à vouloir grouper mes deux parties de colonne (colonne 1 d'un coté avec une croix pour effacer la ligne et colonnes 2 à 4 de l'autre coté avec une action concernant la ligne à manipuler)
J'ai tout réuni en un seul tableau (plus facile à gérer, mais le onclick, je l'ai séparé cellule par cellule, et le résultat est exactement celui que je désirais)

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
<div id="listcertifaimprimer">
   <div>
      <span><img src="http://standard.ressorts.org/images/publish_x.png" onclick="effacecertlist(125)" width="12" height="12" title="Effacer la demande de ce certificat"></span>
      <span onclick="donneccpu(125)">SEBINDUS</span>
      <span onclick="donneccpu(125)">070818001</span>
      <span onclick="donneccpu(125)">Ressort torsion filØ3mm - Øint 58, 59 spires sans pattes</span>
   </div>
   <div>
      <span><img src="http://standard.ressorts.org/images/publish_x.png" onclick="effacecertlist(49)" width="12" height="12" title="Effacer la demande de ce certificat"></span>
      <span onclick="donneccpu(49)">D P I</span>
      <span onclick="donneccpu(49)">100427084</span>
      <span onclick="donneccpu(49)">Ressort suivant plan 123456</span>
   </div>
</div>

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
#listcertifaimprimer > div {
	position: relative;
	display:table-row;
}
 
#listcertifaimprimer > div:hover {
	position: relative;
	display:table-row;
		background-color: black;
		color: white;
}
 
 
#listcertifaimprimer > div > span {
	position: relative;
	padding-right: 5px; 
	padding-left: 5px; 
	width: auto; 
	text-overflow: ellipsis; 
	text-align: left; 
	display:table-cell;
}

A noter que la demande display:table; dans listcertifaimprimer a pour effet de ne pas tenir compte des éléments max-height: 150px; et overflow-y: scroll;

merci à tous.