Faire un padding qui garde le background-color (screen)

Version imprimable

31/08/2010, 13h42
Marc22

Faire un padding qui garde le background-color (screen)

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)
31/08/2010, 13h54
c_s_s

Bonjour,

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

Oui bien sûr :

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
<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:

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é.

31/08/2010, 14h35
Marc22

C'est bon j'ai trouvé ;

en laissant un

Code:

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.
31/08/2010, 14h36
c_s_s

Une question toute bête, pourquoi n'utilises-tu pas une table pour afficher tes données ?
31/08/2010, 14h41
Marc22

tr td? J'ai tellement entendu que c'était déconseillé que je ne les ai jamais utilisés.
31/08/2010, 14h45
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.

;)
31/08/2010, 14h51
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 ;)