Liste structurée et tableaux

Bonjour,

y a-t-il un moyen pour faire ce genre de truc :



c'est a dire: une liste, mais ou chaque ligne est structurée. Globalement l'effet est facilement obtenue avec un tableau, mais comme il s'agit d'un menu, sémantiquement, ça va pas du tout, il faut vraiment que ça reste une liste. Alors je pourrais mettre un tableau de une ligne a chaque item de la liste, mais ce serai lourdeau. il y a surement mieux a faire non ?

une idée ?

Il n'y a aucune objection philosophico-sémantique à le réaliser à l'aide d'un tableau et non d'une liste

Pour les coupeurs de cheveux en huit, il y a bel et bien mise en relation de données par paire, en deux colonnes titrables.

Du point de vue de l'ergonomie et de l'accessibilité, un tableau serait également profitable.

Cela dit, il est tout à fait possible de réaliser le même effet à l'aide d'une liste, en recourant à des flottants dans chaque item. En revanche, le mariage liste-tableau serait effectivement inutilement lourd.

Finalement, pour la facilité de développement, j'adopterais pour ma part la solution "tableau".
Modifié par Laurent Denis (05 Aug 2005 - 08:17)

C'est donc cette direction que je pense prendre. Ce qui est génant c'est que en affichage "CSS desactivé", ce contenu risque d'etre peu lisible ... alors que c'est un élément essentiel


est-il possible d'appliquer des traitements par lignes sur le tableau ? (changer la couleur de fond de toutes les cellules de la ligne au survol d'une de celles ci) ? une balise <a> autour d'une <tr> ?

Heu... ce serait plutôt :

<table>
<caption>Titre du tableau, éventuellement masqué</table>
<thead>
... éventuellement masqué
</thead>
<tbody>
<tr>
<td><a ...>lien en français</a></td>
<td><a ...>lien en arabe</a></td>
</tr>
...
</table>

avec des <a> en display:block pour pouvoir les dimensionner à la totalité de la taille de leur cellule, et utiliser a:hover.
Modifié par Laurent Denis (05 Aug 2005 - 08:39)

Laurent Denis > Il veut un changement de couleur par ligne et non pas par cellule si j'ai bien compris...

Sinon en Javascript, c'est assez simple :

// JavaScript :

function changeCouleurTr()
{
	var ligne=new Array();
	ligne=document.getElementsByTagName('tr');
	for(var j=0;j<ligne.length;j++)
	{
		ligne[j].onmouseover=function(){this.className='over';};
		ligne[j].onmouseout=function(){this.className='out';};
	}
}

// CSS

.over
{
background-color:green;
}

.out
{
background-color:blue;
}

A noter qu'il me semble avoir vu une fois que cette méthode fonctionnait mal avec Opera 7.60, j'ignore pourquoi, à vérifier
Modifié par 84mickael (05 Aug 2005 - 08:47)

Puis-je faire une classe pour les <tr> et au survol de chacun des deux blocs (fr/ar) faire changer la couleur de fond de cette classe ?

tancrede a écrit :
Puis-je faire une classe pour les <tr> et au survol de chacun des deux blocs (fr/ar) faire changer la couleur de fond de cette classe ?

Non il faut faire 2 classes chacune ayant 1 couleur différente. Le survol d'une ligne du tableau inverse la classe CSS associée à cette ligne.

Un exemple
Modifié par 84mickael (05 Aug 2005 - 08:50)

Voila l'effet recherché. ya effectivement un bug avec opéra, mais sinon c'est ça,

merci pour vos conseils !