Discussion :

[Marc22]

Bonjour, je voudrais augmenter la hauteur de chacune de mes lignes de mon classement.

Les deux paramètres que je souhaiterais conserver sont le trait de bordure, border-left (qui doit augmenter avec l'augmentation de la ligne), et le background-color.

Pour cela j'ai essayé le padding-top/bottom, et le margin-top/bottom, mais le soucis, c'est que mes lignes de tableau ont parfois un background-color, et qu'en rajoutant le padding/margin, ça ne garde pas la couleur, ça fait des intervalles de blanc.

Je voudrais que les intervalles gardent la couleur du background-color.

Je comprends la propriété padding et son comportement, mais je voudrais savoir comment faire alors pour augmenter la hauteur tout en augmentant et le trait (border-left) et le background-color.

Merci. (la capture d'écran en pièce jointe)

[c_s_s]

Bonjour,

Serait-il possible de voir le code HTML/CSS de ce tableau ?

[Marc22]

Oui bien sûr :

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
<div class="enr">
	<span class="place legende">N</span>
	<span class="club legende">Clubs</span>
	<span class="stats legende">P</span>
	<span class="stats legende">J</span>
	<span class="stats legende">G</span>
	<span class="stats legende">N</span>
	<span class="stats legende">P</span>
	<span class="stats legende">Pr</span>
	<span class="stats legende">Ctre</span>
	<span class="stats legende"">diff</span>
	<span class="stats legende stats stats_sep legende_sep"">mbp</span>
	<span class="stats legende"">mbc</span>
</div>
 
while ($ligne=mysql_fetch_assoc($req)){
 
$place++;
 
if($place<=2){$style="style=\"background-color:#e0e0e0;\"";}
else if($place==3){$style="style=\"background-color:#e9e9e9;\"";}
else if($place==4){$style="style=\"background-color:#f3f3f3;\"";}
else{$style="";}
 
// echo $ligne['fleche'];
if ($ligne['fleche']==1){$fleche_src="fleche_haut";}
if ($ligne['fleche']==0){$fleche_src="fleche_bas";}
if ($ligne['fleche']==10){$fleche_src="fleche_milieu";}
 
// classement 
 
echo '
		<div class="enr" '.$style.'>
			<span class="place legende">'.$place.'</span>
			<span class="fleche_css"><img src="../style/images/png/'.$fleche_src.'.png" /></span><span class="equipe">'.$ligne['equipe'].'</span>
			<span class="stats">'.$ligne['points'].'</span>
			<span class="stats">'.$ligne['journee'].'</span>
			<span class="stats">'.$ligne['gagne'].'</span>
			<span class="stats">'.$ligne['nul'].'</span>
			<span class="stats">'.$ligne['perdu'].'</span>
			<span class="stats">'.$ligne['pour'].'</span>
			<span class="stats">'.$ligne['contre'].'</span>
			<span class="stats">'.$ligne['difference'].'</span>
			<span class="stats stats_sep">'.substr($ligne['mbp'], 0, 3).'</span>
			<span class="stats">'.substr($ligne['mbc'], 0, 3).'</span>
		</div>
	';

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
div#classement{background:#FFFFFF;border-bottom:1px solid;width:620px;position:absolute;margin-left:250px;margin-top:175px;}
 
		div.enr{display:table;border-top:1px solid #777777;border-right:1px solid;}
 
		span.place{float:left;width:31px; text-align:center;border-right:1px solid;border-left:1px solid;}
 
		span.fleche_css{float:left;width:12px;padding-left:2px;}
		span.equipe{float:left;width:100px;padding-left:2px;}
		span.club{float:left;width:114px;padding-left:2px;}
 
		span.stats{
		float:left;
		width:46px;
		text-align:center;
		border-left:1px solid #a2a2a2;}

J'ai mis en pièce jointe l'original qui était trop "étroit" mais bien présenté.

[Marc22]

C'est bon j'ai trouvé ;

en laissant un

Code :

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

height:17px; padding-top:3px;

sur tous mes span, ça marche. Le padding top étant là pour faire redescendre les écritures qui restent en haut lorsqu'on fait le height.

[c_s_s]

Une question toute bête, pourquoi n'utilises-tu pas une table pour afficher tes données ?

[Marc22]

tr td? J'ai tellement entendu que c'était déconseillé que je ne les ai jamais utilisés.

[c_s_s]

C'est déconseillé pour la structure des pages, mais pour afficher des données tabulaires (ce qui est le cas de ton tableau), c'est encore ce qu'il y a de mieux.

[Marc22]

lol je m'aperçois un peu tardivement sur d'autres classements de ce type que tu as raison, ils utilisent tous des tr td. Je crois que je vais essayer de tout refaire parce que pour la maintenance c'est pas un cadeau les tableaux par les div et les span. Merci