pb IE/FF tableau couleur

pb IE/FF tableau couleur - HTML/CSS - Programmation

Marsh Posté le 01-04-2005 à 16:02:16    

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
Reply

Marsh Posté le 01-04-2005 à 16:02:16   

Reply

Marsh Posté le 01-04-2005 à 16:15:30    

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

Reply

Marsh Posté le 01-04-2005 à 16:18:16    

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)

Reply

Marsh Posté le 01-04-2005 à 16:26:18    

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...

Reply

Marsh Posté le 01-04-2005 à 16:29:22    

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 =)

Reply

Marsh Posté le 04-04-2005 à 18:08:22    

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

Reply

Marsh Posté le 04-04-2005 à 18:38:54    

Iphelias a écrit :

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


 
Relis ma réponse.  

Reply

Marsh Posté le 05-04-2005 à 14:28:19    

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...

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed