Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
911 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Table + Lien + CSS

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Table + Lien + CSS

n°864044
gamma
Posté le 04-10-2004 à 12:30:20  profilanswer
 

Salut
 
J'ai un tableau assez important, et lorsque que la souris va au dessus d'une cellule, j'ai besoin que la cellule change de couleur.
 
C'est sûr, on peut faire un onmouseover="this.style.backgroundColor='xxx'".
Mais dans le cas réel, cette solution n'est pas possible - à moins de mettre un autre tableau dans chaque cellule :(
J'ai donc essayé de le faire en CSS.
Dans chaque cellule, je mets un lien - CSS du lien "display: block;height: 20px;".
J'ai fait un style:hover - CSS "background-color: #0000FF;".
 
Quand le tableau est petit, les cellules changent correctement de couleur sur IE comme sur Firefox.
Par contre, quand le tableau devient plus important (genre 30*15), sur IE, ça rame - le changement de couleur fonctionne mal si on bouge la souris rapidement (et dans un tableau plus important, c'est encore pire) - sur Firefox, c'est toujours aussi rapide !
 
Voici le code de ma page :

Code :
  1. <style type="text/css">
  2. table {border: 1px solid #000000;border-collapse: collapse;}
  3. td {padding: 0px;border: 1px solid #E8E8FF;height: 20px;font-size: 0px;width: 20px;background-color: #FFFFE8;}
  4. a {display: block;height: 100%;}
  5. a:hover {background-color: #0000FF;}
  6. </style>
  7. <table cellspacing="0">
  8. <script language="JavaScript">
  9.  for ( i = 0; i < 15; i++ ) {
  10.   document.write('<tr>');
  11.   for ( j = 0; j < 30; j++ ) {
  12.    document.write('<td><a href="javascript:;"></a></td>');
  13.   }
  14.   document.write('</tr>');
  15.  }
  16. </script>
  17. </table>


 
Le problème est le même si le tableau est en HTML dur ou généré en HTML dur…
 
Quelqu'un a une explication ?


Message édité par gamma le 04-10-2004 à 12:34:23
mood
Publicité
Posté le 04-10-2004 à 12:30:20  profilanswer
 

n°864059
sibelius
Vous êtes sûr ?
Posté le 04-10-2004 à 12:59:42  profilanswer
 

gamma a écrit :

Salut
 
J'ai un tableau assez important, et lorsque que la souris va au dessus d'une cellule, j'ai besoin que la cellule change de couleur.


Il y a bien plus simple que de s'embrouiller avec des tableaux et du javascript : http://www.alsacreations.com/artic [...] smenu3.htm


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°864108
gamma
Posté le 04-10-2004 à 13:31:02  profilanswer
 

Citation :

Il y a bien plus simple que de s'embrouiller avec des tableaux et du javascript : http://www.alsacreations.com/artic [...] smenu3.htm

Ce que j'ai fait n'est qu'une version archi-simplifiée du résultat final pour montrer le problème.
J'ai déjà pensé aux alternatives - et le tableau est la meilleure solution :)
 
C'est juste que je ne comprends pas la lenteur avec IE :(

n°864110
sibelius
Vous êtes sûr ?
Posté le 04-10-2004 à 13:34:02  profilanswer
 

gamma a écrit :

[quote]
J'ai déjà pensé aux alternatives - et le tableau est la meilleure solution :)


Alors là, faudrait m'expliquer pourquoi parce que ce serait bien la première fois pour ce genre de choses !


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°864158
gamma
Posté le 04-10-2004 à 14:04:35  profilanswer
 

Citation :

Alors là, faudrait m'expliquer pourquoi parce que ce serait bien la première fois pour ce genre de choses !

Peut-être pour afficher des données tabulaire au final :sarcastic: :D

n°864162
sibelius
Vous êtes sûr ?
Posté le 04-10-2004 à 14:06:54  profilanswer
 

gamma a écrit :

Peut-être pour afficher des données tabulaire au final :sarcastic: :D


 
Des données tabulaires bien cachées alors !
 
td {padding: 0px;border: 1px solid #E8E8FF;height: 20px;font-size: 0px;width: 20px;background-color: #FFFFE8;}
 
 :pt1cable:


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°864167
gamma
Posté le 04-10-2004 à 14:11:57  profilanswer
 

Y'a autre chose que du text !
 
edit: et faut pas oublier que c'est un exemple très simplifié


Message édité par gamma le 04-10-2004 à 14:13:02
n°864178
sibelius
Vous êtes sûr ?
Posté le 04-10-2004 à 14:18:27  profilanswer
 

C'est peut-être ça le problème : que vont contenir tes liens si la taille de texte est nulle?
Des images ? générées à la volée? en background ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°864329
brakas234
Posté le 04-10-2004 à 16:02:00  profilanswer
 

essai

n°864372
brakas234
Posté le 04-10-2004 à 16:45:22  profilanswer
 

Code :
  1. <style type="text/css">
  2.     body {font: 14px Verdana, Arial, sans-serif;}
  3. ul {
  4. list-style-type: none; /* on supprime les puces, inutiles */
  5. width: 100%; /* précision pour Opera */
  6. }
  7. li { float: left;} /* on aligne les listes sur la gauche */
  8. .menu a {
  9.      margin: 0 0px;
  10.      width: 20px; /* on définit la taille du bouton de menu */
  11.      height: 20px;
  12.      float: left;
  13.      display: block;
  14.      text-align: center;
  15.      border: 1px solid gray;
  16.      text-decoration: none;
  17.      color: #000;
  18.      background: #fff;
  19.      }
  20. .menu a:hover {
  21.      background: #ccc;
  22.      border: 1px solid gray;
  23.      }
  24. .menu a:active {
  25.      background: gray;
  26.      border: 1px solid gray;
  27.      color: #fff;
  28.      }
  29. </style>
  30. <script language="JavaScript">
  31.     for ( i = 0; i < 15; i++ ) {
  32.          document.write('<ul class="menu">');
  33.         for ( j = 0; j < 30; j++ ) {
  34.             document.write('<li><a href=""></a></li>');
  35.         }
  36.          document.write('</ul>');           
  37.     }
  38. </script>


 
Bonjour
 
Je cherche à faire quelquechose qui ressemble à ce que Gamma explique
 
J'ai repris le code du menu horizontale de ton site
 
Quelques questions :  
 - comment ne pas avoir le grand espace entre deux lignes ?
 - comment gerer une superposition du bord (pour n'avoir une bordure de 1px reellement) (= collapse pour les table) ?
 - comment utiliser les proprietes display:inline et display:block ou float:left pour realiser un "tableau" de div (=ensemble de div en vue de faire un planning)
 
Je ne demande qu'à etre convaincu...

mood
Publicité
Posté le 04-10-2004 à 16:45:22  profilanswer
 

n°864388
gamma
Posté le 04-10-2004 à 17:05:25  profilanswer
 

Pour l'espace entre les lignes :
> ul {margin:0px;}
 
Pour la superposition, ca m'interresse egalement :)
 

n°864429
gamma
Posté le 04-10-2004 à 17:51:18  profilanswer
 

brakas, essaye ce code :
 

Code :
  1. <style type="text/css">
  2. body {
  3.  margin: 0px;
  4. }
  5. ul {
  6.  margin: 0px;
  7.  clear: both; /* je sais pas si c'est tres correct... */
  8. }
  9. li {
  10.  background-color: #FFFFE8;
  11.  border-right: 1px solid #E8E8FF;
  12.  border-bottom: 1px solid #E8E8FF;
  13.  height: 20px;
  14.  width: 20px;
  15.  padding: 0px;
  16.  margin: 0px;
  17.  display: inline;
  18.  float: left;
  19. }
  20. #firstRow li {
  21.  border-top: 1px solid #E8E8FF;
  22. }
  23. li.firstCell {
  24.  border-left: 1px solid #E8E8FF;
  25. }
  26. a {
  27.  display: block;
  28.  height: 100%;
  29. }
  30. a:hover {
  31.  background-color: #0000FF;
  32. }
  33. </style>
  34. <script language="JavaScript">
  35. for ( i = 0; i < 15; i++ ) {
  36.  row1 = (i == 0) ? 'id="firstRow"' : '';
  37.  document.write('<ul '+row1+'>');
  38.  for ( j = 0; j < 30; j++ ) {
  39.   cell1 = (j == 0) ? 'class="firstCell"' : '';
  40.   document.write('<li '+cell1+'><a href="javascript:;"></a></li>');
  41.  }
  42.  document.write('</ul>');
  43. }
  44. </script>


 
 
...mais le problème reste le même avec IE. Et c’est pire si on augmente i ou j !

n°864437
brakas234
Posté le 04-10-2004 à 18:00:22  profilanswer
 

Merci
 
C'est dingue que ca marche si bien sous fireFox et si lentement sous IE
onmouseover="this.style.backgroundColor='xxx'" permet de se passer du <a..></a>
 
Avec

n°864441
brakas234
Posté le 04-10-2004 à 18:04:43  profilanswer
 

Code :
  1. <style type="text/css">
  2.     body {
  3.         margin: 0px;
  4.     }
  5.    
  6.     ul {
  7.         margin: 0px;
  8.         clear: both; /* je sais pas si c'est tres correct... */
  9.     }
  10.     li {
  11.         background-color: #FFFFE8;
  12.         border-right: 1px solid #E8E8FF;
  13.         border-bottom: 1px solid #E8E8FF;
  14.         height: 20px;
  15.         width: 20px;
  16.         padding: 0px;
  17.         margin: 0px;
  18.         display: inline;
  19.         float: left;   
  20.     }
  21.        
  22.     #firstRow li {
  23.         border-top: 1px solid #E8E8FF;
  24.     }   
  25.    
  26.     li.firstCell {
  27.         border-left: 1px solid #E8E8FF;
  28.     }
  29. </style>
  30. <script language="JavaScript">
  31.     for ( i = 0; i < 50; i++ ) {
  32.         row1 = (i == 0) ? 'id="firstRow"' : '';
  33.        
  34.         document.write('<ul '+row1+'>');
  35.         for ( j = 0; j < 30; j++ ) {
  36.            
  37.             cell1 = (j == 0) ? 'class="firstCell"' : '';
  38.             document.write('<li '+cell1+' onmouseover="this.style.backgroundColor=\'#0000FF\'" onmouseout="this.style.backgroundColor=\'#FFFFE8\'"></li>');
  39.         }
  40.         document.write('</ul>');
  41.     }
  42. </script>


Test ça : tu vas voir comment c'est réactif : c'est dingue !
 
Par contre, ta ruse pour n'avoir un bord de 1 px d'epaisseur est legère. Y'a pas moyen de faire un truc plus propre ?

n°864443
gamma
Posté le 04-10-2004 à 18:08:59  profilanswer
 

> Test ça : tu vas voir comment c'est réactif : c'est dingue !  
Déjà testé :)
Mais le code est plus long et c'est sur toute la cellule. Avec le lien, y’a moyen de jouer sur la hauteur :)
 
> Par contre, ta ruse pour n'avoir un bord de 1 px d'epaisseur est legère.
> Y'a pas moyen de faire un truc plus propre ?
J’ai rien trouvé :(  
Les span, div ou li sont `indépendant` et dans le table, c’est différent…

n°864732
gm_superst​ar
Appelez-moi Super
Posté le 05-10-2004 à 00:11:45  profilanswer
 

Puisque tu utilises JavaScript pour générer ton tableau essaye de faire ça proprement en utilisant les fonctions DOM pour ajouter au tableau les lignes au fur et à mesure et, pour chaque ligne, les cellules.
 
Donc, voir la fonction document.createElement() (pour créer les TR et les TD) ; la fonction ton_element.appendChild() (pour ajouter les TR à TABLE et les TD à TR)
 
Ensuite, à chaque cellule créée il te suffira d'attacher les évènements onmouseover et onmouseout. (fonction attachEvent() pour IE et addEventListener() pour Moz)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°864741
gamma
Posté le 05-10-2004 à 00:52:35  profilanswer
 

>>Puisque tu utilises JavaScript pour générer ton tableau
Dans le cas réel, le tableau est qu'en HTML (générer en PHP – mais le résultat [lenteur sur IE] est le même) - je l'ai mis en JS pour alléger le code et pouvoir le mettre ici (et aussi faire différent tests) :)
 
En tout cas, je connaissais pas du tout createElement() & co – je vais aller sur google pour voir plus d’info - thanks

n°864746
gm_superst​ar
Appelez-moi Super
Posté le 05-10-2004 à 01:15:07  profilanswer
 

Ben si le tableau est déjà fait tu peux essayer d'utiliser getElementsByTagName("td" ) (à appliquer au tableau) pour récupérer d'un coup toutes les cellules et sur lesquelles il te resteras plus qu'à attacher les évènements.
 
Ceci dit il est possible que ça reste lent avec IE. Cette méthode a l'avantage de se passer de l'élément A pour faire le hover et c'est peut être cet élément superflu qui fait que ça rame. Si ça va pas plus vite c'est que IE est irrémédiablement lent pour ce genre de chose [:spamafote]


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°864748
gamma
Posté le 05-10-2004 à 01:22:48  profilanswer
 

Citation :

Ben si le tableau est déjà fait tu peux essayer d'utiliser getElementsByTagName("td" ) (à appliquer au tableau) pour récupérer d'un coup toutes les cellules et sur lesquelles il te resteras plus qu'à attacher les évènements.

C'est une soluce – Je vais voir comment ça marche exactement :)- ce que j'aimais bien avec les liens, c'est que je pouvais en mettre plusieurs dans la même cellule (pratique pour diviser en zone) et que xxx:hover fonctionne uniquement avec les liens sur IE :( (Ca me permettait donc de me passer de JS)
 
Au fait, ça ne risque pas d’être trop lent de faire getElementsByTagName("td" ) + appliquer les événements pour un gros tableau ?
 

Citation :

Si ça va pas plus vite c'est que IE est irrémédiablement lent pour ce genre de chose [:spamafote]

Dommage :(  
 
Thanks


Message édité par gamma le 05-10-2004 à 01:24:44
n°864824
gm_superst​ar
Appelez-moi Super
Posté le 05-10-2004 à 09:50:01  profilanswer
 

gamma a écrit :

getElementsByTagName("td" ) + appliquer les événements pour un gros tableau ?


C'est quoi pour toi un gros tableau ?
 
De toute façon il faudra bien tester...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Table + Lien + CSS

 

Sujets relatifs
Problème de lien sur mon site avec LycosParcours d'une table de la ligne * à la fin
[Assez urgent] Lien au sein d'un tableau, c'est possible ?Lien hypertexte sur les Modèles (.DOT)
[VB]Passer une valeur dans une table Accessmon lien a href modifie la taille de la font
MySQL a répondu : #1036 - Table 'Sites' is read only[CSS] Positionnement bloc
Executer un dumping de table MySQL toutes les x heuresEnumerer les cases d'une table en vertical d'abord
Plus de sujets relatifs à : Table + Lien + CSS


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR