Affichage d'un tableau au survol d'un lien

Bonjour a tous,
Voici mon soucis : je créé actuellement une application de suivi de budget a base de (popopopo) php/mysql, et pour le rendu a l'ecran, j'utilise bien evidemment le couple HTML/CSS.
A l'heure actuelle, tout marche bien. Donc je suis en train de fignoler, et je me suis dit que tant qu'a y etre, autant respecterles recommendations W3C.

Et j'ai donc un soucis pour les respecter au niveau d'une "astuce" que j'ai utilisé.
En clair, pour connaitre l'historique d'un montant, il suffit de survoler avec sa souris ledit montant, et un tableau s'affiche par dessus le reste contenant la somme des dépenses, et des détails, dont la somme egale le montant en question.

J'ai donc en HTML une structure qui ressemble a ca :

<a class='bulle'>250
      <span>
            <table>
                  <tr>
                        <td>depense1</td>
                        <td>100</td>
                  </tr>
                  <tr>
                        <td>depense2</td>
                        <td>150</td>
                  </tr>
            </table>
      </span>
</a>

et pour mon CSS, c'est comme ca :

a.bulle {
	position: relative;
	text-decoration: none;
	color : #0058EE;
	font-weight: bold;
	z-index:1;
}

a.bulle span {
	display : none;
	z-index:10;
}

a.bulle:hover {
	background: none; /* correction d'un bug IE */
	z-index:10;
}

td a.bulle:hover span {
	display: block;
	position: absolute;
	top: 1.5em;
	left: -15.5em;
	padding-left:5px;
	background-position: top left;
	background-color: white;
	text-align: left;
	text-decoration:none;
	color: black;
	width: 400px;
	z-index:100;
}

Donc apparement, un tableau dans un span, ca ne respecte pas les standards. Connaitriez vous une solution pour que ca continue de fonctionner, mais qu'en plus je respecte les recommendations ?

Hello

Jete un oeil à son menu à lui ... http://www.cssplay.co.uk/menus/flyoutt.html
Il utilise les tableaux comme tu essais de le faire

Il est super ce site, il y a plein de techniques a base de CSS.
Mais malheuresement, il n'y a pas la solution a mon probleme, il utilise des listes pour son menu, et c'est ce sur quoi je m'etait basé, pour l'adapter a mon besoin (le tableau). Je n'avance donc guere vers mon désir de respecter les recommendations.

Hello,

J'ai peur que tu ne puisses pas utiliser cette solution telle quelle en respectant les standards. Pour que l'état :hover du lien provoque l'apparition d'un élément, il faut que l'élément en question soit un noeud descendant du lien, ce qui nécessite donc que ton tableau soit un descendant du lien. Ce n'est pas valide, et pour cause : imagines-tu la tête de ton lien si les CSS sont désactivées ?

A mon avis, tu as deux solutions : remplacer ton tableau par un ensemble de "span" que tu positionneras avec les CSS, ce qui risque d'être assez lourd et peut-être encore moins compréhensible sans les CSS. Ou alors utiliser Javascript, solution qui me semble tout à fait adaptée (à condition bien sûr de faire en sorte que toutes les informations soient disponibles si Javascript est désactivé).

Bon courage en tout cas.
Modifié par Eldebaran (30 Nov 2006 - 12:03)

Je suis décu

M'enfin ... c'est pas trop grave non plus.

Vu que je suis vraiment mauvais en javascript, je vais eviter de tripoter cet aspect de ma page, tant pis.

Sinon, pour l'histoire, ce que j'affiche au survol du lien, n'est pas un élément essentiel pour mon application, c'est plus un element de confort, un apercu (le terme est mal choisi, on ne voit que les infos essentiel) de ce que l'on voit si on clique sur le lien qu'on survol (qui la affiche toutes les infos).

Mais bon, je pense que ca va rester comme c'est vu que de toute facon je viens de m'appercevoir que j'avais des attributs proprietaires sur certains inputs (pour faire des listes déroulantes qui se remplissent au fur et a mesure de la frappe).

Pour un autre projet peut etre arriverai je a respecter les standards.

Sinon, ne peux-tu pas faire quelque chose dans ce genre (ce n'est qu'une ébauche à améliorer) ?

[b]HTML[/b]

<a href="#">Lien <span class="infobulle"><span>pouet : coin</span> <span>tsoin : tsoin</span></span></a>

[b]CSS[/b]

a span {display: block;}
a .infobulle {display: none;}
a:hover .infobulle {display: block; position: absolute;}

Modifié par Eldebaran (30 Nov 2006 - 12:10)