[Résolu] Refaire une interface propre sans tableau

Bonjour à tous,

j'aimerais dans le cadre du dévellopement d'un outil d'administration créer une interface dans ce style la (EDIT par Felipe: voir fin de post) (à savoir le tableau qui, lorsqu'on click sur une des lignes ouvres une zone de "description" plus importante).

Bien sûre, je pourrait refaire bêtement comme le site en question, mais mon petit doigt me dit que ce n'est pas très accessible tout ça. En effet, il me semble que des colspan dans un tableau une ligne sur deux doient être un bon moyen de perdre certain utilisateur malvoyant non? Ajoutez à ça un tableau dans un tableau et là c'est carrément l'anarchie.

D'où ma question, est il possible de réaliser quelque chose de semblable avec une structure xhtml propre et accessible? Si oui (ce dont j'en suis sûr), avez vous quelques idées?

merci d'avance ... en attendant je cogite de mon côté

EDIT par Felipe: le lien est explicatif mais hors-charte, désolé pour la fausse pudeur mais je le "brise", les experts le reconstitueront facilement ... 3 espaces ont été rajoutés
ht tp://www .isohunt.com/tor rents/?ihs1=&iho1=&iht=3
Modifié par Francois44 (14 Jan 2007 - 00:29)

OOPS ... désolé, j'avais pas pensé que le lien pouvait "heurter" la pudeur de certain . Promis, je ferais attention désormais. Au moins ça prouve que même avant les fêtes, les modos sont toujours sur le coup ... chapeau!!!


Après quelques recherche, j'en suis arriver à essayer quelque chose avec une liste de définition (<dl> + <dd> + <dt>). N'étant pas très à laise avec ce type de balise étant donné que c'est la première fois que je l'utilise, j'attend vos remarques (nottament sur l'accessibilité, la lisibilité et la logique) sur le code suivant.

Bien sûr, ceci n'est que le xhtml, une couche de CSS et un script JS non intrusif sont à l'étude

<h1>Liste des Groupes d'utilisateurs:</h1>
<dl>
	<dt><h2>WebMaster</h2></dt>
		<dd>Une courte description du groupe "WebMaster"</dd>
		<dd>
			Liste des modules et des droits d'accès:
			<ul>
				<li>Module A
					<ul>
						<li>Modifier</li>
						<li>Ajouter</li>
						<li>Supprimer</li>
						<li>Exporter</li>
					</ul>
				</li>
				</li>Module B
					<ul>
						<li>Modifier</li>
						<li>Exporter</li>
					</ul>
				<li>
				</li>Module C
					<ul>
						<li>Modifier</li>
						<li>Ajouter</li>
						<li>Supprimer</li>
					</ul>
				</li>
			</ul>
		</dd>
		
	<dt><h2>Stagiaire</h2></dt>
		<dd>Une courte description du groupe "Stagiaire"</dd>
		<dd>
			Liste des modules et des droits d'accès:
			<ul>
				<li>Module A
					<ul>
						<li>Ajouter</li>
						<li>Exporter</li>
					</ul>
				</li>
				</li>Module B
					<ul>
						<li>Exporter</li>
					</ul>
				</li>
			</ul>
		</dd>

	<dt><h2>un autre pour les tests</h2></dt>
		<dd>Une courte description du groupe "un autre pour les tests"</dd>
		<dd>
			Liste des modules et des droits d'accès:
			<ul>
				<li>Module A
					<ul>
						<li>Exporter</li>
					</ul>
				</li>
			</ul>
		</dd>
</dl>

Encore une fois, n'hésitez pas à dire ce que vous en pensez, je mettrai bien entendu le résultat de ce travail à la disposition de la communauté

Sur ce, bonne fête à tous!
Modifié par Francois44 (23 Dec 2006 - 12:37)

Salut.

Je ne vois pas le rapport avec le lien de ton premier post ?

D'autre part, je suis sceptique en ce qui concerne l'utilisation des listes de définition. On ne peut pas vraiment parler de définition littérale des termes placés dans les balises <dt>, si ? Cela rend ton code xhtml inutilement lourd, AMHA. Je supprimerais simplement les <dl>, <dd> & <dt> :

<h1>Liste  des Groupes d'utilisateurs</h1>
<h2>Webmaster</h2>
<p class="description">Description du groupe webmaster</p>
<h3>Modules & droits d'accès</h3>
<ul>
   <li>Module A
      <ul>
         <li>Modifier</li>
         <li>Ajouter</li>
         <li>Supprimer</li>
         <li>Exporter</li>
      </ul>
   </li>
   ...
</ul>

etc.

Bonne année à tous!

Désolé pour ce laps de temps d'absence, je revien de vacances

a écrit :

Je ne vois pas le rapport avec le lien de ton premier post ?

En fait, j'essai de faire l'interface du lien de mon premier post en ayant une structure propre et surtout compréhensible par tous ... Je suis donc parti sur un concept sans tableau mais peut être que je fait fausse route?


Sinon, pour les listes de définition, je note ta remarque Sopo ...

Je n'ai pas vraiment avancé la dessus pour l'instant. Je reste donc ouvert à toutes remarques ou example me pemettant de réaliser ou du moins, de me mettre sur une (bonne) piste, afin de réaliser une interface proche (ou identique) à celle de mon premier poste.

Les tableaux c'est pas le diable ... c'est pour quand on veut faire qqch en ligne avec des colonnes de taille fixe donc si c'est ce que tu veux faire vas-y.

Mais comme je comprends pas bien ce que tu veux faire je peux pas t'aider plus ...

Je récapitule ce que j'aimerai faire:

il s'agit d'une présentation tabulaire de données (la liste des adhérents à un club d'athlétisme par exemple, mais cela pourrait être autre chose). Jusque là, pas de soucis, on obtient un tableau comme ceci :



Maintenant, je voudrais ajouter des informations sur l'adhérent qui ne sont pas tabulaire (elle ne respecte pas forcémént la logique des colonnes établie)

voici un exemple:


Le tout doit être le plus accessible possible.
Une fois que je saurais comment faire la structure, il ne me restera plus qu'a réaliser le code JS (non intrusif bien sûre) qui permettra de cacher/montrer les informations complémentaires.

Voilà, je ne sais pas si c'est plus clair ...

Si la réalisation en tableau d'un tel interface est accessible par tous (je pense surtout aux non voyants), je suis prêt à le faire, mais j'avais (j'ai) des doutes donc si quelqu'un peut m'éclairer ...
Modifié par Francois44 (03 Jan 2007 - 11:21)

CNeo a écrit :
Les tableaux c'est pas le diable ... c'est pour quand on veut faire qqch en ligne avec des colonnes de taille fixe donc si c'est ce que tu veux faire vas-y.

Elle m'avait échappé, celle-là

Les tableaux, c'est pour les données tabulaires. Point barre.

Cependant, on les utilise pour la mise en forme dans certains cas, où on n'a pas le choix (traduire par "pour rester compatible avec tous les navigateurs courants"), et notamment dans le cas de deux colonnes de même hauteur & de largeur fluide

@Francois44: la première image me fait plutôt penser à une liste qu'à un tableau.

A priori, rien ne t'empêche d'utiliser une structure comme celle-ci:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Liste de membres</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
li.membre p, li.membre ul {
	float: left ;
	margin: 0 ;
	padding: 0 ;
	width: 25% ;
	}
</style>
</head>

<body>
	<ul>
		<li class="membre">
			<h3>Nom Prénom,	genre, âge</h3>
			<p class="photo">
				<img src="" alt="photo de nom" />
			</p>
			<ul class="fonctions">
				<li>fonction 1</li>
				<li>fonction 2</li>
			</ul>
			<ul class="performances">
				<li>perf 1</li>
			</ul>
			<ul class="qualifications">
				<li>Qualif</li>
			</ul>
		</li>
	</ul>
</body>

</html>

Tu peux aussi laisser tomber la liste et considérer celà comme une suite de fiches individuelles, et les placer dans des div. Question de point de vue

Merci Thomas D pour les infos