Forum Programmation.web hover sur tableau

• # CSS

  Posté par Obsidian le 19 décembre 2004 à 22:24. Évalué à 2.

  

  Note : je sais que l'idéal serait de se débarasser du tableau, c'est prévu pour un peu plus tard mais la modif serait un peu grosse en 1 fois.
  
  Cela dépend : Si ce que tu affiches avec tes TABLE/TD/TR est vraiment une table, ou à la rigueur une liste, l'emploi de ces balises est tout à fait justifié. Il faut considérer le HTML/CSS au même titre que le SGML. Les balises décrivent la nature de ce qu'elles contiennent.
  
  Si ton idée est de faire la même chose que le webmail, par exemple, TABLE et ses dérivés sont ce qu'il faut utiliser.
  
  La vraie question est : Quel navigateur utilises-tu ? Le problème des CSS est vraiment une plaie : Malgré le fait que ces spécifications soient parus au 20ème siècle, il n'y a toujours pas un navigateur qui les implémente parfaitement et dans leur intégralité.
  
  Pour le TR/TD, j'ai déjà eu le même problème. A mon avis, cela vient du fait qu'un TR contient un TD, et que ce dernier intercepte l'événement avant le TR, puisqu'il il le superpose. Il se peut aussi que ta cellule TD n'ait pas un fond transparent, ce qui masque l'apparence de la ligne TR qui la contient, et donc l'apparence de celle-ci. Essaie déjà d'agir à ce niveau, mais bizarrement, "transparent" n'est pas reconnu par le validateur CSS W3C (il me semble pourtant qu'il est dans les spécifications CSS, au moins la deuxième).
  
  Sinon, je n'ai pas essayé, mais plutôt que de redéfinir TR, tu pourrais essayer d'encadrer toute la ligne TR-TD-/TD-/TR dans un DIV qui lui serait redéfini au niveau de la CSS pour agir ainsi. Exemple :
  
  <style type="text/css">
  div.highlight:hover tr { background-color: #ffffff}
  div.highlight tr { background-color: #808080 }
  </style>
  
  <table>
  <div class="highlight">
  <tr>
  <td>Un</td>
  <td>Deux</td>
  <td>Trois</td>
  </tr>
  </div>
  <div class="hightlight">
  ...
  </div>
  </table>
  
  Bon, c'est pas très beau, c'est de l'abus d'usage de DIVs, et je ne suis pas sûr que cela marche, et encore moins que le validateur W3C te laisse définir une section en plein milieu d'une table mais en dehors d'une cellule, mais au moins cela permet d'éviter complètement l'usage de scripts runtime et conserve la philosophie descriptive du document.
  
  Bon courage.

  • [^] # Re: CSS

    Posté par Pinaraf le 19 décembre 2004 à 23:00. Évalué à 2.

    

    SS browsers implementations CSSLa vraie question est : Quel navigateur utilises-tu ? Le problème des CSS est vraiment une plaie : Malgré le fait que ces spécifications soient parus au 20ème siècle, il n'y a toujours pas un navigateur qui les implémente parfaitement et dans leur intégralité.
    HU ?
    Il me semble que les CSS 1 sont supportées à 100% par plusieurs navigateurs, et qu'une bonne partie des CSS 2 est supportée par la majorité des bons navigateurs (mozilla, konqueror, opera...). Quant aux CSS 3, elles ne sont qu'au stade de brouillon mais leur support se prépare dans mozilla et khtml...
    Il me semble qu'on puisse trouver sur internet des comparaisons de navigateurs sur ce point de vue là : http://www.quirksmode.org/css/contents.html(...) par exemple

  • [^] # Re: CSS

    Posté par Seazor le 20 décembre 2004 à 17:23. Évalué à 2.

    

    J'essaye de broder là dessus, mais ca n'a pas l'air d'aller...
    'fin je vais revérifier ma page de test parce que je suis pas certain de ce que j'y ai mis...

• # Solution

  Posté par Amand Tihon (site web personnel) le 20 décembre 2004 à 01:41. Évalué à 2.

  

  Un exemple minimaliste qui fonctionne tant sous Firefox que sous Konqueror (pas d'autre browser pour tester) :
  http://allergy.alrj.org/CSS/table-hover.html(...)
  
  La partie tr:hover td est nécessaire pour que ça fonctionne sous Konqueror, mais Firefox s'en passe très bien.

  • [^] # Re: Solution

    Posté par Seazor le 20 décembre 2004 à 17:25. Évalué à 3.

    

    Le principe est bon, mais je me heurte a https://bugzilla.mozilla.org/show_bug.cgi?id=221952(...)

• # Le code

  Posté par Seazor le 20 décembre 2004 à 21:43. Évalué à 3.

  

  Contrairement à ce que je disais ci-dessus, je voulais commencer par le border, et ensuite essayer d'ajouter les couleurs de fond.
  Tout ceci en me basant sur l'exemple cité dans un commentaire ci-dessus.
  Avant de poster ceci dans un attachement sur https://bugzilla.mozilla.org/show_bug.cgi?id=221952 , je voudrais que vous vérifiez que c'est bien un bug et pas une erreur de code de ma part... (ben oui, je débute !!)
  
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
  <title>Hover on&lt;tr&gt;</title>
  <style type="text/css">
  body { background: white; color: black; }
  table.tabletest { border-collapse: collapse ; border: 3px solid red; }
  tr.trRow { border: 3px solid blue; }
  tr.trRow:hover { border: 3px solid yellow; }
  </style> </head>
  <body>
  <table class="tabletest">
  <tbody>
  <tr class="trRow"><td>Row 1</td><td>Row 1</td></tr>
  <tr class="trRow"><td>Row 2</td><td>Row 2</td></tr>
  <tr class="trRow"><td>Row 3</td><td>Row 3</td></tr>
  </tbody> </table>
  </body>
  </html>
  
  Et merci d'avance à celui qui pourrait m'expliquer ce que j'ai éventuellement loupé dans l'encadrement de la ligne complete par le hover...

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.