Présentation en grille : Différence entre versions

De M@gistère
Sauter à la navigation Sauter à la recherche
Ligne 3 : Ligne 3 :
 
*Utiliser une méthode compatible avec les obligations d'accessibilité (pour les mal-voyants notamment).
 
*Utiliser une méthode compatible avec les obligations d'accessibilité (pour les mal-voyants notamment).
  
Exemple sur une copie d'écran :
+
==Exemple 1==
 
 
 
[[Fichier:Capture d’écran de 2018-10-09 14-46-18.png|Présentation en grille]]
 
[[Fichier:Capture d’écran de 2018-10-09 14-46-18.png|Présentation en grille]]
 
==Que devez-vous faire ?==
 
 
  
 
Voici un petit code réutilisable qui permet de placer trois vidéos (ressources centralisées entre triple crochets)
 
Voici un petit code réutilisable qui permet de placer trois vidéos (ressources centralisées entre triple crochets)
Ligne 26 : Ligne 22 :
 
<div style="clear:both"></div>
 
<div style="clear:both"></div>
 
</pre>
 
</pre>
 +
 +
==Exemple 2==

Version du 25 octobre 2018 à 13:36

Objectifs

  • Présenter des éléments sous forme d'une grille
  • Utiliser une méthode compatible avec les obligations d'accessibilité (pour les mal-voyants notamment).

Exemple 1

Présentation en grille

Voici un petit code réutilisable qui permet de placer trois vidéos (ressources centralisées entre triple crochets) et les trois textes explicatifs qui viennent se placer en dessous.

<div style="padding:15px 15px 0px 15px;margin: 5px 5px 0px 5px;display:flex;background-color:#E6F5FC;">
  <div style="float: left; width: 32%; padding: 6px"> [[[cr_9770a347ce07f468e4384980c8fa3792435ef3db]]] </div>
  <div style="float: left; width: 32%; padding: 6px"> [[[cr_92d84c7a0d559da403d78a478f6c9697344300d3]]] </div>
  <div style="float: left; width: 32%; padding: 6px"> [[[cr_69756fcc2612a1ecbfd88e8e0834c33b41151ff2]]] </div>
</div>
<div style="padding:0px 15px 15px 15px;margin: 0px 5px 5px 5px;display:flex;background-color:#E6F5FC;">
  <div style="float: left; width: 32%; padding: 6px"> Légende vidéo 1 </div>
  <div style="float: left; width: 32%; padding: 6px"> Légende vidéo 2 </div>
  <div style="float: left; width: 32%; padding: 6px"> Légende vidéo 3 </div>
</div>
<div style="clear:both"></div>

Exemple 2