[Résolu] Champs masqués : infaiZables en CSS ??

Devant le succès de mon premier post (en nombre de visites tout au moins) je reformule ma problématique.

Une page web contient des champs de type radio+boutons de type :
- si oui, précisez,
- sinon : message si-non
- si pas d'avis : un autre message

et le résultat produit ressemble à :



mais il pourrait ressembler à :



la structure sous-jacente est un liste <ul class="choisir">. Chaque élément <li> contient un radio bouton <input type="radio" class="select"> et un espace de contenu masquable <div class="contenu"> disposés comme suit :

<ul class="choisir">

  <li>
    <input type=="checkboox class="select"">
    Réponse : Oui
    <div class="contenu"> Du texte, des champs, etc...</div>
  </li>
  
  <li><!--Choix suivant...--></li>
  
  <li><!--Autre choixt...--></li>
  
</ul>

Le code javascript est chargé de l'animation masquage/démasquage des contenus suivant l'état coché/non coché du radio-bouton. Dans la mesure ou le javascript est collé dynamiquement au chargement de la page, et non en-ligne, on peut l'utiliser indifféremment dans lmes deuux cas, et même dans le cas ou des listes en contiendraient d'autres récursivement, avec des cases à cocher - pensez à une treeview sur un système de fichiers par exemple.

Pour le javascript, tout va bien. Avec un framework comme prototype, le code est simplissime.

LE PROBLEME est au niveau de la CSS :

>>>>> comment faire pour afficher dans le premier cas les items de liste [les boutons radios] de façon alignés tandis que les items de contenu disposés toujours à la même place ?

L'utilisation des floats sur les <li> n'est pas toujours heureuse, puisque les <div> s'alignent par rapport au parent <li, tandis quel'utilisation d'un position:absolute sur les <div> conduit à un dépassement de ces derniers par rapport au conteneur du <ul> est qu'un overflow ne semble pas résoudre, étant donné que <ul> n'est pas parent direct des <div>, on à les hiérachies d'accès :

ul.choisir/li/input.selectv
ul.choisir/li/div.contenu

si quelqu'un à une idée, merci de m'en faire part
Modifié par hefeustz (21 Nov 2007 - 10:02)

hefeustz a écrit :
tandis que l'utilisation d'un position:absolute sur les <div> conduit à un dépassement de ces derniers par rapport au conteneur du <ul> est qu'un overflow ne semble pas résoudre, étant donné que <ul> n'est pas parent direct des <div>

Même si ul était parent direct des div, ça ne changerait strictement rien: il n'y a aucun moyen de faire rentrer dans le flux un élément en positionnement fixe ou absolu.

Mais si tu veux afficher tes trois div pile au même endroit, je vois mal comment faire sans avoir recours au positionnement absolu.

En conclusion, ce que tu veux réaliser ne me semble pas possible au vu du code HTML utilisé.

(Sinon, je n'ai pas bien compris l'utilité de ce texte placé à droite, les exemples donnés sont un peu abscons.)

merci pour ce débuut de réponse !

en fait si je tente de placer un <div> dans les lélements de liste, c'est pour avoir des fragments de formulaires (des champs à remplir) qui se déplient suivant l'item de liste sémectionné.

Si on coche 'oui' on a les champs pour le "si oui, préciser...", pareil pour non et pareil poour la dernière option.

Les textes à droite ? DIV et UL ? c'est juste pour indiquer de quel élément HTML on parle !

Quand à l'idée tordue de mettre des <div> dans des listes <ul> c'est ppour permettre un dégradation gracieuse de ce genre de contrôle "window-tabs-like"...

Comme je disais dans mon anvcien post :
CSS habille la liste, javascript l'anime...

quelques précisions au cas où je n'aurai pas été assez clair :

ce que je cherche à implémenter, avec ces <div> qui se démasquent en fonction du <input type="radio"> frère (previous sibling) n'est ni plus ni moins qu'une variante de contrôle à onglets que tout le monde connaît en cliquant-droit dans l'Explorateur de fichiers et en choississant "Propriétés"...

le code javascript est navrant de simplicité, mais la grande question est :

placer au même endroit [pos_x, pos_y] des <div> enfants d'une série de <li> affichés in-line ou flottés à gauche, et faire en sorte que la hauteur du <ul> conteneur s'adapte au <div> couramment affiché ?

Voici un petit dessin de rappel :



merci pour vos réponses !

PS: pour info, les "pure CSS popups" et autres que j'ai pu trouver, c'est - presque - ça, seulement ca marche avec des ancres donc il n'est pas question d'y mettre des <div> dedans. Quand au onglets existants un peu partout, ils reposent sur des <div> reliés via javascript (pire dans certains cas, avec des tableaux) et je ne suis guère optimiste quand à leur fonctionnement/apparence en mode dégradé, quan bien même il y en aurait un !!

Avec les div à l'intérieur des li flottants, je ne vois pas, désolé.
Tu peux positionner les div à l'endroit voulu en les faisant sortir du li flottant... grâce au positionnement absolu. Mais si tu utilises le positionnement absolu, le bloc parent ne tiendra plus compte de la hauteur de la div.

Il faudrait que les div soient placées en dehors des li, mais dans ce cas le rendu en mode dégradé ne sera pas correct (on aura d'abord les trois li, puis les trois div...).

À la rigueur, on peut peut-être bidouiller quelque chose avec du positionnement relatif pour décaler les div vers la gauche.
Mais ça donnera un bricolage spécifique, peu adaptable à d'autres situations.

je ne pensais pas me tracasser à ce point pour faire cette variante du banal contrôle à onglets si familier de nous, utilisateurs d'OS graphiques !

je vais vraisemblablement me rabattre sur une solution de type "découplé" de la forme

<div class="conteneur">
  <!-- onglets -->
  <ul class="onglets">
    <li class="un_onglet">Un onglet</li>
    <li class="un_onglet">Un autre onglet</li>
    ...
  </ul>

  <div class="panel">Contenu de l'onglet</div>
  <div class="panel">Contenu de l'autre onglet</div>
  ...
</div>

qui sera moins élégante du point de vue de la dégradation gracieuse, puisqu'elle affichera d'abord la liste des onglets, puis les contenus des onglets, mais là c'est (à regrets) l'interface utilisateur qui doit marcher coûte que coûte.

Par contre je maintiendrai le fait que c'est à javascript que reviendra le travail d'afficher le contenu de l'onglet actif TOUT EN MASQUANT les autres, sans javascript TOUT sera afficher par défaut.

On pourrait conclure quand à l'inaccessibilité des onglets : vrai peut être sur le Web, mais faux sous XP ou KDE, où Ctrl+Tab permet de switcher entre onglets, dans les applications bien écrites du moins.

Enfin dernière remarque : si on remplace dans mon exemple de départ les boutons radio par des checkboxes et si on imbrique récursivement les structures ul(li+div) obtenues, on arrive à dessiner quelque chose ressemblant fort à un explorateur de fichiers : le code javascript que j'ai écrit étant exactement le même, j'en conclus à l'existence d'un lien de parenté fort entre les "tree-view" et les "tab-panes".
Mais pas jumeaux pour autant, vu les écueils posés par les css...

En tout cas merci pour les avis et cette (grande) révision des css, que j'avais un peu oublié puisque je passe le plus clair de mon temps à scripter (php+js)
Modifié par hefeustz (21 Nov 2007 - 10:24)

hefeustz a écrit :
Par contre je maintiendrai le fait que c'est à javascript que reviendra le travail d'afficher le contenu de l'onglet actif TOUT EN MASQUANT les autres, sans javascript TOUT sera afficher par défaut.

C'est à priori la marche à suivre, oui.

hefeustz a écrit :
On pourrait conclure quand à l'inaccessibilité des onglets : vrai peut être sur le Web, mais faux sous XP ou KDE, où Ctrl+Tab permet de switcher entre onglets, dans les applications bien écrites du moins.

Ton système d'onglet n'est pas inaccessible à partir du moment où tu gardes une structure logique. Le problème qui se pose ici, c'est une limite de la mise en page avec les CSS: il n'y a pas de «positionnement absolu avec prise en compte du bloc positionné par son ancêtre positionné» en CSS, sauf erreur de ma part.

Les interfaces graphiques des systèmes d'exploitation utilisent soit un système de modification d'un bloc unique de contenu, soit un calcul dynamique de la hauteur de la fenêtre conteneur, et peut-être les deux à la fois. On notera qu'en termes d'interface Web tu peux tout à fait faire cela... avec une surcouche Javascript (calcul de la hauteur du bloc positionné en absolu, et dimensionnement en fonction d'un bloc vide placé sous le bloc positionné en absolu ou rajout d'une marge ou d'un padding ou autre aménagement de la mise en page).

Pour ce qui est de l'accessibilité:
- la navigation au clavier devrait pouvoir être assurée même avec une structure HTML dissociée;
- une structure HTML dissociée sera par contre pas terrible pour le parcours linéaire du contenu (lecteur d'écran, rendu sans feuilles de style, etc.). Utiliser des intitulés texte (labels explicites) peut être un palliatif correct. À voir en fonction du contenu exact (exemple fictif: «Si vous avez répondu oui, merci de préciser <label for="precisions">votre lieu de naissance</label> <input type="text" id="precisions">»).

Oui, enfin, bon. On pourrait aussi réfléchir en amont au bien fondé des formulaires en ligne à coulisse.

je n'ai rien dit.

sinon, une chose: la "structure HTML dissociée" ne sera pas accessible. Point.
Modifié par Laurent Denis (21 Nov 2007 - 13:10)