26714 sujets

CSS et mise en forme, CSS3

Bonjour à tous
La page "calendrier" du site de chorale est de façon assez naturelle sous la forme d'une <table>, chaque <tr> correspondant à un évènement du calendrier et chaque <td> à une propriété de l'évènement (date, sujet, lieu, etc.)
J'ai besoin également de titres intermédiaires.
Cela donne quelque chose comme

<table>
    <tr class="title"><td colspan="5"><h2>Mai 2019</h2></td></tr>
    <tr class="event">
        <td>div class="date">la date</div></td>
         <td><div class="subject">...</div></td>
          <td><div class="location">...</div></td>
         ........
    </tr>
    <tr>...
</table>

Notes:
1. on ne peut pas mettre les titres dans des <caption> car il n'y a qu'une seule balise de ce type dans une <table>
2. les <td> ne sont que des contenants, il faut des <div> à l'intérieur pour pouvoir y accrocher des popins

Tout cela marche bien tant que la largeur de l'écran permet l'affichage d'une table de façon lisible.

Si la largeur devient trop petite, je suis conduit à préférer une présentation du type:

<div>
    <h2>Titre</h2>
    <ul class="month>
        <li class="event">
            <div class="date">la date</div>
            <div class="subject">...</div>
            <div class="location">...</div>
            ...
        </li>
        <li>....</li>
     </ul>
</div>

Pour passer d'une présentation à l'autre, on utilise bien entendu des mediaqueries.

Comment mettre tout cela en forme:
1) on peut tout générer en double. La page contient à la fois une <table> et une <div>, on rend l'une ou l'autre visible selon la largeur de la page. C'est lourd, mais ça marche, et ce n'est pas très difficile à faire, le contenu de la page étant généré par script (php ou js, comme on veut)
2) on peut générer uniquement la <table> et changer l'affichage des balises <table>, <tbody>,<tr>, <td> par display:block, display-inline-block etc. si la taille de la page est petite
3) on peut générer la <div> et changer l'affichage des balises <ul>, <li>, etc. par display:table, display:table-row, display:table-cell etc. si la page est grande
Noter que dans ce dernier cas les <div> dans <li> deviennent réellement des <td> et que qu'on ne peut plus leur donner de propriété position. Il faut donc les "enrober" par des balises de premier niveau qui deviendront des <td>, donc d'autres <td>... ou pourquoi pas des <td> Smiley cligne

Je serais heureux d'avoir vos avis sur cette question, voire d'autres propositions de solution.
Bonjour.

As-tu envisagé les listes de définition ? À première vue, ça me semble pouvoir correspondre.
Hello

j'ai intégré récemment un calendrier (affichage par semaine) contenant donc des évènements.

Ayant eu une réflexion similaire à la tienne, j'ai finalement créer mon calendrier à part, puis ensuite une liste d'évènements que je masque. Le calendrier et la liste d'évènements sont donc dans des conteneurs différents.

En version desktop / tablette, je viens positionner mes div évènement en absolute dans le calendrier via une fonction JS, en utilisant des attributs data sur mes évènements qui se réfèrent au valeurs du calendrier (jour / heures / durée).

En mobile, je masque tout simplement mon calendrier et j'affiche ma liste d'évènements qui par défaut est masquée, et donc je n'exécute donc plus ma fonction de positionnement.

Egalement au click sur ces évènements, des popups, ici pour s'inscrire à un atelier.

Tu peux y jeter un oeil et t'amuser à réduire ton navigateur pour voir le résultat.
Je ne vais pas te faire de code, parce que je ne me rappelle plus trop Smiley smile mais l'idée est là.

https://www.utopihall.fr/nos-ateliers/
Modifié par Pedrothelion (19 Apr 2019 - 17:48)
Merci de ta réponse
Ce que tu as fait me semble bien approprié à ton sujet: peu d'évènement, la présentation des évènements sur la grille, un évènement ne s'affiche complètement que quand on clique dessus, etc.
C'est une présentation similaire que j'envisage de faire en mode mobile
upload/1555690091-48769-calendrier2.png
Par contre en mode grand écran il est important de donner une vue d'ensemble sur au moins un mois, avec les informations principales affichées, les utilisateurs y sont habitués, et ils m'ont même demandé d'ajouter des popin qui s'ouvrent quand on clique sur une propriété. Par exemple on affiche un popin GoogleMaps quand on clique sur le lieu de l'évènement, un popin qui affiche les oeuvres au programme d'une répétition, et pour chaque oeuvre un "super-popin" qui permet d'affichier un popup avec la partition, ou d'entendre un enregistrement de l'oeuvre, etc.
Tout cela n'est pas utilisable sans souris, mais apparemment mes utilisateurs consultent en général le site sur un ordinateur. Ils sont prêts à accepter qu'il y ait moins d'information sur un téléphone bien entendu.
je pense qui faut éviter de mettre trop de popins, si vraiment il y a beaucoup d’informations à apporter sur un événement, autant lui consacrer une page dédiée et donc un meilleur référencement, ou alors condenser sur un seul popin.

Sur un mois affiché en grand écran , il faudra procéder autrement car cela va faire bcp de monde Smiley smile
Tu aurais sans doute raison si la présentation tabulaire avec ses popins n’était pas là depuis l’origine du site, il y aura 20 ans en octobre prochain.
En fait tout ce problème vient de la popularité récentes des mobiles qui oblige à faire quelque chose de différent.
Donc résumons
1) je ne vais pas supprimer la présentation tabulaire actuelle qui marche très bien sur PC et tablettes et dont les utilisateurs sont satisfaits pour la plupart
2) le point est « est-ce que je fais deux présentations en cachant celle qui ne va pas ou est-ce que j’en fais une seule qui s’adapte à l'écran?
3) si j’en fais une seule quelle est la technique la plus efficaces entre mettre des balises <table> , <tr>, < tu> etc. en les transformant en « balises neutres » par mediaqueries ou à l’inverse est-ce que je fais des <div>, <ul>, <li> etc. ?
4) y aurait-il une meilleure solution en utilisant par exemple des grid et autres propriétés CSS que je n’ai jamais utilisées car trop récentes et jusqu’il y a peu plus ou moins bien supportées par les différents navigateurs ?
En fait c’est plus par curiosité personnelle que par une absolue nécessité que je pose cette question. J’ai déjà implémenté la solution à « deux présentations » pour le calendrier, mais ce site a d’autres pages du même genre, je préférerais avoir réglé ce problème pour le calendrier avant de finaliser les autres pages similaires.
si tu souhaites rester sur des table, il y des techniques pour les rendre responsive, mais ce sont des methodes un peu cheap à mon sens, certes ça fonctionne....

Après évidemment tu peux t'orienter sur des systèmes comme flex, ou un système de grille tout fait comme bootstrap par exemple.

A toi de voir ce qui te semble le mieux, et surtout au plus simple pour toi.
Après réflexion nocturne, je pense avoir trouvé un juste milieu. Ça consiste à ne pas utiliser de <table> ni de display:table et ses homologues, tout simplement des <div> en display:inline-block en jouant sur les caractéristiques de ces objets pour obtenir une présentation adaptée.
Je reviendrai vers vous quand j’aurai suffisamment progressé.
Aussi effectivement, pense à supprimer les marges par défaut quand des éléments sont disposés en inline-block pour éviter les surprises; en mettent un "font-size:0;" au conteneur parent.
Oui, c’est le genre de remise à zéro qui s’impose
J’ai vécu les débuts du HTML, il n’y avait pas de CSS, ces valeurs par défaut permettaient d’avoir une présentation assez laide mais claire à la lecture. Ne pas oublier qu’il s’agissait exclusivement de publications scientifiques dont le format était en quelque sorte normalisé par l’usage.
Les navigateurs ont toujours des valeurs par défaut pour supporter ces anciens documents HTML, il faut prendre l’habitude d’annuler ces valeurs par défaut en tête du fichier CSS commun à toutes les pages d’un site.
C’est ce que je fais pour tous les sites que je gère. Mais je découvre toujours des valeurs par défaut que je connaissais pas...
Comme promis, je vous présente une solution qui me satisfait.

La présentation selon la largeur de l'écran
écran large:
upload/1556613241-48769-cal1.png
écran étroit:
upload/1556613274-48769-cal2.png
Quand on clique sur le "bouton" du 26 mai on obtient:
upload/1556613326-48769-cal3.png

Pas de <table> ni de display:table, tout est fait dans une balise <li> pour chaque événement

<li class="event concert" data-eventid="C20190526">
  <button class="date"><time datetime="2019-05-26T16:00:00"><p>Dimanche</p><p>26</p><p>16h00</p></time></button>
  <div class="eventData visible">
    <h4 class="handle"><time datetime="2019-05-26T16:00:00">Dimanche 26 Mai 16h00</time></h4>
    <div class="date"><time datetime="2019-05-26T16:00:00">Dim. 26 16:00</time><time datetime="2019-05-26T18:30:00"></time></div>
    <div class="poster">
      <img class="thumbnail" src="/images/posters/thumbnails/C20190526_t.jpg?20181223180025" alt="">
      <img class="image" src="/images/posters/C20190526.jpg?20181223175743" alt="">
    </div>
    <div class="subject">
      <ul>
        <li>Concert "Boréales"</li>
        <li>à Savigny sur Orge</li>
      </ul>
    </div>
    <div class="address" title="8 avenue Chardonnerets - 91600 Savigny sur Orge">Église Sainte Thérèse</div>
    <div class="prog"></div>
  </div>
</li>

Les points à noter:
3 présentations de la date de l'évènement, qui sont montrées/cachées par mediaqueries
En mode "écran large", la largeur de chaque <div> (date, poster, subject, address) est exprimée "en dur" sous la forme de width:Nem, la dernière <div> (prog) est sous la forme width:calc(98% - XXem) pour ne pas dépasser la largeur de la page, ce qui la ferait aller à la ligne, ce que l'utilisation de <table> ou display:table aurait fait automatiquement.
L'adresse de cette page: https://tests.alma-musica.net/html/cal.php
Mais s'agissant d'un site de tests, je ne peux pas garantir que par effets de bord ça marche en permanence.

Merci beaucoup pour avoir contribué à ma réflexion