Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Prb background-image sur un TR

20 réponses
Avatar
Pierre Goiffon
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 ?

10 réponses

1 2
Avatar
SAM
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
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 0>
<col width00>
<col width0>
<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 ;-)

--
Stéphane Moriaux avec/with iMac-intel
Avatar
Pierre Goiffon
On 13 fév, 02:13, SAM
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 :)
Avatar
Pierre Goiffon
On 13 fév, 02:15, SAM
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ême s
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 0>
<col width00>
<col width0>
<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 pa s
êtr eune partie de plaisir comme tu le dis...
Avatar
SAM
Le 13/02/11 11:37, Pierre Goiffon a écrit :
On 13 fév, 02:13, SAM
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 ;-)


--
Stéphane Moriaux avec/with iMac-intel
Avatar
Pierre Goiffon
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 !
Avatar
Tonton Th
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/
Avatar
Olivier Miakinen
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.
Avatar
Pierre Goiffon
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)
Avatar
SAM
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.

--
Stéphane Moriaux avec/with iMac-intel
Avatar
Pierre Goiffon
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
1 2