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.