Difference between revisions of "Présentation en grille"

From M@gistère
Jump to navigation Jump to search
Line 4: Line 4:
  
 
==Que devez-vous faire ?==
 
==Que devez-vous faire ?==
[[Fichier:Capture d’écran de 2018-10-09 14-22-45.png|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.
  
 
<pre>
 
<pre>
 
<!-- début bloc -->
 
<!-- début bloc -->
 
<div style="padding:15px;margin: 5px 5px 0px 5px;display:flex;background-color:#E6F5FC;">
 
<div style="padding:15px;margin: 5px 5px 0px 5px;display:flex;background-color:#E6F5FC;">
   <div style="float: left; width: 32%; padding: 2px">[[[cr_9770a347ce07f468e4384980c8fa3792435ef3db]]]</div>
+
   <div style="float: left; width: 32%; padding: 2px"> [[[cr_9770a347ce07f468e4384980c8fa3792435ef3db]]] </div>
   <div style="float: left; width: 32%; padding: 2px">[[[cr_92d84c7a0d559da403d78a478f6c9697344300d3]]]</div>
+
   <div style="float: left; width: 32%; padding: 2px"> [[[cr_92d84c7a0d559da403d78a478f6c9697344300d3]]] </div>
   <div style="float: left; width: 32%; padding: 2px">[[[cr_69756fcc2612a1ecbfd88e8e0834c33b41151ff2]]]</div>
+
   <div style="float: left; width: 32%; padding: 2px"> [[[cr_69756fcc2612a1ecbfd88e8e0834c33b41151ff2]]] </div>
 
</div>
 
</div>
 
<div style="padding:15px;margin: 0px 5px 5px 5px;display:flex;background-color:#E6F5FC;">
 
<div style="padding:15px;margin: 0px 5px 5px 5px;display:flex;background-color:#E6F5FC;">
   <div style="float: left; width: 32%; padding: 2px"> texte 1</div>
+
   <div style="float: left; width: 32%; padding: 2px"> texte 1 </div>
   <div style="float: left; width: 32%; padding: 2px"> texte 2</div>
+
   <div style="float: left; width: 32%; padding: 2px"> texte 2 </div>
   <div style="float: left; width: 32%; padding: 2px"> texte 3</div>
+
   <div style="float: left; width: 32%; padding: 2px"> texte 3 </div>
 
</div>
 
</div>
 
<div style="clear:both"></div>
 
<div style="clear:both"></div>
 
<!-- fin bloc -->
 
<!-- fin bloc -->
 
</pre>
 
</pre>

Revision as of 12:37, 9 October 2018

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).

Que devez-vous faire ?

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.

<!-- début bloc -->
<div style="padding:15px;margin: 5px 5px 0px 5px;display:flex;background-color:#E6F5FC;">
  <div style="float: left; width: 32%; padding: 2px"> [[[cr_9770a347ce07f468e4384980c8fa3792435ef3db]]] </div>
  <div style="float: left; width: 32%; padding: 2px"> [[[cr_92d84c7a0d559da403d78a478f6c9697344300d3]]] </div>
  <div style="float: left; width: 32%; padding: 2px"> [[[cr_69756fcc2612a1ecbfd88e8e0834c33b41151ff2]]] </div>
</div>
<div style="padding:15px;margin: 0px 5px 5px 5px;display:flex;background-color:#E6F5FC;">
  <div style="float: left; width: 32%; padding: 2px"> texte 1 </div>
  <div style="float: left; width: 32%; padding: 2px"> texte 2 </div>
  <div style="float: left; width: 32%; padding: 2px"> texte 3 </div>
</div>
<div style="clear:both"></div>
<!-- fin bloc -->