tableaux html et taille de case
Bonjour à tous.
Je travaille actuellement sur un système pour afficher des commentaires. Je souhaite que chaque commentaire soit dans un tableau pour avoir un affichage propre (je sais que l'affichage par tableau est déconseillé, si vous pouvez me conseiller une autre solution je suis preneur, après pas mal d'essais je galère :aie: )
Voici ce à quoi ça ressemble :
http://yonnards919.goldzoneweb.info/screen_com_nv1.JPG
On a donc trois colonnes, une pour le pseudo et l'avatar, une pour la date, et une pour les images d'administration/modération. (le corps du commentaire étant en colspan="2")
Voici ce code :
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
| <table>
<tr class="top">
<td class="nick">
Silent
</td>
<td class="date">
Le <?php echo date("d/m/y \, \à H\hi", time()); ?><br />
</td>
<td class="admin">
<a href=""><img src="img/dicon/x.gif" alt="supprimer"/></a>
<a href=""><img src="img/dicon/exclam.png" alt="moderer auto" /></a>
<a href=""><img src="img/dicon/find.png" alt="user ip" /></a>
<a href=""><img src="img/dicon/error_delete.png" alt="alerter" /></a>
<a href=""><img src="img/dicon/cut_red.png" alt="modifier" /></a>
<a href=""><img src="img/dicon/comment.png" alt="reply quote" /></a>
</td>
</tr>
<tr class="bottom">
<td class="avatar">
<img src="img/avatars/eye.jpg">
</td>
<td class="text" colspan="2">
Donc petites infos concernant les commentaires : <br />
<br />
Les images pour la gestion en haut à droite de chaque commentaire. J'ai mis les trois combinaisons à mon avis valables, à savoir :<br />
- Premier commentaire : Commentaire posté par quelqu'un d'autre (si connecté) : signaler, citer <br />
- Second commentaire (celui-ci) : tous les commentaires vus par un admin.<br />
- Troisième : Commentaire posté par le visiteur lui-même, il peut le supprimer ou l'éditer.<br />
La quatrième solution est si le visiteur n'est pas connecté, il ne voit aucune image.<br /><br />
En ce qui concerne les pseudos, la place laissée au pseudo est de la même largeur que la place laissée en gris (pour l'image de profil je suppose) sur la ligne en dessous. Ca peut être modifié mais cette solution permet d'avoir un alignement propre entre la date et le contenu du commentaire.
</td>
</tr>
</table> |
(pour un seul commentaire).
Le problème, c'est que la place allouée au pseudo est la même que celle pour l'avatar. Mais je souhaite que la partie pour l'avatar soit de largeur fixe (100px), et que la partie disponible pour le pseudo soit extensible (en cas de pseudo assez long).
J'ai donc décidé de séparer mon tableau différemment :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <table>
<tr class="setwidth"><td class="col1"></td><td class="col2"></td><td class="col3"></td><td class="col4"></td></tr>
<tr class="top">
<td class="nick" colspan="2">
SilentSilentSilentSilent
</td>
<td class="date">
Le <?php echo date("d/m/y \, \à H\hi", time()); ?><br />
</td>
<td class="admin">
<a href=""><img src="img/dicon/error_delete.png" alt="alerter" /></a>
<a href=""><img src="img/dicon/comment.png" alt="reply quote" /></a>
</td>
</tr>
<tr class="bottom">
<td class="avatar">
</td>
<td class="text" colspan="3">
Un exemple un peu plus conséquent concernant les commentaires se trouve plus bas.
</td>
</tr>
</table> |
On se retrouve donc avec 4 colonnes :
- La première, de largeur fixe à 100px, est celle de l'avatar.
- La seconde, extensible, permet d'avoir un pseudo long sans pour autant changer la largeur de la première.
- Les troisièmes et quatrièmes, avec les mêmes particularités qu'avant.
On remarque la première ligne, qui me permet de fixer proprement les largeurs de chaque colonne.
Voici le CSS associé :
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
| div.commentaires table{
width : 100%;
margin : 0 0 2px 0;
padding : 0;
}
div.commentaires table tr{
margin : 0;
padding : 0;
}
div.commentaires table td{
margin : 0;
padding : 0 3px 0 3px;
}
div.commentaires table tr.setwidth{
height : 5px;
background : #f0f;
}
div.commentaires table tr.setwidth td{
margin : 0;
padding : 0;
}
div.commentaires table tr.setwidth td.col1{
background : #0ff;
min-width : 100px;
max-width : 100px;
}
div.commentaires table tr.setwidth td.col2{
background : #000;
min-width : 0;
}
div.commentaires table tr.setwidth td.col3{
background : #0f0;
}
div.commentaires table tr.setwidth td.col4{
background : #00f;
width : 120px;
}
div.commentaires table tr.top{
background : #bbb;
height : 20px;
}
div.commentaires table tr.top td.nick{
font-weight : bold;
}
div.commentaires table tr.top td.date{
}
div.commentaires table tr.top td.admin{
text-align : right;
}
div.commentaires table tr.bottom td.avatar{
background : #ddd;
vertical-align : top;
padding-top : 5px;
width : 100px;
text-align : center;
}
div.commentaires table tr.bottom td.avatar img.avatar{
width : 80px;
}
div.commentaires table tr.bottom td.text{
padding : 3px 1px 3px 1px;
} |
(Les couleurs servent uniquement à voir les cases)
Sauf que les deux cases ne se fixent pas comme je veux.
Je n'ai pas idée d'où ça vient, je précise que les commentaires sont bien dans le div class commentaire (que je n'ai pas copié), et là, je sèche.
J'espère être plus ou moins compréhensible...
Je ne sais pas si ce topic est dans le bon endroit, si ce n'est pas le cas j'en suis désolé.
Cordialement,
Nico
