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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  pb IE/FF tableau couleur

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

pb IE/FF tableau couleur

n°1032559
Zxyankxya
Posté le 01-04-2005 à 16:02:16  profilanswer
 

Le premier but est de faire un tableau (à plusieurs colonnes ca va de soi) ou les lignes changent de couleur (totalité de la ligne en même temps) quand on passe dessus.
Le second but est d'attacher un lien vers une autre page html à une ligne entière.
Au final on voit la ligen qu'on sélectionne car elle change de couleur au passage de la souris, et on clique pour ouvrir la page correspondante.
 
 
Mon code CSS:

Citation :

table#sample {
    font-size:14px;
    border: solid #000 1px;
    width: 700px;
}
 
tr.sample {
 background-color: #CADCFF;
 text-align:left;
    color:#000;
    text-decoration:none;
}
 
tr.sample:hover{
    background-color:#FF6666;
}
 
.toprow {
    font-style: italic;
    text-align: center;
    background-color: #9FFCCB;
}


 
Mon code HTL:

Citation :

<table id="sample" cellspacing="2">
    <tr class="toprow">
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
    </tr>
    <tr class="sample">
        <td >yyyyyyyyyyyyyyyyyyyy</td>
        <td >zzzzzzzzzzzzzzzzzzzz</td>
        <td >zzzzzzzzzzzzzzzzzzzz</td>
    </tr>
    <tr class="sample">
        <td >yyyyyyyyyyyyyyyyyyyy</td>
        <td >zzzzzzzzzzzzzzzzzzzz</td>
        <td >zzzzzzzzzzzzzzzzzzzz</td>
    </tr>
    <tr class="sample">
        <td >yyyyyyyyyyyyyyyyyyyy</td>
        <td >zzzzzzzzzzzzzzzzzzzz</td>
        <td >zzzzzzzzzzzzzzzzzzzz</td>
    </tr>
</table>


 
 
Remarque 1: Avec ce code, dans firefox, le changement de couleur fonctionne nickel, mais pas du tout sous IE.
Remarque 2: Si je mets une balise <a  href""> pour encadrer mes tr, le lien porte bien sur toute la ligne sous IE, mais sous firefox ce n'est absolument pas pris en compte.
 
Please, ô grands gourous, help!


Message édité par Zxyankxya le 01-04-2005 à 16:03:11
mood
Publicité
Posté le 01-04-2005 à 16:02:16  profilanswer
 

n°1032581
Hermes le ​Messager
Breton Quiétiste
Posté le 01-04-2005 à 16:15:30  profilanswer
 

Simple. Ce n'est pas possible sans javascript. [:spamafote]

n°1032589
Zxyankxya
Posté le 01-04-2005 à 16:18:16  profilanswer
 

Et tu pourrais me dire pourquoi exactement? et comment? (paske le javascript et moi hein =) c'est pas que je ne veux pas apprendre, bien au contraire, mais pour le moment chuis une bille)

n°1032598
Hermes le ​Messager
Breton Quiétiste
Posté le 01-04-2005 à 16:26:18  profilanswer
 

Zxyankxya a écrit :

Et tu pourrais me dire pourquoi exactement?


 
le :hover n'est pris en compte qu'avec la balise <a> dans IE contrairement aux autres navigateurs comme Firefox ou Opera.

Citation :


 
 et comment? (paske le javascript et moi hein =) c'est pas que je ne veux pas apprendre, bien au contraire, mais pour le moment chuis une bille)


 
Pas dur.
 
Un id à chaque <tr>
 
Ensuite, un onmouseover qui renvoie à une fonction JS qui va utiliser l'id envoyer (via this) et changer les propriétés CSS du <tr> en utilisant le DOM : exemple : document.getElementById('id_en_cours').style.backgroundColor = "#000000";
 
Même chose avec un onmouseout pour retrouver l'état originel quand la souris quite la zone...

n°1032601
Zxyankxya
Posté le 01-04-2005 à 16:29:22  profilanswer
 

Je sais que chuis chiante, mais comment je fais pour que quand je clique sur n'importe quel élément de la ligne ca m'envoie sur la page que je souhaite? Je dois mettre une balise <a> pour chaque td? (pas tres pratique je trouve)
 
Bon, et pis merci pour ta reponse précédente, je tacherais de faire ca en arrivant lundi, la j'en ai marre, bon week end =)

n°1034612
Iphelias
Posté le 04-04-2005 à 18:08:22  profilanswer
 

Hum jene vois pas trop comment changer le code CSS en javascript :D

n°1034639
Hermes le ​Messager
Breton Quiétiste
Posté le 04-04-2005 à 18:38:54  profilanswer
 

Iphelias a écrit :

Hum jene vois pas trop comment changer le code CSS en javascript :D


 
Relis ma réponse.  

n°1035771
FlorentG
Posté le 05-04-2005 à 14:28:19  profilanswer
 

Zxyankxya a écrit :

Je sais que chuis chiante, mais comment je fais pour que quand je clique sur n'importe quel élément de la ligne ca m'envoie sur la page que je souhaite? Je dois mettre une balise <a> pour chaque td? (pas tres pratique je trouve)
 
Bon, et pis merci pour ta reponse précédente, je tacherais de faire ca en arrivant lundi, la j'en ai marre, bon week end =)


Une balise <a> dans chaque <td> :o Si tu aurais lu la recommandation (ou n'importe quelle DTD XHTML), tu aurais vu qu'on ne peut pas mettre de <a> comme ça dans un <table> ;) Chaque balise suit des règle bien définies : où peut-on les mettre, qu'est-ce qu'on peut mettre dedans, etc...


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

  pb IE/FF tableau couleur

 

Sujets relatifs
Tableau en HTML ?!Tableau en Gtk
Tableau [ Espace ]Probleme avec tableau de chaines...
Afficher des données en 2 collones via un tableaupassant d'un tableau en structure avec div
Changer la couleur de plusieurs lien via la cssCheckbox à partir d'un tableau
Problème de tableaucomment afficher un tableau dans une boite de dialogue?
Plus de sujets relatifs à : pb IE/FF tableau couleur


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