Table + Lien + CSS

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Table + Lien + CSS

gamma

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 :

<style type="text/css">
table {border: 1px solid #000000;border-collapse: collapse;}
td {padding: 0px;border: 1px solid #E8E8FF;height: 20px;font-size: 0px;width: 20px;background-color: #FFFFE8;}
a {display: block;height: 100%;}
a:hover {background-color: #0000FF;}
</style>
<table cellspacing="0">
<script language="JavaScript">
for ( i = 0; i < 15; i++ ) {
document.write('<tr>');
for ( j = 0; j < 30; j++ ) {
document.write('<td><a href="javascript:;"></a></td>');
}
document.write('</tr>');
}
</script>
</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

Publicité

sibelius

Vous êtes sûr ?

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

gamma

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

sibelius

Vous êtes sûr ?

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

gamma

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:

sibelius

Vous êtes sûr ?

gamma a écrit :

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

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

gamma

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

sibelius

Vous êtes sûr ?

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

brakas234

essai

brakas234

Code :

<style type="text/css">
body {font: 14px Verdana, Arial, sans-serif;}
ul {
list-style-type: none; /* on supprime les puces, inutiles */
width: 100%; /* précision pour Opera */
}
li { float: left;} /* on aligne les listes sur la gauche */
.menu a {
margin: 0 0px;
width: 20px; /* on définit la taille du bouton de menu */
height: 20px;
float: left;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}
.menu a:hover {
background: #ccc;
border: 1px solid gray;
}
.menu a:active {
background: gray;
border: 1px solid gray;
color: #fff;
}
</style>
<script language="JavaScript">
for ( i = 0; i < 15; i++ ) {
document.write('<ul class="menu">');
for ( j = 0; j < 30; j++ ) {
document.write('<li><a href=""></a></li>');
}
document.write('</ul>');
}
</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...

Publicité

gamma

Pour l'espace entre les lignes :
> ul {margin:0px;}

Pour la superposition, ca m'interresse egalement

gamma

brakas, essaye ce code :

Code :

<style type="text/css">
body {
margin: 0px;
}
ul {
margin: 0px;
clear: both; /* je sais pas si c'est tres correct... */
}
li {
background-color: #FFFFE8;
border-right: 1px solid #E8E8FF;
border-bottom: 1px solid #E8E8FF;
height: 20px;
width: 20px;
padding: 0px;
margin: 0px;
display: inline;
float: left;
}
#firstRow li {
border-top: 1px solid #E8E8FF;
}
li.firstCell {
border-left: 1px solid #E8E8FF;
}
a {
display: block;
height: 100%;
}
a:hover {
background-color: #0000FF;
}
</style>
<script language="JavaScript">
for ( i = 0; i < 15; i++ ) {
row1 = (i == 0) ? 'id="firstRow"' : '';
document.write('<ul '+row1+'>');
for ( j = 0; j < 30; j++ ) {
cell1 = (j == 0) ? 'class="firstCell"' : '';
document.write('<li '+cell1+'><a href="javascript:;"></a></li>');
}
document.write('</ul>');
}
</script>

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

brakas234

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

brakas234

Code :

<style type="text/css">
body {
margin: 0px;
}
ul {
margin: 0px;
clear: both; /* je sais pas si c'est tres correct... */
}
li {
background-color: #FFFFE8;
border-right: 1px solid #E8E8FF;
border-bottom: 1px solid #E8E8FF;
height: 20px;
width: 20px;
padding: 0px;
margin: 0px;
display: inline;
float: left;
}
#firstRow li {
border-top: 1px solid #E8E8FF;
}
li.firstCell {
border-left: 1px solid #E8E8FF;
}
</style>
<script language="JavaScript">
for ( i = 0; i < 50; i++ ) {
row1 = (i == 0) ? 'id="firstRow"' : '';
document.write('<ul '+row1+'>');
for ( j = 0; j < 30; j++ ) {
cell1 = (j == 0) ? 'class="firstCell"' : '';
document.write('<li '+cell1+' onmouseover="this.style.backgroundColor=\'#0000FF\'" onmouseout="this.style.backgroundColor=\'#FFFFE8\'"></li>');
}
document.write('</ul>');
}
</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 ?

gamma

> 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, ya 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 ?
Jai rien trouvé
Les span, div ou li sont `indépendant` et dans le table, cest différent

gm_superstar

Appelez-moi Super

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

gamma

>>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 dinfo - thanks

gm_superstar

Appelez-moi Super

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

gamma

Citation :

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

gm_superstar

Appelez-moi Super

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

FORUM HardWare.fr

Programmation

HTML/CSS

Table + Lien + CSS

Sujets relatifs
Problème de lien sur mon site avec Lycos	Parcours 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 Access	mon 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 heures	Enumerer les cases d'une table en vertical d'abord
Plus de sujets relatifs à : Table + Lien + CSS

Page générée en 0.061 secondes