Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Prb background-image sur un TR

4 views
Skip to first unread message

Pierre Goiffon

unread,
Feb 11, 2011, 12:15:30 PM2/11/11
to
Bonjour à tous, prb eu aujourd'hui en mettant en forme une liste d'éléments.

La page de démo :
http://pgoiffon.free.fr/_temp/tr_background.html

Une image en repeat est appliquée en background-image sur le TR du milieu.

Sur Fx pas de prb.
Sur IE 6 7 ou 8, Chrome 9 et Safari 5, l'image pose des prb de repeat :
en fait c'est comme si on l'avait appliquée aux td directement !

J'ai pensé appliquer l'image de fond au tableau directement, et rendre
transparente uniquement les lignes pour lesquelles j'ai besoin de cette
image... mais ces lignes sont l'exception, et j'aurais potentiellement
besoin de plusieurs images pour plusieurs types de lignes !
A noter aussi que le tableau dans l'application d'origine prend toute la
place du viewport possible, il n'est pas envisageable de fixer la
largeur du tableau et de chaque cellule (car contient des libellés
potentiellement longs). Idem, n'avoir qu'une seule cellule parait trop
compliqué à implémenter pour le traitement serveur qui génère le tableau
(de la complexité apportée pour pas grand chose).

Donc la seule méthode de contournement applicable que j'ai trouvé a été
de changer pour des hachures verticales... mais c'était quand même
nettement plus joli avec les hachures "inclinées" !

J'ai trouvé d'autres personnes ayant le prb. En particulier
http://snook.ca/archives/html_and_css/applying_a_back, qui donne pas mal
de choses dans les commentaires. Mais je ne vois rien d'applicable pour
moi (dont la dernière solution avec le position:relative, car mon
tableau est dans un conteneur et avec un max-width...).
Je suis alors tombé sur
http://www.sitepoint.com/forums/showpost.php?s=f1a1fd73fe89b758c734d6d9ad43212d&p=3922787&postcount=6,
et ce contournement fonctionne parfaitement pour IE6, 7 et 8.

Je reste par contre avec le prb sur Safari 5 et Chrome 9... quelqu'un
aurait une solution pour ces navigateurs webkit ?

SAM

unread,
Feb 11, 2011, 2:00:22 PM2/11/11
to
Le 11/02/11 18:15, Pierre Goiffon a écrit :

> Bonjour à tous, prb eu aujourd'hui en mettant en forme une liste
> d'éléments.
>
> La page de démo :
> http://pgoiffon.free.fr/_temp/tr_background.html
>
> Une image en repeat est appliquée en background-image sur le TR du milieu.

D'après ce que je crois, on n'applique rien à un TR ! ! !
Allez, si, une bordure ?
En tous cas, pas un fond.

le TD répond au stylage du TR par héritage

à savoir :
les styles non-héritables ne seront donc pas vus par les TD dont le TR a
le style (border par exemple)

> Sur Fx pas de prb.

An'éfé. Maizil a tord.

> Sur IE 6 7 ou 8, Chrome 9 et Safari 5, l'image pose des prb de repeat :
> en fait c'est comme si on l'avait appliquée aux td directement !

Normal (à mon idée que je partage)
Bien que ... non ... Opera ne capte pas (fonds bleus partout)

M'enfin, c'est de ta fôte aussi !

.truc TD { background: silver }

<tr class="truc"><td>donnée 1</td><td>donnée 2</td></tr>
<tr><td>donnée 3</td><td>donnée 4</td></tr>
<tr class="truc"><td>donnée 2</td><td>donnée 6</td></tr>

> J'ai pensé appliquer l'image de fond au tableau directement, et rendre
> transparente uniquement les lignes pour lesquelles j'ai besoin de cette
> image... mais ces lignes sont l'exception, et j'aurais potentiellement
> besoin de plusieurs images pour plusieurs types de lignes !

là c'est pareil ... c'est oublier les histoires d'héritages ...

et puis ... il faut être certain que l'image a une hauteur bien
supérieure à une ligne ... et on ne peut en utiliser qu'une

sinon ... oui ... ça ne pèse pas plus que de l'avoir dans le TR

> A noter aussi que le tableau dans l'application d'origine prend toute la
> place du viewport possible, il n'est pas envisageable de fixer la
> largeur du tableau et de chaque cellule (car contient des libellés
> potentiellement longs). Idem, n'avoir qu'une seule cellule parait trop
> compliqué à implémenter pour le traitement serveur qui génère le tableau
> (de la complexité apportée pour pas grand chose).

??? s'il est capable d'écrire class="truc"
ça doit pas beaucoup lui peser d'écrire
<table class="truc"><tr><td>...

Le blème : aligner les nouvelles colonnes ...


> Je reste par contre avec le prb sur Safari 5 et Chrome 9... quelqu'un
> aurait une solution pour ces navigateurs webkit ?

Non

Pour te consoler et voir qu'il y a pire,
avec Safari, essaie :
javascript:document.getElementById('exemple1').rows[2].style.backgroundSize="cover";
dans le champ d'adresse de ta page de démo


--
Stéphane Moriaux avec/with iMac-intel

Olivier Miakinen

unread,
Feb 11, 2011, 2:05:02 PM2/11/11
to
Le 11/02/2011 18:15, Pierre Goiffon a ï¿œcrit :
> Bonjour ᅵ tous, prb eu aujourd'hui en mettant en forme une liste d'ᅵlᅵments.
>
> La page de dï¿œmo :
> http://pgoiffon.free.fr/_temp/tr_background.html
>
> [...]
>
> Donc la seule mᅵthode de contournement applicable que j'ai trouvᅵ a ᅵtᅵ
> de changer pour des hachures verticales...

Note que ce n'est pas tellement mieux avec les hachures verticales.
D'accord il n'y a plus de solution de continuitᅵ, mais ᅵa fait des
bandes de largeurs diffï¿œrentes.

> [...]
> Je suis alors tombᅵ sur

Ah oui, en effet.

> Je reste par contre avec le prb sur Safari 5 et Chrome 9... quelqu'un
> aurait une solution pour ces navigateurs webkit ?

Dᅵsolᅵ, je n'ai pas d'idᅵe. Plus exactement, celles que j'ai eues ont
dᅵjᅵ ᅵtᅵ proposᅵes sur la page de Jonathan Snook. Quoique... non, il
y en a peut-ᅵtre une ᅵ tester, si jamais ᅵa te convient : prᅵvoir un
TBODY pour chaque ligne qui doit avoir ces hachures, et appliquer le
background aux TBODY plutï¿œt qu'aux TR. Je croise les doigts en espï¿œrant
que ï¿œa marche...

Cordialement,
--
Olivier Miakinen

rm

unread,
Feb 11, 2011, 2:29:26 PM2/11/11
to
Salut,

Le vendredi 11 février 2011 à 18:15, Pierre Goiffon a écrit :

> http://pgoiffon.free.fr/_temp/tr_background.html
>
> Une image en repeat est appliquée en background-image sur le TR du milieu.

Je suis peut-être bigleux et très noob dans le domaine mais je ne vois pas
de "background-image" dans tes styles :-/

J'ai retrouvé dans mes signets un exemple de tableau assez "stylé" avec du
background-image :
http://files.myopera.com/dstorey/experiments/iTunesTable.html
mais je ne sais pas s'il fonctionne avec les vieux navigateur (IE8 et
avant). Il s'affiche toutefois bien dans IE9 RC.
En espérant qu'il te soit d'une quelconque utilité :-]

@+
--
rm

Olivier Miakinen

unread,
Feb 11, 2011, 2:37:56 PM2/11/11
to
Le 11/02/2011 20:29, rm a écrit :
>
>> http://pgoiffon.free.fr/_temp/tr_background.html
>>
>> Une image en repeat est appliquée en background-image sur le TR du milieu.
>
> Je suis peut-être bigleux et très noob dans le domaine mais je ne vois pas
> de "background-image" dans tes styles :-/

Il est implicite (propriété raccourcie) :
background: url("stripes_blue.png") repeat;

Olivier Miakinen

unread,
Feb 11, 2011, 2:44:28 PM2/11/11
to
Le 11/02/2011 20:00, SAM a écrit :
>>
>> La page de démo :
>> http://pgoiffon.free.fr/_temp/tr_background.html
>>
>> Une image en repeat est appliquée en background-image sur le TR du milieu.
>
> D'après ce que je crois, on n'applique rien à un TR ! ! !
> Allez, si, une bordure ?
> En tous cas, pas un fond.

Il n'y a pas de raison qu'il soit interdit d'appliquer un fond à une
ligne. On peut même en appliquer un à une colonne !
<http://www.yoyodesign.org/doc/w3c/css2/tables.html#q4>

> le TD répond au stylage du TR par héritage

La valeur par défaut de background-image n'est pas inherit mais none, et
la valeur par défaut de background-color est transparent.

Cordialement,
--
Olivier Miakinen

Pierre Goiffon

unread,
Feb 12, 2011, 2:24:45 PM2/12/11
to
Bonjour,

On 11 fév, 20:29, rm <ra...@opera-fr.invalid> wrote:
>> http://pgoiffon.free.fr/_temp/tr_background.html


>
> Je suis peut-être bigleux et très noob dans le domaine mais je ne vois pas
> de "background-image" dans tes styles :-/

En fait j'ai définit le background-image et background-repeat en une
fois L21 et 25.

> J'ai retrouvé dans mes signets un exemple de tableau assez "stylé" avec du
> background-image :http://files.myopera.com/dstorey/experiments/iTunesTable.html

Il y a une image sur le TR contenant les TH, mais pas de soucis de
repeat puisqu'il s'agit d'un dégradé du haut vers le bas.
Une autre image de fond pour l'icône en cours mais sur un TD et
évidemment sans repeat.

Merci quand même, c'est un exemple assez proche du genre de datagrid
utilisé dans mon application (et une très vaste proportion des
applications web de toute façon :) )

Pierre Goiffon

unread,
Feb 12, 2011, 2:28:50 PM2/12/11
to
On 11 fév, 20:44, Olivier Miakinen <om+n...@miakinen.net> wrote:
>>>http://pgoiffon.free.fr/_temp/tr_background.html

>
> > D'après ce que je crois, on n'applique rien à un TR ! ! !
> > Allez, si, une bordure ?
> > En tous cas, pas un fond.
>
> Il n'y a pas de raison qu'il soit interdit d'appliquer un fond à une
> ligne. On peut même en appliquer un à une colonne !
> <http://www.yoyodesign.org/doc/w3c/css2/tables.html#q4>

> > le TD répond au stylage du TR par héritage
>
> La valeur par défaut de background-image n'est pas inherit mais none, et
> la valeur par défaut de background-color est transparent.

Intéressant ! Merci de l'info Olivier, ça fait un moment que je
voulais retrouver ce que l'on peut appliquer à une colonne, je me
souvenais que ce n'était que certaines propriétés mais pas moyen de
retrouver où c'était indiqué dans la recommandation !

En fait j'ai été surpris de la réponse de SAM (en particulier
considérant les valeurs par défaut que tu mentionne Olivier), mais il
pensais peut être à un document en particulier ?
En tout cas le besoin d'appliquer une image de fond sur un tr se fait
rapidement voir dès que l'on travaille sur l'équivalent html d'un
composant datagrid, et de très nombreuses applications sont
concernées !

Pierre Goiffon

unread,
Feb 12, 2011, 2:35:07 PM2/12/11
to
Bonsoir,

SAM sur un point particulier (car j'ai déjà répondu à Olivier qui
t'avait lui-même répondu)

On 11 fév, 20:00, SAM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:
>> http://pgoiffon.free.fr/_temp/tr_background.html


>
> > J'ai pensé appliquer l'image de fond au tableau directement, et rendre
> > transparente uniquement les lignes pour lesquelles j'ai besoin de cette
> > image... mais ces lignes sont l'exception, et j'aurais potentiellement
> > besoin de plusieurs images pour plusieurs types de lignes !
>
> là c'est pareil ... c'est oublier les histoires d'héritages ...
>
> et puis ... il faut être certain que l'image a une hauteur bien
> supérieure à une ligne ... et on ne peut en utiliser qu'une
> sinon ... oui ... ça ne pèse pas plus que de l'avoir dans le TR

Pour les prb de hauteur, c'est une image assez petite, mais en repeat
donc pas de soucis.
Mais vu que je n'aurai que quelques lignes sur lesquelles appliquer
cette image de fond, qu'il faut que je gère la sélection (si ligne
sélectionnée une autre image à appliquer), bref il y a de nombreuses
raisons pour lesquelles appliquer l'image de fond au table n'irait
pas.

> > A noter aussi que le tableau dans l'application d'origine prend toute la
> > place du viewport possible, il n'est pas envisageable de fixer la
> > largeur du tableau et de chaque cellule (car contient des libellés
> > potentiellement longs). Idem, n'avoir qu'une seule cellule parait trop
> > compliqué à implémenter pour le traitement serveur qui génère le tableau
> > (de la complexité apportée pour pas grand chose).
>
> ??? s'il est capable d'écrire class="truc"
> ça doit pas beaucoup lui peser d'écrire
>   <table class="truc"><tr><td>...

Pas compris ta réponse ? Je parlait de difficultés à utiliser la
méthode du colspan (un seul td avec colspan sur les lignes concernées,
on applique l'image de fond sur ce td) :

<table>
<tr>
<td class="..." colspan="..."
</tr>
<tr>
<td>...</td><td>...</td>....

> Le blème : aligner les nouvelles colonnes ...

Pas compris également ?

> Pour te consoler et voir qu'il y a pire,
> avec Safari, essaie :
> javascript:document.getElementById('exemple1').rows[2].style.backgroundSize="cover";
> dans le champ d'adresse de ta page de démo

Pas Safari sous la main ici, j'essayerai avec ma machine de dev !
Merci d'essayer de me remonter le moral :)

Pierre Goiffon

unread,
Feb 12, 2011, 2:36:47 PM2/12/11
to
On 11 fév, 20:05, Olivier Miakinen <om+n...@miakinen.net> wrote:
> >http://pgoiffon.free.fr/_temp/tr_background.html
>
> Note que ce n'est pas tellement mieux avec les hachures verticales.
> D'accord il n'y a plus de solution de continuit , mais a fait des
> bandes de largeurs diff rentes.

Oui tout à fait le prb de repeat se pose toujours évidemment, mais
esthétiquement c'est "moins pire" qu'avec des bandes "inclinées"...
Disons que ça passe à peu près. Bon depuis Google m'a remonté la
solution pour les IE, j'ai donc remis les hachures "inclinées".

SAM

unread,
Feb 12, 2011, 8:13:19 PM2/12/11
to
Le 12/02/11 20:28, Pierre Goiffon a �crit :

> On 11 f�v, 20:44, Olivier Miakinen<om+n...@miakinen.net> wrote:
>>>> http://pgoiffon.free.fr/_temp/tr_background.html
>>
>>> D'apr�s ce que je crois, on n'applique rien � un TR ! ! !

>>> Allez, si, une bordure ?
>>> En tous cas, pas un fond.
>>
>> Il n'y a pas de raison qu'il soit interdit d'appliquer un fond � une
>> ligne. On peut m�me en appliquer un � une colonne !
>> <http://www.yoyodesign.org/doc/w3c/css2/tables.html#q4>

curieusement, l� l'image de fond s'affiche sensiblement correctement
(non les z�brures obliques n'y font pas bon m�nage)

>>> le TD r�pond au stylage du TR par h�ritage
>>
>> La valeur par d�faut de background-image n'est pas inherit mais none,

Ha? Scrotche !

>> et la valeur par d�faut de background-color est transparent.

donc h�ritable ... enfin ... �a y ressemble.

> Int�ressant ! Merci de l'info Olivier, �a fait un moment que je
> voulais retrouver ce que l'on peut appliquer � une colonne, je me
> souvenais que ce n'�tait que certaines propri�t�s mais pas moyen de
> retrouver o� c'�tait indiqu� dans la recommandation !
>
> En fait j'ai �t� surpris de la r�ponse de SAM (en particulier
> consid�rant les valeurs par d�faut que tu mentionne Olivier), mais il
> pensais peut �tre � un document en particulier ?

Non.
Je ne connais aucun document.
Il va bien falloir l'admettre !

Juste une rem�moration (+/- fiable) d'une discussion � ce propos
(ng javascript).

> En tout cas le besoin d'appliquer une image de fond sur un tr se fait

> rapidement voir d�s que l'on travaille sur l'�quivalent html d'un
> composant datagrid, et de tr�s nombreuses applications sont
> concern�es !

Bof ... yaka prendre des images kivonbien.

--
St�phane Moriaux avec/with iMac-intel

SAM

unread,
Feb 12, 2011, 8:15:40 PM2/12/11
to
Le 12/02/11 20:35, Pierre Goiffon a écrit :

> Bonsoir,
>
> SAM sur un point particulier (car j'ai déjà répondu à Olivier qui
> t'avait lui-même répondu)
>
> On 11 fév, 20:00, SAM<stephanemoriaux.NoAd...@wanadoo.fr.invalid>
> wrote:
>>> http://pgoiffon.free.fr/_temp/tr_background.html
>>
>>> J'ai pensé appliquer l'image de fond au tableau directement, et rendre
>>> transparente uniquement les lignes pour lesquelles j'ai besoin de cette
>>> image... mais ces lignes sont l'exception, et j'aurais potentiellement
>>> besoin de plusieurs images pour plusieurs types de lignes !
>>
>> là c'est pareil ... c'est oublier les histoires d'héritages ...
>>
>> et puis ... il faut être certain que l'image a une hauteur bien
>> supérieure à une ligne ... et on ne peut en utiliser qu'une
>> sinon ... oui ... ça ne pèse pas plus que de l'avoir dans le TR
>
> Pour les prb de hauteur, c'est une image assez petite, mais en repeat
> donc pas de soucis.

si, si elle est appliquée au table et qu'elle n'a pas la hauteur des
lignes (hauteur que tu ne peux préjugée sur l'ordi du visiteur) ça va
faire très moche.

> Mais vu que je n'aurai que quelques lignes sur lesquelles appliquer
> cette image de fond, qu'il faut que je gère la sélection (si ligne
> sélectionnée une autre image à appliquer),

Ha ! aussi ! si tu compliques de + en + ! ! ;-)

> bref il y a de nombreuses raisons pour lesquelles appliquer l'image
> de fond au table n'irait pas.
>
>>> A noter aussi que le tableau dans l'application d'origine prend toute la
>>> place du viewport possible, il n'est pas envisageable de fixer la
>>> largeur du tableau et de chaque cellule (car contient des libellés
>>> potentiellement longs). Idem, n'avoir qu'une seule cellule parait trop
>>> compliqué à implémenter pour le traitement serveur qui génère le tableau
>>> (de la complexité apportée pour pas grand chose).
>>
>> ??? s'il est capable d'écrire class="truc"
>> ça doit pas beaucoup lui peser d'écrire
>> <table class="truc"><tr><td>...
>
> Pas compris ta réponse ?

Heu ... de la démo on voit que toutes les lignes contiennent les mêmes
colonnes, que donc je pensais que tu voulais mettre un table d'une
rangée à l'identique dans ce td (colspan toutes colonnes), table qui
aurait eu la fameuse image de fond zébrée oblique.

> Je parlais de difficultés à utiliser la


> méthode du colspan (un seul td avec colspan sur les lignes concernées,
> on applique l'image de fond sur ce td) :

Ha! oui, pourquoi pas.

table { background: skyblue; border-collapse: collapse; }
.truc table { background-image: url(zebr.gif) }
.truc:hover table { background-color: orange }

<table>
<col width=200>
<col width=300>
<col width=100>
<tr><td>bla 1</td><td>bla 2</td><td>bla 3</td></tr>
<tr class="truc"><td colspan="3">
<table>
<tr><td>bla a</td><td>bla b</td><td>bla c</td></tr>
</table>
</td></tr>
</table>

>> Le blème : aligner les nouvelles colonnes ...
>
> Pas compris également ?

être certain que le table, inséré dans ce TD de tte largeur, aura ses
colonnes alignées sur celles du table principal.
Voir :
<http://cjoint.com/data/0cnb4EuNCfv_tr-tyd-fonds.htm>

>> Pour te consoler et voir qu'il y a pire, avec Safari, essaie :
>

> Pas Safari sous la main ici, j'essayerai avec ma machine de dev !

<http://cjoint.com/?0cnbP5TndYi>
(l'image s'étire pour remplir le fond en 1 fois)

> Merci d'essayer de me remonter le moral :)

de nada ;-)

Pierre Goiffon

unread,
Feb 13, 2011, 5:37:37 AM2/13/11
to
On 13 fév, 02:13, SAM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>

wrote:
> >>>>http://pgoiffon.free.fr/_temp/tr_background.html
>
> >>> D'apr s ce que je crois, on n'applique rien un TR ! ! !
> >>> Allez, si, une bordure ?
> >>> En tous cas, pas un fond.
>
> >> Il n'y a pas de raison qu'il soit interdit d'appliquer un fond une
> >> ligne. On peut m me en appliquer un une colonne !
> >> <http://www.yoyodesign.org/doc/w3c/css2/tables.html#q4>
>
> curieusement, l l'image de fond s'affiche sensiblement correctement
> (non les z brures obliques n'y font pas bon m nage)

Pas compris cette phrase ?

> > En tout cas le besoin d'appliquer une image de fond sur un tr se fait
> > rapidement voir d s que l'on travaille sur l' quivalent html d'un
> > composant datagrid, et de tr s nombreuses applications sont
> > concern es !
>
> Bof ... yaka prendre des images kivonbien.

:)
Je sais bien que l'on est forcément limité un jour où l'autre, mais là
il faut bien avouer que c'est frustrant ! Dans mon cas cependant, ça
me va, solution pour Firefox et tous les IE.

Ha au fait, je vous ais dis que j'utilisais également le sélecteur
avec 2 classes ? Sur http://www.w3.org/TR/CSS21/selector.html#class-html
c'est p.marine.pastoral. Devinez qui l'implémente mal ? Bas, juste
IE6, mais quand même...

Enfin, c'est le web quoi :)

Pierre Goiffon

unread,
Feb 13, 2011, 7:41:36 AM2/13/11
to
On 13 fév, 02:15, SAM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:

> Le 12/02/11 20:35, Pierre Goiffon a écrit :
>
> > Pour les prb de hauteur, c'est une image assez petite, mais en repeat
> > donc pas de soucis.
>
> si, si elle est appliquée au table et qu'elle n'a pas la hauteur des
> lignes (hauteur que tu ne peux préjugée sur l'ordi du visiteur) ça va
> faire très moche.

Ha, je viens de faire le test avec Firebug en mettant 150px de hauteur
sur un tr avec fond... Ca se répète très bien en horizontal, mais en
vertical pas trop ! Je n'avais pas vu ça pardon, je croyais que
l'image se répétait très bien horizontal comme vertical, hors en
vertical il y a un décalage. Je comprend mieux :)

> > Mais vu que je n'aurai que quelques lignes sur lesquelles appliquer
> > cette image de fond, qu'il faut que je gère la sélection (si ligne
> > sélectionnée une autre image à appliquer),
>
> Ha ! aussi ! si tu compliques de + en + ! ! ;-)

Je redis que c'est un besoin de base dès que l'on développe une
application qui travaille sur des données ? ;)

> Heu ... de la démo on voit que toutes les lignes contiennent les mêmes
> colonnes, que donc je pensais que tu voulais mettre un table d'une
> rangée à l'identique dans ce td (colspan toutes colonnes), table qui
> aurait eu la fameuse image de fond zébrée oblique.

(...)


> table { background: skyblue; border-collapse: collapse; }
> .truc table { background-image: url(zebr.gif) }
> .truc:hover table { background-color: orange }
>
> <table>
> <col width=200>
> <col width=300>
> <col width=100>
> <tr><td>bla 1</td><td>bla 2</td><td>bla 3</td></tr>
> <tr class="truc"><td colspan="3">
> <table>
> <tr><td>bla a</td><td>bla b</td><td>bla c</td></tr>
> </table>
> </td></tr>
> </table>

Pour ces lignes ci j'ai bien une seule donnée à afficher, mais qui
n'est pas dans la première colonne... J'aurais appliqué l'image de
fond donc directement au TD avec le colspan, en me débrouillant pour
que la donnée soit positionnée au bon endroit, et ça ça n'allait pas
êtr eune partie de plaisir comme tu le dis...

SAM

unread,
Feb 14, 2011, 4:08:18 AM2/14/11
to
Le 13/02/11 11:37, Pierre Goiffon a écrit :

> On 13 fév, 02:13, SAM<stephanemoriaux.NoAd...@wanadoo.fr.invalid>
> wrote:
>>>>>> http://pgoiffon.free.fr/_temp/tr_background.html
>>
>>>>> D'apr s ce que je crois, on n'applique rien un TR ! ! !
>>>>> Allez, si, une bordure ?
>>>>> En tous cas, pas un fond.
>>
>>>> Il n'y a pas de raison qu'il soit interdit d'appliquer un fond une
>>>> ligne. On peut m me en appliquer un une colonne !
>>>> <http://www.yoyodesign.org/doc/w3c/css2/tables.html#q4>
>>
>> curieusement, l l'image de fond s'affiche sensiblement correctement
>> (non les z brures obliques n'y font pas bon m nage)
>
> Pas compris cette phrase ?

Sans les accentués ... ce n'est pas limpide !
Les lignes obliques sont hachées si empilement vertical de l'image.
Les obliques ne s'empilent pas verticalement en se suivant, si ?
(non, pas avec l'image de la démo)

M'enfin ... tu l'avais vu.
(correction dans le lien + bas)

>>> En tout cas le besoin d'appliquer une image de fond sur un tr se fait
>>> rapidement voir d s que l'on travaille sur l' quivalent html d'un
>>> composant datagrid, et de tr s nombreuses applications sont
>>> concern es !

Oui, bon, ben ...
personnellement ... je ne trouve pas que ces zébrures soient du meilleur
effet ni qu'elles améliorent la lisibilité

>> yaka prendre des images kivonbien.
>
> :)

Si, si, regarde :
<http://cjoint.com/?0cojDnEc58D>
Cette démo ne fonctionne bien que s'il y a la place pour afficher le
table sur toute sa largeur de base.

La même avec béquille JS pour IE (hover) :
<http://cjoint.com/?0cokf9tCH7c>

> Ha au fait, je vous ais dis que j'utilisais également le sélecteur
> avec 2 classes ? Sur http://www.w3.org/TR/CSS21/selector.html#class-html
> c'est p.marine.pastoral. Devinez qui l'implémente mal ? Bas, juste
> IE6, mais quand même...

eh oui ! IE admettant le '.' dans les noms de classes ... non ?

> Enfin, c'est le web quoi :)

Heu ... en html.2 et sans image, il doit il y avoir moins de soucis ;-)

Pierre Goiffon

unread,
Feb 14, 2011, 6:37:13 AM2/14/11
to
On 14/02/2011 10:08, SAM wrote:
>>>>>>> http://pgoiffon.free.fr/_temp/tr_background.html

>>>
>>> curieusement, l l'image de fond s'affiche sensiblement correctement
>>> (non les z brures obliques n'y font pas bon m nage)
>>
>> Pas compris cette phrase ?
>
> Sans les accentués ... ce n'est pas limpide !

Oui désolé, obligé de passer par Google groups en we, à domicile je suis
chez Neuf qui interdit l'accès au serveur de news de Free (et le serveur
de news de Neuf est inutilisable)

>>> yaka prendre des images kivonbien.
>>
>> :)
>
> Si, si, regarde :
> <http://cjoint.com/?0cojDnEc58D>
> Cette démo ne fonctionne bien que s'il y a la place pour afficher le
> table sur toute sa largeur de base.
>
> La même avec béquille JS pour IE (hover) :
> <http://cjoint.com/?0cokf9tCH7c>

Beau travail ! La technique du td avec colspan contenant un tableau avec
reproduction de toutes les cellules donc je vois.

Mais j'ai un prb de décalage sur le 1er tableau dans Safari 5 et IE7
encore (pas testé les autres). Ca semble identique à l'image appliquée
au TR.

Pas bien compris ce qu'était demo 2 ?

>> Ha au fait, je vous ais dis que j'utilisais également le sélecteur
>> avec 2 classes ? Sur http://www.w3.org/TR/CSS21/selector.html#class-html
>> c'est p.marine.pastoral. Devinez qui l'implémente mal ? Bas, juste
>> IE6, mais quand même...
>
> eh oui ! IE admettant le '.' dans les noms de classes ... non ?

Ha ils ont fait ça ? Fichtre, forcément, ça complique dans le cas de ce
sélecteur !

Tonton Th

unread,
Feb 14, 2011, 7:05:27 AM2/14/11
to
On 02/14/2011 12:37 PM, Pierre Goiffon wrote:

> Oui désolé, obligé de passer par Google groups en we, à domicile je suis
> chez Neuf qui interdit l'accès au serveur de news de Free (et le serveur
> de news de Neuf est inutilisable)

Il existe un certain nombre d'autres serveurs :

http://usenet-fr.dougwise.org/Se_connecter_%C3%A0_Usenet-fr

--
Ma coiffeuse est formidable - http://sonia.buvette.org/


Olivier Miakinen

unread,
Feb 14, 2011, 7:10:38 AM2/14/11
to
Le 14/02/2011 13:05, Tonton Th a ï¿œcrit :
>
>> Oui dᅵsolᅵ, obligᅵ de passer par Google groups en we, ᅵ domicile je suis
>> chez Neuf qui interdit l'accï¿œs au serveur de news de Free (et le serveur

>> de news de Neuf est inutilisable)
>
> Il existe un certain nombre d'autres serveurs :

Oui, et certains sont accessibles sur d'autres ports que 119, au cas oᅵ
ce serait l'objet du filtrage.

Pierre Goiffon

unread,
Feb 14, 2011, 8:04:48 AM2/14/11
to
On 14/02/2011 13:05, Tonton Th wrote:
>> Oui désolé, obligé de passer par Google groups en we
>
> Il existe un certain nombre d'autres serveurs :
>
> http://usenet-fr.dougwise.org/Se_connecter_%C3%A0_Usenet-fr

Merci du lien !

J'avais déjà entendu parler de serveur de news sur abonnement...
Wikipedia liste plusieurs serveurs dont certains en lecture ET écriture,
il faut que je me plonge là-dedans... ça risque de ne pas se faire tout
de suite (huhu)

SAM

unread,
Feb 14, 2011, 10:16:18 AM2/14/11
to
Le 14/02/11 12:37, Pierre Goiffon a écrit :

> On 14/02/2011 10:08, SAM wrote:
>>>>>>>> http://pgoiffon.free.fr/_temp/tr_background.html

>> <http://cjoint.com/?0cojDnEc58D>


>> Cette démo ne fonctionne bien que s'il y a la place pour afficher le
>> table sur toute sa largeur de base.
>>
>> La même avec béquille JS pour IE (hover) :
>> <http://cjoint.com/?0cokf9tCH7c>
>
> Beau travail ! La technique du td avec colspan contenant un tableau avec
> reproduction de toutes les cellules donc je vois.

Sauf que le sous-table dans "mon" IE.6 ne respecte pas les col-width

> Mais j'ai un prb de décalage sur le 1er tableau dans Safari 5 et IE7

Un petit rajout de marge en hauteur ?
(entre le table et son conteneur td)
hop!
td.truc { padding: 0 }

Si :
- les colonnes sont de largeurs proportionnelles à l'image de fond
- le table rentre dans la fenêtre (sans rétrécir ses largeurs)
il n'y a pas besoin de sous-table, tant dans Safari.5 que dans "mon" IE.6


> encore (pas testé les autres). Ca semble identique à l'image appliquée
> au TR.
>
> Pas bien compris ce qu'était demo 2 ?

-1: emploi d'une image de fond re-cadrée
-2: largeurs de colonnes fixées
-3: ajout du roll-over sur les rangées
(en JS pour IE, en CSS pour les autres)
-4: une rangée d'1 colonne contenant une table pour démo Safari
(astuce inutile si 1 et 2)


>> eh oui ! IE admettant le '.' dans les noms de classes ... non ?
>
> Ha ils ont fait ça ?

Meuh non ! J'affabule !

> Fichtre, forcément, ça complique dans le cas de ce sélecteur !

alors j'élimine les miens et :
<http://cjoint.com/?0coqiGSLX6y>
Dans mon Opera ça fonctionne comme dans Firefox.

Pierre Goiffon

unread,
Feb 15, 2011, 9:24:50 AM2/15/11
to
On 14/02/2011 16:16, SAM wrote:
>>>>>>>>> http://pgoiffon.free.fr/_temp/tr_background.html

> <http://cjoint.com/?0coqiGSLX6y>

Merci St�phane, comme d'habitude un exemple tr�s bien construit, et les
explications avec ! Je garde dans ma besace cette solution !
Merci encore

0 new messages