Discussion :

[kgb93]

Bonjour,


Je crée en php une fonction pour générer dynamiquement un tableau. Ceci afin d'harmoniser tous les tableaux de mon site et de me permettre une maintenance uniquement sur la feuille de style ou sur cette fonction.
Le problème n'est pas vraiment là, mais c'est le background.

J'affecte une valeur fixe à mon tableau afin de pouvoir mettre une image de fond pour styliser la ligne.
J'affecte donc une classe en HTML et dans la feuille de style, l'image de fond.
Or cette image est répétée sous IE dans chaque cellule alors que sous Firefox elle prend bien toute la place de la ligne (ceci etant le but recherché). Je voulais savoir si c'etait un probleme inéluctable ou si j'ai oublié de faire quelque chose.

Voici les bout de codes correspondants :


Le HTML (je ne mets que le résultat de ma fonction).

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
 
<table cellspacing="0" align=center>
<tr>
<th colspan="3" class="htTab">Les résultats de la journée</th>
</tr>
<tr class="RedTitle">
<th colspan="3">Ligue 1 - Journée n° 1 <img src="images/BubbleRed.png" width="20" height="20" alt="Red"/>
</th>
</tr>
<tr class="GreenTitle">
<th>Nom du buteur</th>
<th>Equipe qui ouvre le score</th>
<th>Equipe qui mène à la mi-temps</th>
</tr>
<tr class="CorpsTabB">
<td colspan="3">BORDEAUX <strong>2 - 1</strong> CAEN</td>
</tr>
<tr class="CorpsTabA">
<td>[BOR] (MIL) Gourcuff Yoann</td>
<td>BORDEAUX</td>
<td>BORDEAUX</td>
</tr>
<tr>
<th colspan="3" class="basTab">
 
</th>
</tr>
</table>

Le morceau de la feuille de style

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
 
.htTab {
 
background: url(images/htTab.gif) no-repeat bottom;
width: 800px;
height: 50px;
border-collapse:collapse;
}
 
.basTab {
 
background: url(images/basTab.gif) no-repeat top;
width: 800px;
height: 50px;
border-collapse:collapse;
}
 
.RedTitle {
background: url(images/RedTitle.gif) repeat-y bottom;
width: 800px;
height: 30px;
border-collapse:collapse;
}
 
.GreenTitle {
background: url(images/GreenTitle.gif) no-repeat bottom;
width: 800px;
height: 30px;
border-collapse:collapse;
}
 
.CorpsTabA {
background: url(images/CorpsTabA.gif) no-repeat bottom;
width: 800px;
height: 30px;
border-collapse:collapse;
}
 
.CorpsTabB {
background: url(images/CorpsTabB.gif) no-repeat bottom;
width: 800px;
height: 30px;
border-collapse:collapse;
}

Le résultat en image :

Sous IE :


Sous Firefox (résultat recherché) :



Je vous remercie d'avance d'avoir lu ce post et je remercie d'avance les personnes qui m'apporteront des réponses constructives.

[copin]

Salut,

Tous les attributs HTML et XHTML définis dans la balise HTML et XHTML <TR> s'appliquent aux balises Html <TD> qu'elle contient.

Pourquoi ne places tu pas un tableau dans le tableau? Et tu appliques le background/style sur la balise <table> c'est pas super propre mais tu as le rendu souhaité.

[copin]

Ou sinon plus propre, tu découpes l'image de fond en trois parties.

image 1; Arrondi gauche
image 2; rectangle vert
image 3; arrondi droit

Tu réalises 3 styles avec chacun une image en background que tu appliques chaque style sur la cellule qui va bien.

[kgb93]

Merci copin de ta réponse.

La deuxieme solution ne sera pas jouable. En fait mon tableau et son style sont gérés dynamiquement par une fonction.
En gros j'envoie le contenu (un array avec une entete pour identifier le type de ligne, et le contenu des cellules) et le nombre de colonnes à ma fonction et il me génère ce tableau. Donc je ne peux decouper mon image puisque je ne sais pas à l'avance combien j'aurais de colonnes.

Je vais me pencher sur la premiere solution (la moins propre) et voir où cela me mène. Si je n'ai pas bien compris ta deuxieme option, je t'en serais reconnaissant de detailler ton point de vue. En tout cas, merci.

Cependant, s'il y a d'autres solutions qui me permettent de resoudre ce probleme, je suis preneur.

Pour les curieux, ma fonction agit comme ca (etant hors sujet, si ca pollue, dites le moi j'editerai le post) :

D'abord par le biais de plusieurs requetes, je remplis un tableau $tab qui aura cette tete en fin de traitement :

Code :

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

1
2
3
4
5
$tab = array ('entete' => 'Mon titre de haut de tableau',
              'RedTitle' =>'Mon complément au titre',
              'GreenTitle(i)' => array('Titre de la section')
              'CorpsTab(i) => Array('A1','A2','A3')
              'CorpsTab(i) => Array('B1','B2','B3'))

J'appelle ma fontion tablo($tab,3), où 3 est le nombre de colonnes de mon tableau.

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
function tablo($tab,$nbRow)
    {
        $parite=1;
        // Description du tableau
        echo '<table cellspacing="0" align=center>';
 
        // On génère le titre du tableau. i.e. la premiere ligne avec image de fond plus les autres.
 
        while(list($cle,$val) = each($tab))
        {
            if (substr($cle, 0, 6) == 'entete')
            {
                echo '<tr>';
                echo '<th colspan="'.$nbRow.'" class="htTab">'.$val.'</th>';
                echo '</tr>';
            }
 
            if (substr($cle, 0, 8) == 'RedTitle')
            {
            //  echo '<tr bgcolor=#990000>
                echo '<tr class="RedTitle">';
                echo '<th colspan="'.$nbRow.'">'.$val.'</th>';
                echo '</tr>';
            }
 
            if (substr($cle, 0, 10) == 'GreenTitle')
            {
                $nbrSousColonnes = count($val);
                echo '<tr class="GreenTitle">';
                while(list($cle2,$column) = each($val))
                {
                    if ($nbRow == $nbrSousColonnes)
                    {
                        echo '<th>'.$column.'</th>';
                    }else
                    {
                        echo '<td colspan="'.$nbRow.'">'.$column.'</td>';
                    }
                }
                echo '</tr>';
            }
 
            if (substr($cle, 0, 8) == 'CorpsTab')
            {
                $parite *= -1;
                $nbrSousColonnes = count($val);
                if ($parite == 1)
                {
                    $color = '66ff66';
                    $class = 'CorpsTabA';
                } else
                {
                    $color = '33ff33';
                    $class = 'CorpsTabB';
                };
             // echo '<tr bgcolor=#'.$color.'>';
                echo '<tr class="'.$class.'">';
                while(list($cle3,$column2) = each($val))
                {
                    if ($nbRow == $nbrSousColonnes)
                    {
                        echo '<td>'.$column2.'</td>';
                    } else
                    {
                        echo '<td colspan="'.$nbRow.'">'.$column2.'</td>';
                    }
                }
                echo '</tr>';
            }
 
            if (substr($cle, 0, 8) == 'Intercal')
            {
                echo '<tr class="Intercal">';
                echo '<td colspan="'.$nbRow.'"><strong>'.$val.'</strong></td>';
                echo '</tr>';
            }
        }
        echo '<tr>';
        echo '<th colspan="'.$nbRow.'" class="basTab"> </th>';
        echo '</tr>';
        echo '</table>';
 
    }

[popo]

Code :

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

1
2
La deuxieme solution ne sera pas jouable. En fait mon tableau et son style sont gérés dynamiquement par une fonction.
En gros j'envoie le contenu (un array avec une entete pour identifier le type de ligne, et le contenu des cellules) et le nombre de colonnes à ma fonction et il me génère ce tableau. Donc je ne peux decouper mon image puisque je ne sais pas à l'avance combien j'aurais de colonnes.

Juste si ! Comme tu l'écrit tu connais le nombre de colonnes donc tu peux adapter
1 colonne : une sule image de fond
2 colonnes : une image pour la gauche et une pour la droite
3 colonnes : une à gauche, 1 au centre, une à droite
4 colonnes : une à gauche, 2 au centre, une à droite
5 colonnes : ....

Vu que ton image de centre n'a pas d'arrondit tu peux l'utiliser autant de fois que tu veux sans que cela n'est d'inpact.

[copin]

Illustration pour la seconde solution.
Ca s'est ton image de base:

Code :

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

1
2
3
 
 ____________________
(____________________)

tu la coupe comme ca
Coté gauche

Code :

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

1
2
3
 
 __
(__

Coté droit

Code :

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

1
2
3
 
__
__)

Partie centrale

Code :

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

1
2
3
 
___
___

Ton nombre de case au centre est de N nombre de case totale -2 pour les 2 extremes

Pour l'image centrale tu prends une image de 2px de largeur et tu met un repeat-x pour qu'elle prenne toute la largeur de ta cellule.

[HiRoN]

Ou sinon plus propre, tu découpes l'image de fond en trois parties.

image 1; Arrondi gauche
image 2; rectangle vert
image 3; arrondi droit

Tu réalises 3 styles avec chacun une image en background que tu appliques chaque style sur la cellule qui va bien.

+1, 3 class CSS et c'est reglé

[kgb93]

Merci pour vos réponses à tous. Effectivement, cette solution meme si elle est plus lourde pourrait compenser les défauts d'internet explorer (sont chiants à ne pas être à la page eux!).
Cela dit, maintenant c'est un soucis en hauteur que j'ai. En effet mon image n'est pas extensible en hauteur et cela me pose des problemes.
Mais j'ai maintenant de très bonnes pistes pour continuer. Je considere donc ce post comme solutionné.

Merci à tous de votre coopération. Il est certain que je reviendrai exposer mes problemes à l'avenir (le site est encore loin d'etre fini).

[HiRoN]

Passe alors le post en résolu...