1493 sujets

Web Mobile et responsive web design

[Résolu] Formatage responsive d'une <figure>

Bonjour à tous
Je cherche à formater:

<figure class="work">
  <figure class="mainView">
    <figcaption>
      <h2>L'arbre de la connaissance</h2>
    </figcaption>
    <img src="/works/screen/paradis.jpg" alt="">
  </figure>
  <figure class="description">
    <figcaption>
      <h2>L'arbre de la connaissance</h2>
      <ul class="desclist">
        <li class="worktype">Paravent</li>
        <li class="materials">fibre de verre, résine</li>
        <li class="dimensions">largeur 170cm × hauteur 180cm</li>
        <li class="year">2005</li>
      </ul>
    </figcaption>
    <figure class="otherViews">
      <figure>
        <figcaption>détail</figcaption>
        <img src="/works/screen/paradis_1.jpg" alt="">
      </figure>
      <figure>
        <figcaption>détail</figcaption>
        <img src="/works/screen/paradis_2.jpg" alt="">
      </figure>
      <figure>
        <figcaption>détail</figcaption>
        <img src="/works/screen/paradis_3.jpg" alt="">
      </figure>
    </figure>
  </figure>
</figure>

pour obtenir:
sur un écran large:
upload/1534166896-48769-work1.png
sur un écran étroit:
upload/1534166951-48769-work2.png

État actuel de mes travaux: http://tests.bonieux.com/main/work-test0.html
cette page contient le CSS actuel, que je n'arrive pas à régler pour obtenir le résultat désiré.
Merci de votre aide
Merci de vos réponses
Bien entendu, je mettrai des @mediaQuery pour passer d'un mode à l'autre, mais tout d'abord comment faire pour que la liste des "otherViews" soit en bas de la <figure> principale?
_laurent a écrit :
Bah ca le fait déjà là non ?

Ce n'est pas ce que je constate:
upload/1534237232-48769-work3.png

Il y a une solution "lourde" qu'on peut voir dans http://tests.bonieux.com/main/work-test_X.html
Il suffit de mettre un @mediaQuery ad-hoc pour que "vertical" soit invisible en mode page et "horizontal" soit invisible en mode paysage.
Ce n'est pas ce que j'appelle du code "responsive"!

Dans un autre site, je suis revenu au code des années 1995-2005: un script JS qui refait la mise en page en fonction de la largeur de l'écran et qui est appelé:
- au chargement de la page
- sur l'évènement "resize"
- sur l'évènement "orientationchange"

Ce que je cherche, c'est une solution purement CSS et sans dupliquer les données.

Il est peut être possible de faire quelque chose avec les "flex", c'est un domaine que je n'ai pas bien compris, même après avoir lu et relu la doc. Sans doute un effet de mon âge, j'ai du mal à intégrer de nouveaux concepts.
Modifié par PapyJP (14 Aug 2018 - 11:03)
Modérateur
Hello Papy,
Voici un exemple avec Flex Smiley smile .

Pour l'exemple, j'ai créé un structure vide avec des `section`/`article` mais cela correspond à ta structure.
Aussi, c'est peut-être moi mais je ne trouve pas très intuitif les `figure` encapsulées dans `figure`

N'hésite pas si tu ne comprends pas un truc ou si ce n'est pas clair Smiley ravi
Modifié par Yordi (14 Aug 2018 - 11:22)
Merci de ta réponse, je vais étudier cela de près.

Pour les <figure> dans les <figure>:

Dans un document imprimé, ce qu'on appelle une "figure", assez souvent encadrée, contient souvent plusieurs images avec chacune un texte qui lui est approprié, plus un texte relatif à l'ensemble de la figure.
Que pour représenter cela en HTML on utilise des balises <figure> ou des balises <section> ou <div>, c'est simplement un problème de "sémantique HTML5".

J'ai pris cette habitude lors de la migration du site https://www.osirisnet.net d'un style très ancien (multiples tables imbriquées) vers HTML5 responsive, travail qui m'a pris 2 ans.
J'avais posé la question sur Alsacreations et les réponses reçues m'ont convaincu de le faire.
Hmm!
Je n'arrive pas à obtenir ce que je veux: voir http://tests.bonieux.com/main/work-test_Y.html
ça met bien les 3 images en bas, mais comment faire pour que la largeur soit ajustée au contenant? On fait ça en général en utilisant display:table, mais on ne peut pas avoir à la fois display:table et display:flex.
Modérateur
Pas certain d'avoir compris mais tu peux garder ton "display: table" sur .otherViews.
(ou un "display: flex" sur .otherViews et "flex-grow: 1" sur les enfants)
PapyJP a écrit :
comment faire pour que la largeur soit ajustée au contenant?

Avec ceci ? :
justify-content: space-between

Mais forcément ça laisse des espaces plus grands entre les images. Si ce dernier point ne convient pas il faudra passer par une autre méthode permettant d'avoir toujours la largeur maximale pour chaque image avec un background cover.
Merci de vos réponses
J'en déduis qu'il n'existe pas de solution satisfaisante avec cette approche, ou que s'il en existe une, elle n'est pas évidente.
Je vais simplement changer la présentation de cette balise, rien ne m'oblige à respecter absolument la présentation que j'avais imaginée.

Sans vouloir polémiquer, je constate une fois de plus que l'utilisation des <table> pour la présentation est toujours d'actualité, comme Raphaël l'a fort bien expliqué dans un article des 2011 que je ne retrouve plus.
Il y a certes eu depuis des améliorations dans le CSS (flex, grid) mais j'ai l'impression que si on veut faire des pages responsives il est préférables d'éviter autant que possible les présentations en 2 dimensions, et sinon faire des ajustements par JS.
C'est du reste ce qu'on faisait systématiquement avant CSS3: le CSS a entre autres intérêts celui de faire automatiquement des opérations qu'on faisait précédemment par JS, mais il est normal que certaines de ces opérations continuent à nécessiter du JS.
Sujet clos
Aller à