28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème structurel et de mise en forme pour les tableaux

Bonjour,

Après une bonne semaine de recherche, sur ce forum et sur le net, je me permet de poser un épineux problème HTML et CSS.

Voilà, dans un site Intranet que je fais évoluer, je dois mettre en place un questionnaire destiné aux internautes afin de prendre leur avis sur le site en lui même.

Afin d'être le plus "user friendly", il a été décidé en réunion de la nécessité d'un comportement bien précis (et le mandataire de la réalisation c'est bibi...) :

Le questionnaire présente une série de proposition ("la nouvelle mouture de ce site vous plait-elle ?", "les couleurs sont-elles à votre goût ?", etc...) et plusieurs réponses possibles à chaque fois ("Oui", "Je ne sais pas", "Non", etc...).

Ce sont des données tabulaires, donc on utilise une balise "table" pour les présenter (et là, je n'ai pas trop le choix).

Là où cela se corse, c'est le comportement attendu : lorsque l'utilisateur clique dans la case, mais pas forcément sur le bouton radio, il faut que le bouton radio se coche !


Bon, j'ai déjà trouvé un début de solution a peu prés propre :

HTML:

<table class="question">
  <tr>
    <td></td>
    <td>Oui</td>
    <td>Ne sais pas</td>
    <td>Non</td>
  </tr>
  <tr>
    <td>Proposition 1...</td>
    <td><div><input tabindex="1" type="radio" name="Proposition1" id="Proposition1_1" value="1"/><label for="Proposition1_1">&nbsp;</label></div></td>
    <td><div><input tabindex="2" type="radio" name="Proposition1" id="Proposition1_2" value="2"/><label for="Proposition1_2">&nbsp;</label></div></td>
    <td><div><input tabindex="3" type="radio" name="Proposition1" id="Proposition1_3" value="3"/><label for="Proposition1_3">&nbsp;</label></div></td>
  </tr>
...
</table>



CSS :

.question, .question tr 
{
	position: relative;
	vertical-align: top;
}


.question tr td
{
	border: solid 1px black;
	position: relative;
	background-color: red;
	padding: 0px;
	margin: 0px;
/*	width: 120px;
	height: 60px;*/
}

.question tr td div
{
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	border: solid 1px Yellow;
	vertical-align: middle;
	text-align: center;
}

.question tr td div label
{
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: Blue;
}

.question tr td input
{
	position: relative;
	z-index: 100;
	background-color: Green;
}


Bon, j'espère que le code reste à peu prés clair. Mon problème est que je ne peux pas fixer de hauteur pour les cellules. Le div à l'intérieur de chaque td me permet de contourné un bug du core de mozilla (http://www.quirksmode.org/css/mozilla_table.html), mais il n'arrive pas à s'adapter à 100% de la hauteur du td, son conteneur parent.

Sans le div, en mettant le label en absolut, ça marche sous IE et safari, mais pas sous FireFox et Mozilla... Avec le div, ça marche presque mais le div ne prend pas toute la hauteur de la cellule...


Si quelqu'un a une idée, il me sauve la vie !!

Merci de toute façon de vous intéresser à mon problème...

A bientôt,
Jérôme.
Modifié par Jeronimo_Paris (26 May 2009 - 13:16)
Modérateur
Salut et bienvenue sur le forum,

Là je ne pas beaucoup t'aider car ce soir on m'attend. Toutefois, je vois deux belles erreurs dans ton code html. Je dirai plutôt ceci en lisant vite fait ton code :


[b]<form action="ma_page.ext" method="post">[/b]
<table class="question">	
	<tr>
		<td>Oui</td>
		<td>Ne sais pas</td>
		<td>Non</td>
	</tr>
	<tr>
		<td>Proposition 1...</td>
		<td><div><input tabindex="1" type="radio" name="Proposition1" id="Proposition1_1" value="1"/><label for="Proposition1_1">&nbsp;</label></div></td>
		<td><div><input tabindex="2" type="radio" name="Proposition1" id="Proposition1_2" value="2"/><label for="Proposition1_2">&nbsp;</label></div></td>
		<td><div><input tabindex="3" type="radio" name="Proposition1" id="Proposition1_3" value="3"/><label for="Proposition1_3">&nbsp;</label></div></td>
	</tr>
<!--suite questionnaire -->
</table>
[b]</form>[/b]


Si d'ici là, personne t'a aider, je verrai ce que je peux faire demain.

Bonne soirée à toi

ps : Au passage, oublie la mise en page tableau. C'est pas bon Smiley cligne
Modifié par Nolem (25 May 2009 - 14:05)
Bonsoir,

Merci pour votre réponse, elle ne me donne pas de solution, mais au moins c'est sympa de vous y intéresser.
Smiley smile

Pour la mise en forme par tableau, j'imagine que vous devez sans doute dire ça à longeur de temps sur ce forum. Smiley confused

Néanmoins, je tiens à préciser mon propos s'il n'était pas assez clair :
- la mise en forme par tableau est dans ce cas précis la meilleure façon de concevoir le questionnaire (je tiens à vous rassurer; ça doit être le seul tableau dans la partie dont je m'occupe);
- le tableau m'est donné par une fonction C#, donc ça m'est imposé... (en fait, je ne dois m'occuper que de la mise en page et des fonctionnalités dites 'clientes' sur cette page).
- j'ai omis le tag "form" (et les tags html, head, body et autres) afin de ne pas polluer trop le code (le tableau, c'est déjà pas facile à lire....)
- dernier point, mais c'est un détail, je suis étonné du "[]" dans l'attribut "type" du tab "input"... En tout cas, ça ne semble pas nécessaire en .NET...

Pour l'instant, j'ai essayé une solution javascript, mais sans trop réussir à mettre cela dans le projet... Et puis en CSS, ça serait tellement plus propre...

Merci dans tous les cas de prendre de votre temps pour mon problème !
Smiley jap

A bientôt,
Jérôme.
Hello Jérôme et bienvenue, Smiley smile

Jeronimo_Paris a écrit :
Pour la mise en forme par tableau, j'imagine que vous devez sans doute dire ça à longeur de temps sur ce forum.
Oui mais pour les formulaires c'est quand même bien pratique. Cela n'empêche pas de jeter un oeil à cet article :
http://covertprestige.info/test/27-formulaires-sans-tableaux.html

Jeronimo_Paris a écrit :
- dernier point, mais c'est un détail, je suis étonné du "[]" dans l'attribut "type" du tab "input"...
C'est en effet une faute d'inattention de l'ami Nolem. Smiley cligne

Pour répondre à ta question je ne pense pas que ça soit possible sans JavaScript car le fait de cliquer sur l'élément LABEL suffirait... sauf qu'il est vide (et d'ailleurs à quoi sert-il ?). Au passage, s'il ne s'agissait pas d'une appli intranet il faudrait revoir l'accessibilité d'un bouton radio dont le libellé est en en-tête de colonne...
PS : en repassant par ici je me rends compte qu'il y aurait effectivement une solution CSS : 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test formulaire</title>
<style type="text/css">
table {
	border-collapse: collapse;
}

th {
	width: 100px;
}

td, th {
	text-align: center;
	border: 1px solid #ccc;
}

td, td input {
	height: 25px;
	margin: 0;
	padding: 0;
}

td input {
	display: block;
	width: 100%;
}

</style>
<!--[ if lte IE 7]> (enlever l'espace entre le crochet et le i)
<style type="text/css">
td input {
	display: inline;
	width: auto;
}
</style>
<script type="text/javascript">
function init() {
var eTDs = document.getElementsByTagName("td"); 
for (var x = 0; x < eTDs.length; x++) {
	eTDs[x].onclick = function() {
		this.firstChild.checked=true;
	}
}
}
window.onload=init;
</script>
<![ endif]--> (enlever l'espace entre le crochet et le e)
</head>
<body>
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
	<table>
      <tr>
		<th>Oui</th>
		<th>Bof</th>
		<th>Non</th>
      </tr>
      <tr>
        <td><input type="radio" name="test1" value="oui" /></td>
        <td><input type="radio" name="test1" value="bof" /></td>
        <td><input type="radio" name="test1" value="non" /></td>
      </tr>
      <tr>
        <td><input type="radio" name="test2" value="oui" /></td>
        <td><input type="radio" name="test2" value="bof" /></td>
        <td><input type="radio" name="test2" value="non" /></td>
      </tr>
    </table>
	<p>
		<input type="submit" value="Envoyer" />
	</p>
</form>
</body>
</html>

Modifié par Heyoan (24 May 2009 - 05:16)
Jeronimo_Paris a écrit :
Ce sont des données tabulaires

Ha ha, bien tenté, mais non.

Les résultats de ce questionnaire pourraient être compilées sous la forme de données tabulaires. Le questionnaire lui-même, par contre, n'est pas un jeu de données tabulaires. Depuis quand les éléments de formulaires sont-ils des données, d'ailleurs? Smiley cligne

La structuration logique (et sémantiquement correcte) de ce formulaire serait plutôt:
<fieldset>
    <legend>Intitulé de la question</legend>
    <input type="radio" id="q1-c1" name="q1" value="1" />
    <label for="q1-c1">Choix 1</label><br />
    <input type="radio" id="q1-c2" name="q1" value="2" />
    <label for="q1-c2">Choix 2</label><br />
    <input type="radio" id="q1-c3" name="q1" value="3" />
    <label for="q1-c3">Choix 3</label><br />
</fieldset>
(structure à répéter pour chaque question)

Éventuellement, on pourra utiliser des titres (H2, H3... suivant le niveau où on se place) pour les intitulés de questions, car les LEGEND sont des saloperies à mettre en forme. (On supprimera alors les FIELDSET également, je pense.) C'est une concession que l'on fait souvent, au nom du design et de l'ergonomie, même si théoriquement la solution la plus accessible pour une série de boutons radio ou checkbox avec un intitulé commun est celle ci-dessus.

Dans le cas présent, la présentation en tableau est un choix ergonomique (éventuellement contestable, mais ce n'est pas le sujet). On part de l'observation que les réponses disponibles sont toujours les mêmes, et donc qu'une présentation en tableau est possible et peut faciliter la lecture (mais aussi l'influencer, nous diront les experts ès sondages et enquêtes d'opinion Smiley lol ). Cela ne signifie pas que cette présentation en tableau soit sémantiquement correcte ou puisse être rendue accessible. (Je propose tant qu'à faire qu'on s'intéresse ici à l'accessibilité plutôt qu'au sémantiquement correct, qui est plus casse-gueule et moins utile comme sujet.)

Donc, si on transpose notre code ci-dessus dans une ligne de tableau:
<tr>
    <th scope="row">Intitulé de la question</th>
    <td>
        <input type="radio" id="q1-c1" name="q1" value="1" />
        <label for="q1-c1">Choix 1</label>
    </td>
    <td>
        <input type="radio" id="q1-c2" name="q1" value="2" />
        <label for="q1-c2">Choix 2</label>
    </td>
    <td>
        <input type="radio" id="q1-c3" name="q1" value="3" />
        <label for="q1-c3">Choix 3</label>
    </td>
</tr>

Bon, ça passe encore. Le problème intervient quand on veut mettre à profit la structure tabulaire pour supprimer les intitulés des choix (LABEL) dans les cellules, pour les reporter en en-tête de colonne (TH scope="col"). Si on supprime les LABEL, le lien entre intitulé du choix et case correspondante est perdu. Le TH suffit-il à le rétablir? Ça reste à voir. Ici, il faudrait tester avec des lecteurs d'écran pour voir si le TH est lu systématiquement, et si cela suffit pour une utilisation correcte du formulaire.
Modérateur
Salut tout le monde,

Heyoan a écrit :

...
C'est en effet une faute d'inattention de l'ami Nolem. Smiley cligne
...


Ah oui oups, j'ai fait une petite coquille. D'ailleurs sur le coup, j'ai même confondus avec les cases à cochets. Argh, c'est pas bon de coder rapidos dans le feu de l'action et être à la bourre. Smiley ohwell

Enfin, j'ai rectifié le tir (rééditer mon message précédent).

J'ai vu que depuis, il y eu quelques petits messages intéressants depuis. Toutefois, je poste également ma réponse :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
    table{
        border-collapse:collapse;
        width:600px;
        /*border:1px solid #999;*/
    }
    .gauche{
        text-align:left;
        font-style:italic;
        width:390px;
        padding:0px 5px;
    }
    th,td{
        text-align:center;
        vertical-align:middle;
        height:35px;
        margin:0px;
        padding:0px;
    }
    th{
        border-bottom:1px solid #999;
    }
</style>
</head>

<body>
<form action="pageEnvoiDonneesProtegesContreAttaque.ext" method="post">
    <table>
        <thead>
            <tr>

                <th>Mes questions pertinentes</th>
                <th>Oui</th>
                <th>Ne sais pas</th>
                <th>Non</th>
            </tr>
        </thead>
        <tbody>

            <tr>
                <td class="gauche">Ma question A ?</td>
                <td><input type="radio" name="PropositionA" value="1" /></td>
                <td><input type="radio" name="PropositionA" value="2" /></td>
                <td><input type="radio" name="PropositionA" value="3" /></td>
            </tr>
            <tr>
                <td class="gauche">Ma question B ?</td>

                <td><input type="radio" name="PropositionB" value="1" /></td>
                <td><input type="radio" name="PropositionB" value="2" /></td>
                <td><input type="radio" name="PropositionB" value="3" /></td>
            </tr>
        </tbody>
    </table>
    <p><input type="submit" value="Vas-y" /><input type="hidden" name="_envoiQuestionnaire" value="ok" /></p>
</form>
</body>
</html>


@Heyoan : Bien vu (dit l'aveugle Smiley lol . Le cas de le dire) le display:block au td input. Je n'y avais pas pensé. Ce sera chose faite pour la prochaine Smiley smile

@Jeronimo_Paris : Quand j'ai lu ton code plus calmement, je me suis aperçu que tu t'étais emmêler les pinceaux (mise en place absolu). Pars du principe de faire simple dès le début. Si la simplicité ne fonctionne pas, alors il faut employer plus de moyens. Souvent, le positionnement en absolu donne un code un peu Smiley biggol (tordu). Là, ce n'était pas le cas.

++
Modifié par Nolem (25 May 2009 - 14:41)
Bonjour à tous,

Merci beaucoup (vraiment beaucoup) pour vos réponses ! Smiley jap Me répondre au beau milieu de la nuit (4 h du matin Smiley whattha ) ou le dimanche, c'était bien plus que je ne pouvais l'espérer !!!

@Heyoan : J'ai pris ton code en l'adaptant un peu... C'est vraiment très idiot, j'étais partis sur une solution type javascript, mais cela m'avait semblé trop complexe... Et ton code en quelques lignes est très simple (et très efficace). Merci beaucoup ! Ah oui, pourquoi l'avoir limité aux IE ? Je l'ai testé sur tous les navigateurs et cela fonctionne sans aucun problème...


@Nolem : Merci beaucoup pour le code ! Je n'ai pas bien compris où je m'étais emmêler les pinceaux come tu dis, mais je te remercie pour ta contribution ! Bon, dans le premier post, les labels en absolut, c'était pour couvrir la surface de la cellule, mais si ça marchait en largeur, ça ne fonctionnait pas en hauteur, si celle-ci n'était pas spécifiée...

@Florent V : Houla, lorsqu'au bureau on a décortiqué les possibilités et les contraintes qui se présentait pour ce projet, il me semble que la conclusion d'utiliser un tableau (un seul heureusement) pour la représentation de ce type de données était plutôt clair. Tu me vois maintenant douter !! Merci à toi d'apporter des lumières sur ce point, je pensais pourtant que l'on avait fait le tour du problème... Comme quoi, je suis quelqu'un d'heureux, j'en apprends tous les jours ! Smiley smile Par contre, j'ai du mal à suivre ton raisonnement au début... Si, lors de la conception, les types (mes chefs, en l'occurence) ont décidé de structurer le questionnaire de façon tabulaire (c'est-à-dire avec des lignes et des colonnes qui ont un sens dans la représentation), et qu'ils veulent représenter ce questionnaire sous forme de tableau html, il y a ici un rapport direct entre la structure conçue et la représentation... De plus, même si les éléments d'un formulaire ne sont pas des données et ne sont pas intrasecquement des données tabulaire, on a tout de même le droit de les représenter dans un ensemble tabulaire ? Bon, je vais regarder tous les sujets qui s'y prêtent, il y a sans doute des points que je n'ai pas bien compris ! Merci pour cette ouverture d'esprit en tout cas !!


Donc, merci à tous, je vais essayer de passer le post en "résolu"...

Jérôme.
Jeronimo_Paris a écrit :
même si les éléments d'un formulaire ne sont pas des données et ne sont pas intrasecquement des données tabulaire, on a tout de même le droit de les représenter dans un ensemble tabulaire ?

Rien n'interdit de le faire. Mais si on veut que le formulaire soit accessible, se pose la question de l'association entre les champs de saisie (des cases à cocher ici, input de type radio ou checkbox) et les intitulés.
Sujet clos
Aller à